About <body> Tags for HTML5 - dummies

About <body> Tags for HTML5

When working in HTML5, you’ll get to know <body> tags very well. You place all the content that you want your visitors to see, everything that will be displayed in a web browser, in the body of your web page, between the opening and closing <body> tags.

Within the <body> tags, you can still use all the tags from previous versions of HTML (with a few notable exceptions).

The Jelly Rancher jellyfish site features different designs for the horizontal and vertical views o

The Jelly Rancher jellyfish site features different designs for the horizontal and vertical views on the iPhone and iPad.

In the sections that follow, you discover the most important new structural HTML5 tags that you can use in the body of your web pages. HTML5 introduces new structural tags, which are also called semantic tags because they add more meaning to HTML code by better identifying each type of content they format.

Here are the new structural tags introduced in HTML5:

  • <header> — Defines the header of any section or page. The header tag is the ideal place for the name of the site.

    Here’s the HTML code that makes up the header of all the internal pages in the example Jelly Rancher site. Note: This code is altered slightly for the front page to accommodate the larger image in the header.

      <h1><a href="index.html">Jelly Rancher</a></h1> 
      <h2>Specializing in<br>
        Jellyfish Aquariums</h2>
  • <nav> — Defines the main navigation links in a page or section. The main navigation links are typically placed just after the header and then repeated at the bottom of the page.

    Within the <nav> tag, follow the common convention of formatting our list of links with an unordered list, using the <ul> tag to surround the entire list of links with in the <nav> tags, and then making each navigational element a separate list item with the <li> tag.

          <li><a href="index.php">Home</a></li>
          <li><a href="aquariums.php">Order Custom Aquariums</a></li>
          <li><a href="Mark-Loos.php">About Mark Loos</a></li>
          <li><a href="contact.php">Contact</a></li>
  • <article> and <section> — Use these tags to define any article or a distinct section of a page.

    In the example Jelly Rancher site, the next element is the main content section of the page. For this part of the page, you can use either the <article> tag or the <section> tag. You can use these two tags interchangeably. Thus you can have a section with several articles within it. Or you can have an article that has multiple sections.

    Either way, make sure that when you use these tags, you’re defining areas of the page that go together in a meaningful way. In the code example that follows, the <article> tag defines the main content, and the <section> tag separates sections in the article:

          <h2>This is a headline for the first section</h2>
          <p>more content...</p>
          <h2>This is a headline for the second section</h2>
          <p>more content...</p>
  • <footer> — Defines the footer for any section or page. You can use the <footer> tag within a section or article tag, but it’s most commonly used at the very bottom of a page. Usually the footer has a lot of legal text in it.

    You know how when you get one of those credit card offers in the mail it has all that small legal text? The semantic idea behind the <small> tag is the same. In HTML5, you can use the small tag in the footer container to format legalese, such as copyright information, causing it to display in small text without diminishing its importance semantically.

You can use all the tags in the preceding list more than once in a document. For example, you can have a <header> inside each <article>. Just make sure you never put a <header> inside another <header>.