Semantic elements of HTML5

semantics = meaning.

semantic element = The meaning of the element.

What is a semantic element?

A semantic element can clearly describe its meaning to the browser and the developer.

No semantic element instances: <div> and <span>-no need to consider content.

Examples of semantic elements: <form>, <table>, and -clearly define its contents.

Browser support

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

Note: This element is not supported in Internet Explorer 8 and earlier versions. However, the bottom of the article provides a compatible workaround.

New semantic elements in HTML5

Many existing Web sites contain the following HTML code: <div id= "Nav", <div class= "header", or <div id= "Footer", to indicate navigation links, headers, and tails.

HTML5 provides a new semantic element to define the different parts of a Web page:

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

HTML5 <section> Elements

<section> tags define the sections (section, section) in the document. such as chapters, headers, footers, or other parts of the document.

According to the HTML5 Document: section contains a set of content and its title.

Instance<section> <H1>WWF</H1> <p > The WorldWide Fund for Nature (WWF) is .... </P> </section>
Try it?

HTML5 <article> Elements

<article> tags define separate content.

Examples of <article> elements used:

• Forum Post
• Blog Post
• News Story
• Comment

Instance<article> <H1>Internet Explorer 9</H1> <p>Windows Internet Explorer 9 (abbreviated as IE9) was released on March 14, 2011 21:00. </P></Article>
Try it?

HTML5 <nav> Elements

<nav> tags define the part of the navigation link.

The <nav> element is used to define the navigation links section of the page, but not all links need to be included in the <nav> element!

Instance<Nav> <A Href="/html/">Html</A>|<A Href="/css/">Css</A>|<A href= " /js/ ">javascript </a> | <a href= "/jquery/" >jquery</a></nav< Span class= "Hl-brackets" >>
Try it?

HTML5 <aside> Elements

<aside> tags define content outside the main area of the page (such as the sidebar).

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

Instance<P>My family and I visited the Epcot Center this summer.</P> <aside> <h4>Epcot Center</h4> <p> TheEpcot Center is a theme park in Disney World, Florida. </P></aside>
Try it?

HTML5

The

You can use multiple

The following example defines the header of the article:

Instance<Article> <Header> <H1>Internet Explorer 9</H1> <P><Time pubdate Datetime= "2011-03-15" ></time> </p> </header> <p>< Span class= "Hl-code" >windows Internet Explorer 9 (abbreviated IE9) was released on March 14, 2011 21:00 </p></article>
Try it?

HTML5 <footer> Elements

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

The <footer> element should contain its containing element

A footer usually contains the author of the document, copyright information, link Terms of Use, contact information, etc.

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

Instance<Footer> <P>Posted By:hege Refsnes</p> <p> <time pubdate datetime=2012-03-01 "></< Span class= "hl-reserved" >time></ p></ footer>
Try it?

HTML5 <figure> and <figcaption> elements

The <figure> tag provides separate streaming content (images, charts, photos, code, and so on).

The content of the <figure> element should be related to the main content, but if deleted, it should not affect the flow of the document.

<figcaption> Label Definition <figure> The caption of the element.

The <figcaption> element should be placed in the position of the first or last child element of the "figure" element.

Instance<Figure> <Img Src="Img_pulpit.jpg" Alt= "the pulpit rock" Span class= "Hl-var" >width= "304 " height=228 "> <figcaption> fig1.-The pulpit Pock, Norway. </figcaption> </figure >
Try it?

Can we start using these semantic elements?

All of the above elements are block elements (except for <figcaption>).

In order for these blocks and elements to take effect in all versions of the browser, you need to set the properties in the stylesheet file (the following style code allows older browsers to support the block-level elements described in this chapter):

Header, section, footer, aside, nav, article, figure
{
Display:block;
}

Semantic elements of HTML5