Create HTML5 document Structure

HTML enables you to apply a fluid and organized structure to webpages. Paired with a powerful tool such as JavaScript, HTML5 lets you deliver highly interactive content that can pique your users’ interest.

HTML5 Semantic Markup

HTML5 element	Description
<article>	Defines self-contained areas on a page
<figcaption>	Defines the caption of a figure element
<figure>	Defines the caption of a figure element
<footer>	Defines the bottom of a section or page
<header>	Defines the top of a section or page
<hgroup>	Defines a group of headings (H1–H6 elements)
<aside>	Defines smaller content areas outside the flow of a webpage
<mark>	Defines text that should be highlighted
<nav>	Defines navigation to other pages in the site
<progress>	Defines the progress of the task
<section>	Defines the distinct content of a document

Using the <header> and <footer> elements

A webpage header contains content such as a logo or banner. You also can use the <header> element as a header to a <section> element or to an <article> element to hold an H1–H6 element as needed.

<body>
  <header>
    <h1>Some fictional company Website</h1>
  </header>
  <article>
      <header>
        <h1>Our first new Article</h1>
      </header>
  </article>
  <footer>
    <div>
        © 2020 Copyright:
        <a href="https://www.infocodify.com/"> Infocodify.com</a>
    </div>
  </footer>
</body>

Using the <nav> element

The <nav> element in an HTML5 document provides users with navigation through the main elements of the web document or web application as a whole, represented as a list of links.

<body>
  <header>
  <h1>Some fictional company Website</h1>
  <nav>
  <a href="Home.html">Document Structure</a>
  <a href="Blog.html">Writing Code</a>
  <a href="About.html">Styles</a>
  </nav>
  </header>
</body>

Using the <hgroup> element

The <hgroup> element is a semantic method that organizes headers and sub headers contains <h1> to <h6> elements.

<body>
    <article>
    <header>
    <hgroup>
    <h1>Our first new Article</h1>
    </hgroup>
    </header>
    <p>Provide some useful information in the article</p>
    </article>
</body>

Using the <article> element

An <article> represents a whole and complete composition or entry, could be a magazine article or a blog post, where the content can be redistributed independently and not lose its meaning.

An article can have sub articles, each sub article must be a direct extension and related to the root article.

<body>
    <article>
       <header>
       <hgroup>
       <h1>Our first new Article</h1>
       </hgroup>
       </header>
       <section>
       <h1>Section 1</h1>
       <p>Some details about section 1</p>
       <aside>Did you know that 7/10 is 70%</aside>
       </section>
       <section>
       <h1>Section 2</h1>
       </section>
    </article>
    <article>
       <header>
       <hgroup>
       <h1>Second huge article</h1>
       </hgroup>
       </header>
       <p>Provide some useful information in the article</p>
    </article>
    <article>
       <header>
       <hgroup>
       <h1>Third huge article</h1>
       </hgroup>
       </header>
       <p>Provide some useful information in the third article</p>
    </article>
</body>

Each article added to the document in this example represents an independent part of the document that can be wholly contained.

Using the <section> element

The <section> element subdivides pages into sections. Each <article> element contains zero or more <section> to denote the different content sections within the <article> element.

The first element within a <section> element is typically a header or a header group.

<body>
<article>
    <header>
        <hgroup>
        <h1>Our first new Article</h1>
        </hgroup>
    </header>
    <section>
        <h1>Section 1</h1>
        <p>Some details about section 1</p>
    </section>
    <section>
        <h1>Section 2</h1>
    </section>
</article>
</body>

The document parser in the browser works through the document to determine the implied hierarchy of the headings, also called the document outline.

Using the <aside> element

The <aside> element doesn’t fall within the main flow or main content of the current page — for example, a sidebar, a note, an alert, or an advertisement.

The <aside> serves as a way to semantically define a section of text or graphics as an aside.

<body>
    <article>
       <header>
       <hgroup>
        <h1>Our first new Article</h1>
       </hgroup>
       </header>
       <section>
        <h1>Section 1</h1>
        <p>Some details about section 1</p>
          <aside>Did you know that 7/10 is 70%</aside>
       </section>
       <section>
         <h1>Section 2</h1>
       </section>
    </article>
    </body>

The <aside> element isn’t treated as special in any way compared to the other elements used to structure your page.

Using the <figcaption> and <figure> elements

The <figcaption> and <figure> elements, new in HTML5, provide the semantic elements necessary for adding graphics and figures to webpages.

<body>
    <article>
         <figure>
           <img src="image.jpg" style="width:50px; height:50px;" />
           <figcaption>Fig 1: Figure Title.</figcaption>
         </figure>
    </article>
</body>

Using the <progress> element

The <progress> element represents the progress of an objective or task. The two supported types of progress tasks are determinate and indeterminate.

Use a determinate progress task to know the starting and ending values.

<p>Our goal is to have 1000 users:</p>
<span>0</span>
   <progress value="50" max="1000"></progress>
<span>1000</span>

The <progress> element has two attributes you need to know: value and max.

The value attribute lets you specify the current value or position.
The max attribute tells the browser what the maximum possible value is for the element.

You use indeterminate tasks when you don’t know how long a task will take to complete but still want to show users that some work is occurring and that they should wait.

When you don’t specify the value attribute, the browser can infer that the <progress> element represents an indeterminate task.

<p>Data download is in progress, please wait patiently:</p>
<progress max="5"></progress>

Using the <mark> element

With the <mark> element element, you can highlight important information or any text. It has essentially the same function as a highlighter.

<p>Some very 
    <mark style="background-color:red;">important</mark> 
information provided here!</p>

Ads Right