[HTML5] Structure Markup Elements

The most important part of HTML5 is descriptive markup. New structure-related elements help you organize your web pages and provide semantic meaning to each section. In HTML4, you used <div> or <span> tags to divide sections in a document by specifying the “id” or “name” attributes. This method works but it is not elegant. HTML5 promises a lot regarding this structuring of documents.

 

1. New Elements for Structure

  • <header> : a header for a page, a section, an article, or an aside
  • <footer> : a footer for other elements (body, section, article, aside)
  • <nav> : navigation menus – can be part of a header or a footer or can be independent
  • <section> : a genetic area – the main content of a page, usually includes articles
  • <article> : the part for self-contained content – an individual entry, especially for blogs
  • <aside> : supporting content for a page
  • <figure> : images, audios, and videos that are imbedded in a page
  • <dialog> : replace the <dl> element to contain conversational transcripts

Sections and articles can be confusing. Just think of a newspaper. There’s a sports section or an economics section. Inside of a section, there are several articles.

[Note] It is also argued that an article can include multiple sections. For example, there is an article “Top 5 movies this week!” which can include 5 sections for each movie. Yes, it is quite confusing and you are not the only one out there. Articles and sections can nest each other.  Just use them in a way that makes sense.

 

2. Html 5 Document Structure

Let’s see how a typical HTML5 document might look like.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Html 5</title>
    <link rel="stylesheet" href="default.css" />
    <script src="default.js"></script>
  </head>
  <body>
    <header>
      <h1>Html 5</h1>
    </header>
    <nav>
      <ul>...</ul>
    </nav>
    <section>
      <header>Entertainment</header>
      <article>
        <header>Music</header>
        <section>
          <header>Singer 1</header>
        </section>
        <section>
          <header>Singer 2</header>
        </section>
      </article>
      <article>
        <header>Movie</header>
      </article>
    </section>
    <aside>
      <p>Gossip</p>
    </aside>
    <footer>
      <p> &copy me </p>
    </footer>
  </body>
</html>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s