Print bookPrint book

Layout Tags (header, footer, nav, aside)

Site: Philippine Science High School - MC - Knowledge Hub
Course: SY25.CS3.Web Development
Book: Layout Tags (header, footer, nav, aside)
Printed by: , Guest user
Date: Thursday, 7 August 2025, 9:56 AM

Table of contents

1. Introduction



After completing this module, you are expected to:

  • Compare the differences of HTML and HTML5 Demonstrate the use of various HTML5 tags
  • Demonstrate the use of various HTML5 tags
A web page consists of text, pictures, hyperlinks, navigational structure, and much more. HTML5’s Semantic Markup allows the creation of a structured layout for web pages and conveys meaning and purpose. Some essential HTML elements that will add to the layout of a web page will be presented in this module.

2. Semantic Markup

         

          Semantic markup or semantic HTML brings meaning to a web page than just presentation. Take for example the element. It is used to layout web pages and may wrap a navigational menu or a list of blog posts but by itself it doesn't convey what it is representing in a page. CSS classes applied to elements displays information about their intended purpose.

          In the markup shown above, the header CSS class provides an idea as to what the <div> might be doing. But, in the absence of this CSS class, there is no way to quickly identify what the <div> might be doing. This is because is a general-purpose element and has no specific documented responsibility. It marks a division or section of the web page but doesn't dictate what can go inside that section.


          HTML5 includes a set of markup elements to solve this matter. The new elements have names that gives a clear idea about their content. Listed below are the semantic elements of HTML5: 

  • <header>
  • <footer>
  • <section>
  • <aside>
  • <nav>
The figure below is an example of a page designed using the elements:


          The figure shows the usual arrangement of elements. The location of an element on a page is dependent on the layout. As an example, the <aside> element can be placed on the other side of the <section> or even below or above it.

2.1. The <header> tag


          The  <header> element represents the whole page's header or a section of it and usually contains a logo, search, navigational links, etc.

          This tag doesn’t present a new section in the outline. A <header> element commonly contains the heading (an <h1>-<h6> element) of a surrounding section. However, this is not required.

          The <header> tag is one of the HTML5 elements. In an HTML document, it is allowed to use several <header> tags, which can be placed in any part of it.

Note: It is not permitted to place the <header> tag inside the <footer> and <address> elements, and in another <header> tag.

          The following shows how a <header> element is used: 


    <header>
              <h1> This is a page heading </h1>
    </header>

2.2. The <nav> tag


          <nav> element provides navigation links, either to other pages or within the current page and is defined this way:

          “The <nav> element presents a section with navigation links.”

          It is advised that <nav> is used only for the main navigational structures and not for a minor set of hyperlinks (such as those found in the footer of a web page).

          The following shows how a  <nav> element is used: 


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

2.3. The <section> tag


          The <section> element is used to group related elements and may be used to define navigation, in the header or footer, or within articles. Some examples where it can be used include the section of a web page for contact information, announcement section of a web page, and pages of a tabbed user interface. A section usually has some heading.

          The given markup below displays how the <section> element looks: 


<section>
   <h1>This is a section heading</h1>
   <p>
   Hello world! Hello world! Hello world!
   Hello world! Hello world! Hello world!
   Hello world! Hello world! Hello world!
   </p>
</section>

          A section may contain a <header> as well as a <footer> element. It is analogous to a printed book section containing chapters or a section of a newspaper containing news items.

2.4. The <article> tag


          An <article> element describes a self-contained composition in a page, application, document, or site intended to be independently reusable or distributable (e.g. a newspaper or magazine article, a user- submitted comment, a blog entry, a forum post etc.).

          The given markup below displays how the <article> element could be used: 


<article>
   <h1>This is article heading</h1>
   <p>
   Hello world! Hello world! Hello world!
   Hello world! Hello world! Hello world!
  Hello world! Hello world! Hello world!
   </p>
</article>

          Sometimes <section> and <article> are used together and sometimes, on nested <article> elements. There are no rules dictating their nesting.

2.5. The <aside> tag


          <aside> element identifies content related to the main content of a page but does constitute the main content of the webpage (e.g. related links, advertisements, author information, related content etc).

          The given markup below displays how the <aside> element looks: 


<aside>
   <figure>
       <img src="images/laptop.png" height="100px" width="100px" />
       <figcaption>Figure caption goes here</figcaption>
   </figure>
   <p>
     Hello world! Hello world! Hello world!
     Hello world! Hello world! Hello world!
   </p>
</aside>

          The <aside> element contains a <figure> element and text in the form of a <p> element. The <figure> element is intended to represent a figure and in turn contains <img> and <figcaption> elements. The <img> tag points to the actual image to be displayed and the <figcaption> element holds the figure caption.



2.6. The <footer > tag


          The <footer> element represents the footer of the whole page or a <section> element. It is intended to contain footer information such as copyright notice.


          The <footer> element of the example web page looks like this:


<footer>
   <hr/>
    <p>Copyright (C) 2020. All rights reserved.</p>
