New Semantic Elements

Semantic elements are elements with a meaning.

<section>

  • A section is a thematic grouping of content, typically with a heading.

  • Example: A Web site's home page could be split into sections for introduction, content, and contact information.

<article>

  • An article should make sense on its own, and it should be possible to read it independently from the rest of the web site.

  • Exampel: Blog post, Newspaper article

<section> 与 <article> 可以根据需要相互nested

  • The <header> element should be used as a container for introductory content.

  • You can have several <header> elements in one document.

  • A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.

  • You can have several <footer> elements in one document.

  • The <nav> element is intended for large blocks of navigation links. However, not all links in a document should be inside a <nav> element!

aside

  • The <aside> element defines some content aside from the content it is placed in (like a sidebar).

  • The aside content should be related to the surrounding content.

<figure> & figcaption

  • images and captions can be grouped together in <figure> elements
<figure>
  <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
</figure>

results matching ""

    No results matching ""