leafleafleafDocy banner shape 01Docy banner shape 02Man illustrationFlower illustration

HTML5 Semantic Elements

Estimated reading: 5 minutes 21 views

semantic = meaning

Semantic Elements = Meaningful Elements

What are semantic elements?

A semantic element can clearly describe its meaning to browsers and developers.

Non-semantic Element instances: <div> and <span> – no content consideration.

Examples of semantic elements: <form>, <table>, and <img> – clearly define its content.

Browser support

Internet Explorer
Firefox
Opera
Google Chrome
Safari

Internet Explorer 9+, Firefox, Chrome, Safari and Opera support semantic elements.

Note: This element is not supported in Internet Explorer 8 and earlier. But a compatible workaround is provided at the bottom of the article.

New Semantic Elements in HTML5

Many existing websites contain the following HTML code: <div id=”nav”>, <div class=”header”>, or <div id=”footer”>, to indicate navigation links, headers, and footers.

HTML5 provides new semantic elements to define different parts of a web page:

  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <figcaption>
  • <figure>
  • <footer>

HTML5 <section> element

The <section> tag defines a section (section, section) in the document. Such as chapters, headers, footers, or other parts of the document.

According to the W3C HTML5 documentation: A section contains a set of content and its title.

Example

 <section>
        <h1> WWF </h1>
        <p> The World Wide Fund for Nature (WWF) is.... </ p>
    </section>

HTML5 <article> element

The <article> tag defines individual content. .

<article> element usage example:

  • Forum post
  • Blog post
  • News story
  • Comment

Example

<article>
        <h1> Internet Explorer 9 </h1>
        <p> Windows Internet Explorer 9 (abbreviated as IE9 ) was released on March 14, 2011 at 21:00. </p>
    </article>

HTML5 <nav> element

The <nav> tag defines the section of the navigation link.

The <nav> element is used to define the navigation links section of the page, however, not all links need to be contained within the <nav> element!

Example

<nav>
        <a href=" /html/ "> HTML </a> | <a href=" /css/ "> CSS </a> | <a href=" /js/ "> JavaScript </a> | <a
            href=" /jquery/ "> jQuery </a>
    </nav>

HTML5 <aside> element

The <aside> tag defines content outside the content of the main area of ​​the page (such as a sidebar).

The content of the aside tag should be related to the content of the main area.

Example

   <p> My family and I visited The Epcot center this summer. </p>
    <aside>
        <h4> Epcot Center </h4>
        <p> The Epcot Center is a theme park in Disney World, Florida. </p>
    </aside>

HTML5 <header> element

The <header> element describes the header area of ​​the document

The <header> element is mainly used to define the introduction display area of ​​the content.

You can use multiple <header> elements in a page.

The following example defines the header of the article:

Example

    <article>
        <header>
            <h1> Internet Explorer 9 </h1>
            <p>
                <time pubdate datetime=" 2011-03-15 "> </time>
            </p>
        </header>
        <p> Windows Internet Explorer 9 (abbreviated as IE9) was released on March 14, 2011 at 21:00 </p>
    </article>

The <footer> element describes the bottom area of ​​the document.

The <footer> element should contain its containing element

A footer usually contains the document’s author, copyright information, linked terms of use, contact information, etc.

You can use multiple <footer> elements in a document.

Example

<footer>
        <p> Posted by: Hege Refsnes </p>
        <p>
            <time pubdate datetime=" 2012-03-01 "> </time>
        </p>
    </footer>

HTML5 <figure> and <figcaption> elements

The <figure> tag specifies individual flow content (images, charts, photos, code, etc.).

The content of the <figure> element should be relative to the main content, but if removed, should have no effect on the flow of the document.

The <figcaption> tag defines the title of the <figure> element.

The <figcaption> element should be placed at the position of the first or last child of the “figure” element.

Example

<figure>
    <img loading=" lazy " src=" img_pulpit.jpg " alt=" The Pulpit Rock " width=" 304 " height=" 228 ">
        <figcaption> Fig1 . - The Pulpit Pock, Norway. </figcaption>
    </figure>

Can we start using these semantic elements?

The above elements are all block elements (except <figcaption>).

In order for these blocks and elements to work in all versions of browsers, you need to set the following properties in your stylesheet file (the following style code will allow older browsers to support the block-level elements described in this chapter):header, section, footer, aside, nav, article, figure
{
    display: block;
}

Problems in Internet Explorer 8 and earlier versions of IE

IE8 and earlier cannot render CSS effects on these elements, so that you cannot use <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, or other HTML5 elements.

After downloading, put the following code into the web page:<!–[if lt IE 9]>
<script src=”html5shiv.js”></script>
<![endif]–>

The above code will load the html5shiv.js file when the browser is less than IE9 version. You must put it in the <head> element, because IE browser needs to render these new HTML5 elements after the head is loaded

Leave a Comment

CONTENTS