HTML5 Semantic Elements

HTML5 Semantic Elements

Semantic elements = elements with a meaning What are Semantic Elements? A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: <div>and <span> - Tells nothing about its content. Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content. New Semantic Elements in HTML5 Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div id="footer">
to indicate navigation, header, and footer. HTML5 offers new semantic elements to define different parts of a web page: <article><aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time> HTML5 <article> Element The <article> element specifies independent, self-contained content. Examples of where an <article> element can be used: Forum postBlog postNewspaper article Example <article>
  <h1>What Does WWF Do?</h1>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
HTML5 <section> Element The <section> element defines a section in a document. A home page could normally be split into sections for introduction, content, and contact information. Example <section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is....</p>
</section>