</footer>


2.7. Using all the semantic tags together


Below is the entire code using the different semantic tags.  You can copy and paste it to your editor, then save it as a .html file and open it on any browser to see the output.


  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.        <title>Sample HTML5 Layout</title>
  5.     <style>
  6.          article {
  7.            padding:5px;
  8.            border: dotted 3px #ff006e;
  9.            margin-top:5px;
  10.         }
  11.         header {
  12.              padding:0px;
  13.              text-align: center;
  14.         }    
  15.         aside {
  16.             margin-top:5px;
  17.            background-color: #f0eaea;
  18.            padding:5px;
  19.            text-align : center;
  20.            font-style: italic;
  21.            border: double 3px #b200ff;
  22.         }
  23.         section {
  24.            padding:5px;
  25.            border: dashed 3px #0026ff;
  26.            margin-top:5px;
  27.         }
  28.         footer {
  29.            padding:5px;
  30.            text-align: center;
  31.            font-weight: bold;
  32.         }
  33.         nav {
  34.             text-align: center;
  35.         }
  36.         ul li {
  37.            display: inline;
  38.            padding-left:5px;
  39.            padding-right:5px;
  40.            text-align: left;
  41.            font-size:16px;
  42.            font-weight: bold;
  43.         } 
  44.     </style>
  45.   </head>
  46.   <body>
  47.      <header>
  48.          <h1>This is page heading</h1>
  49.      </header>
  50.      <nav>
  51.        <ul>
  52.          <li><a href="#">Home</a></li>
  53.          <li><a href="#">About Us</a></li>
  54.          <li><a href="#">Contact Us</a></li>
  55.        </ul>
  56.      </nav>
  57.      <article>
  58.        <h1>This is article heading</h1>
  59.          <p>
  60.          Hello world! Hello world! Hello world!
  61.         Hello world! Hello world! Hello world!
  62.          Hello world! Hello world! Hello world!
  63.          </p>
  64.      </article>
  65.      <aside>
  66.        <figure>
  67.          <img src="image.jpg" height="100px" width="100px" />
  68.          <figcaption>Figure caption goes here</figcaption>
  69.        </figure>
  70.        <p>
  71.          Hello world! Hello world! Hello world!
  72.          Hello world! Hello world! Hello world!
  73.        </p>
  74.      </aside>
  75.      <section>
  76.        <h1>This is a section heading</h1>
  77.        <p>
  78.          Hello world! Hello world! Hello world!
  79.          Hello world! Hello world! Hello world!
  80.          Hello world! Hello world! Hello world!
  81.        </p>
  82.      </section>
  83.      <footer>
  84.        <hr/>
  85.        <p>Copyright (C) 2020. All rights reserved.</p>
  86.      </footer>
  87.   </body>
  88. </html>

The code above will produce the output below:


3. Summary and References


Summary

  • Semantic markup conveys its meaning and purpose clearly to the developers and the browser. Web developers frequently use the <div> element to layout web pages. A <div> element may wrap a navigational menu or house a list of blog posts, but merely using <div> doesn't convey much information to developers or browsers. CSS classes applied to <div> elements reveal information about their intended purpose.

  • Semantic elements of HTML5 are listed below:
  • <header>
  • <footer>
  • <section>
  • <article>
  • <aside>
  • <nav>
  • The <header> tag defines the header of a page or a section
  • The <nav> element houses navigation menus or any navigational structure such as hyperlinks.
  • The <section> element represents a section of a document or application.
  • The <article> element represents an independent item section of content such as a blog post, forum post, or a comment.
  • The <aside> element houses content related to the surrounding content but, at the same time, is a standalone piece of content in itself.
  • The <footer> element presents the footer of the whole page or a
  • element. It contains footer information such as copyright notice.

References

Bipin, J. (2014). Understanding the Proper Way to Lay Out a Page with HTML5 - Developer.com. https://www.developer.com/lang/understanding-the-proper-way-to-lay-out-a-page-withhtml5.html

Ducket, J. (2011). HTML5 Layout (Seventh Edition), HTML & CSS Design and Build Website (430-448). Indianapolis, IN: John Wiley & Sons, Inc.

HTML5 Aside Element: Here Are the Good (And Not So Good) Uses for it. (2019). https://html.com/ tags/aside/


HTML Layout Tutorial: Learn to Create a Proper Page Layout Design. (2020). https://www.bitdegree.org/learn/html-layout#basic-elements-of-website-layouts


Kyrnin, J. (n.d.). What is semantic html, and why should you use it? Lifewire. https://www.lifewire.- com/why-use-semantic-html-3468271

Terry Felke-Morris(2015). Page Layout. In Terry Felke-Morris (Seventh Edition), Web Development and Design Foundations with HTML5 (257-312). England, Pearson

The Article Contents element. (n.d.). MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/ HTML/Element/article

The Navigation Section element. (n.d.). MDN Web Docs. https://developer.mozilla.org/en-US/docs/ Web/HTML/Element/nav