DEV Community

Cover image for Basics Webpage using HTML
prallav aggarwal
prallav aggarwal

Posted on

Basics Webpage using HTML

Firsty thank you for visiting my post. I am just trying to create some good post 🙂. I hope you like it.If there are any suggestion then it will be very helpful. I just made the very basic webpage using only HTML.

I used the basic elements :

  • Nav tag
  • Header tag
  • Heading tag
  • Paragraph tag
  • Main tag
  • Section tag
  • Figure tag
  • Image tag
  • Figcaption tag
  • Aside tag
  • Unordered List
  • Bold
  • Blockquote tag
  • Cite tag
  • Footer tag
  • Anchor tag

Uses of above tags :

Nav tag (<nav></nav>) : I used this tag to create a space for navigating website by creating links within in it. This is meant to create a seperate space for navigation. We can use any element within it.

Header tag (<header></header>) : It is used to make our code clean and so that we can seperate elements that are for heading from rest of the elements.

Heading tag (<h1></h1>) : It is for creating headings in document. Most browser displays font size for h1 as 2em.

Paragraph tag (<p></p>) : It is for adding text to the document. Default font size for p
tag is 16px.

Main tag (<main></main>) : It has no special feature. It is used to seperate dominant content from the others.

Section tag (<section></section>) : It as name suggest is used create different secions in the webpage. It act as container in which we can create other elements.

Figure tag (<figure></figure>) : I used figure tag to insert image with a caption. And we can insert caption using figcaption tag inside figure tag. We can also add diagram or code snippets in it with caption.

Image tag (<img></img>) : I used to embedd image with in the document. It has two attributes src which is to specify the source of the image and second is alt that is to specify the alternative text if in case image not displayed.

Figcaption tag (<figcaption></figcaption>) : I used it to add caption within figure tag.

Aside tag (<aside></aside>) : I am trying this element and It is useful if you want to add some information beside the main content.

Unordered List (<ul></ul>) : It is used list without any order.

Bold tag (<b></b>) : It is used to bold the text.

Blockquote tag (<blockquote></blockquote>) : It converts the normal text into quoted form.

Cite tag (<cite></cite>) : It is used to display the name of person of whose the work is.

Footer tag (<footer></footer>) : This tag is used to group all the elements which are used in bottom section of page.

Anchor tag (<a></a>) : It is used to create text that act as a link. It has href attribute which has link.

By developing this basic page I understand the basic elements more clearly and how to write code in proper way i.e. using header, main, section or footer tag.

Also there is one interesting question that what if we dont use body tag and instead use main tag ?
ANS : The tag is meant to isolate the main content from other secondary or repeated content. This distinction is important for accessibility and search engine optimization (SEO) purposes. Main tag should not contain repeated content and must focus on unique content. While body tag contains all repeating and non repeating content.

Take a look to my website screenshot :

Image description

Here's the code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bio</title>
    <link rel="stylesheet" href="/CSS2.0/file4.css">
    <style>
        img{
            height: 400px;
        }
        html{
            scroll-behavior: smooth;
        }
        aside{
  float: right;

        }
    </style>
</head>
<body>
    <nav>
        <a href="#biography">Biography</a>
        <a href="#Achievements">Achievements</a>
        <a href="#Resources">Rersources</a>
    </nav>
    <header>
        <h1>Linus Torvalds</h1>
        <p>The Creator of Linux</p>
    </header>
    <main>
        <section id="Image">
            <figure>
                <img src="https://imgs.search.brave.com/5d-P01nBCDInZ3B6vCIYguY9bcKXvbJ3G2ciZS4fS7E/rs:fit:500:0:0:0/g:ce/aHR0cHM6Ly91cGxv/YWQud2lraW1lZGlh/Lm9yZy93aWtpcGVk/aWEvY29tbW9ucy90/aHVtYi9lL2U4L0xj/M18yMDE4XyUyODI2/MzY4MjMwMyUyOV8l/Mjhjcm9wcGVkJTI5/LmpwZWcvNTEycHgt/TGMzXzIwMThfJTI4/MjYzNjgyMzAzJTI5/XyUyOGNyb3BwZWQl/MjkuanBlZw" alt="Linus Torvalds image">
                <figcaption>A photograph of Linus Torvalds</figcaption>
            </figure>
        </section>
        <section id="biography">
            <h1>Biography</h1>
            <p>Linus Torvalds is a Finnish-American software engineer who is the creator and lead developer of the Linux kernel. He also created the distributed version control system Git.He was honored, along with Shinya Yamanaka, with the 2012 Millennium Technology Prize by the Technology Academy Finland "in recognition of his creation of a new open source operating system for computers leading to the widely used Linux kernel."He is also the recipient of the 2014 IEEE Computer Society Computer Pioneer Award and the 2018 IEEE Masaru Ibuka Consumer Electronics Award.
            </p>
        </section>

        <aside>
            <p>Linus Torvalds is a 
            </p>
        </aside>

        <section id="Achievements">
            <h1>Achievements</h1>
            <ul>
                <li>
                    <b>1996</b> : In 1996, the asteroid 9793 Torvalds was named after him.
                </li>
                <li>
                    <b>1997</b> : In 1997, Torvalds received his master's degree (Laudatur Grade) from the Department of Computer Science at the University of Helsinki.
                </li>
                <li>
                    <b>1998</b> : In 1998, Torvalds received an EFF Pioneer Award.
                </li>
                <li>
                    <b>2000</b> : In 2000, he was awarded the Lovelace Medal from the British Computer Society.
                </li>
                <li>
                    <b>2001</b> : In 2001, he shared the Takeda Award for Social/Economic Well-Being with Richard Stallman and Ken Sakamura.
                </li>
                <li>
                    <b>2003</b> : In 2003, the naming of the asteroid moon Linus was motivated in part by the fact that the discoverer was an enthusiastic Linux user.
                </li>
                <li>
                    <b>2005</b> : In August 2005, Torvalds received the Vollum Award from Reed College.
                </li>
                <li>
                    <b>2008</b> : In 2008, he was inducted into the Hall of Fellows of the Computer History Museum in Mountain View, California, "for the creation of the Linux kernel and the management of open source development of the widely used Linux operating system.
                </li>
                <li>
                    <b>2010</b> : He was awarded the C&C Prize by the NEC Corporation in 2010 for "contributions to the advancement of the information technology industry, education, research, and the improvement of our lives.
                </li>
                <li>
                    <b>2012</b> : On 20 April 2012, Torvalds was declared one of two winners of that year's Millennium Technology Prize, along with Shinya Yamanaka. The honor is widely described as technology's equivalent of the Nobel Prize.
                </li>
            </ul>
            <blockquote>
                <p>"One of the most influential person in world."</p>
                <cite>
                    - Time Magazine, <a href="">link</a>
                </cite>
            </blockquote>
        </section>
    </main>
    <footer id="Resources">
        <h1>Resources</h1>
        <ul>
            <li><a href="">Resource1</a></li>
            <li><a href="">Resource2</a></li>
            <li><a href="">Resource3</a></li>
        </ul>
    </footer>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)