HTML layout

The <header> element represents a container for content at the top of the page that stays mostly the same across all pages of the website such as:

  • header text for the site name
  • logo or icon
  • login links or forms
  • header for the page title, this would change across the pages
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="/style.css">
    <script type="text/javascript" src="/script.js"></script>
    <meta charset="UTF-8">
    <meta author="Your name here">
    <title>My first webpage</title>
  </head>
  <body>

    <header>
      This is my website name
    </header>
    This is my first web page!
  </body>
</html>

The <nav> tag defines a set of navigation links.

Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for the major block of navigation links.

Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.


The <main> tag specifies the main content of a document.

The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.


The <footer> tag defines a footer for a document or section.

A <footer> element typically contains:

  • authorship information
  • copyright information
  • contact information
  • sitemap
  • back to the top links
  • related documents

The <div> tag defines a division or a section in an HTML document.

The <div> tag is used as a container for HTML elements – which is then styled with CSS or manipulated with JavaScript.

The <div> tag is easily styled by using the class or id attribute.

Any sort of content can be put inside the <div> tag!

Note: By default, browsers always place a line break before and after the <div> element.

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="/style.css">
    <script type="text/javascript" src="/script.js"></script>
    <meta charset="UTF-8">
    <meta author="Your name here">
    <title>My first webpage</title>
  </head>
  <body>
    <nav>The menu will go here</nav>
    <main>
      This is the main part of the page.
    </main>
    <footer>
      This is the footer.
    </footer>
  </body>
</html>
Example output after adding nav, header, main and footer
Example output after adding nav, header, main and footer
Report a Glow concern
Cookie policy  Privacy policy

Glow Blogs uses cookies to enhance your experience on our service. By using this service or closing this message you consent to our use of those cookies. Please read our Cookie Policy.