How to structure a website / HTML document?

There is so much you can display on a HTML document.

You can give a header to the entire document.

You can have a navigation bar to navigate among different pages.

You can have a side bar where you can display your blog posts list.

You can show an article as the main content.

All these can be done using HTML sections. You use html sections to structure your website.

Here are the HTML elements which help you do that :

  • The header element
  • The h1,h2,h3,h4,h5 and h6 elements
  • The hgroup element
  • The body element
  • The article element
  • The nav element
  • The aside element
  • The footer element
  • The section element
  • The address element

Let’s look at them in detail.

The header element:

Header is used to group introductory content. Say you want to group together few headings and a navigation bar. You can put them inside header element.

This element is different from the head element which is primarily used to represent meta data.

Also usually this goes inside the body element in which case it represents the header for the entire web page. It can also go inside article or section element in which case it represents the header for the particular article or section.

<header>
  <h1>The Full Stack Developer </h1>
  <nav>
   <ul>
    <li><a href="/java">Java</a>
    <li><a href="/html">HTML</a>
    <li><a href="/spring">Spring</a>
   </ul>
  </nav>
</header>

The h1,h2,h3,h4,h5 and h6 elements:

These represent the headings , they could be headings of an article or a paragraph or a section.

h1 represents the highest rank and looks the biggest , the other headings get smaller and smaller as you move lower down the rank.

Here is an example:

<body>

<h1>How to be a full stack developer?</h1>
<h2>Front end technologies</h2>
<h3>Javascript</h3>


</body>

The hgroup element:

The hgroup element is used to group together headings ( h1,h2,h3…h6 headings). This just gives a semantic context to those headings. It means all these headings correspond to the same article / section.

The above example can be grouped together using hgroup element like this:

<body>

<hgroup>
<h1>How to be a full stack developer?</h1>
<h2>Front end technologies</h2>
<h3>Javascript</h3>


</hgroup>
</body>

The body element:

The body element represents the entire content of the html document. Every element representing the main content goes here.

<body>
<h1>My first post</h1>
Hello Welcome to my main page.

</body>

The article element:

The article element is used to represent an article / a blog post etc. It can be composed further using section element:

<article>
 <hgroup>
  <h1>UI Technologies</h1>
  <h2>HTML</h2>
 </hgroup>
 <p>HTML represents Hyper Text Markup Language.</p>
 <section>
  <h1>How to write HTML?</h1>
  <p>You write HTML using HTML elements.</p>
 </section>
 <section>
  <h1>How to style HTML?</h1>
  <p>You style HTML using CSS.</p>
 </section>
</article>

The nav element:

The nav element is used to provide navigation links so that user can navigate between different web pages.

Here is an example:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Using CSS , the navigation can be represented as a drop down menu or a navigation bar etc.

The aside element:

The aside element is used to represent content which is indirectly related to the main content. It represents side bar in a website for example.

In the below code , the aside element is used to list the archives of a blog along with the main content:

<body>
 <header>
  <h1>My blog</h1>

 </header>
 <aside>


  <nav>
   <h1>Archives</h1>
   <ul>
    <li><a href="/previouspost">Previous post</a>
    <li><a href="/firstpost">First post</a>
   </ul>
  </nav>
 </aside>

<article>
<!--- blog post content here-->
</article>

</body>

Just using the aside tag doesn’t mean that the content will be shown in a side bar. You need to use CSS to do that . The aside tag just represents the semantic context.

The footer element:

The footer element is used to represent the footer of a section/website.Quoting the html spec(https://html.spec.whatwg.org/):

” A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like”

<body>

<footer> Copyright 2020 , The full stack developer </footer>
</body>

The section element:

The section element represents a section within an article as shown in the earlier example under article element:

<article>
 <hgroup>
  <h1>UI Technologies</h1>
  <h2>HTML</h2>
 </hgroup>
 <p>HTML represents Hyper Text Markup Language.</p>
 <section>
  <h1>How to write HTML?</h1>
  <p>You write HTML using HTML elements.</p>
 </section>
 <section>
  <h1>How to style HTML?</h1>
  <p>You style HTML using CSS.</p>
 </section>
</article>

The address element:

The address element represent the contact information of a person , people or an organisation:

<address>
  <a href="mailto:fullstack@gmail.com">fullstack@gmail.com</a><br>
  <a href="tel:9876543210">9876543210</a>
</address>

That’s it!

We saw a brief overview of the html elements used to structure a HTML document/website. You can use these elements along with CSS to structure a website.

Reference:

https://html.spec.whatwg.org/dev/sections.html

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s