Dissect a Simple Markup Example - dummies

By Ed Tittel, Chris Minnick

Take a look at this code listing. Careful examination of this short listing shows quite a bit of HTML, but only indirect references to CSS. It’s the listing for the HTML5 Café Home Page.

<!DOCTYPE html>
        <meta charset="utf-8">
        <title>HTML5 Cafe: Home</title>
        <meta name="description" content="sample site for 9781118657201">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <div id="container">
          <nav id="topnav">
            <a href="index.html">HOME</a> | 
            <a href="about.html">ABOUT US</a> | 
            <a href="menu.html">MENU</a> | 
            <a href="contact.html">CONTACT US</a>
        <div id="content">
          <h1>Welcome to HTML5 Cafe!</h1>
          <p>Here you will find all sorts of delicious HTML5 and CSS3 treats.
             This is the sample site for <a href=
              Computer/dp/1118657209">Beginning HTML5 and CSS3 for Dummies</a>, 
              by <a href="http://www.edtittel.com">Ed Tittel</a> and 
              <a href="http://www.chrisminnick.com">Chris Minnick</a>. To view 
              all of the code samples from the book, visit the 
              <a href="menu.html">Menu</a>.
          <figure id="home-image">
            <img src="img/pitr_Coffee_cup_icon.png" 
             width="400" height="400" alt="delicious coffee">
            <figcaption class="warning">powered by coffee.</figcaption>
          copyright &copy; dummieshtml.com

The HTML elements you see in this listing are as follows, in their order of appearance:

  • The <html> tag starts the web page, and </html> ends it.

  • The markup between <head> and </head> defines general information for the entire web page.

  • The text inside the <title></title> element provides the page title.

  • The <meta> element provides information about page content and display layout.

  • A <link> element establishes a link to an external resource; in this case, to two different CSS style sheets.

  • The markup between <body> and </body> supplies actual page content.

  • The <div></div> element defines two different content divisions on the page, one for navigation, the other for page content.

  • The navigation <nav></nav> element defines a navigation bar.

  • The anchor <a></a> element defines hypertext links.

  • The heading1 <h1></h1> element defines a level-1 heading.

  • The paragraph <p></p> element defines a paragraph of text.

  • A figure <figure></figure> element defines a graphic with a caption.

  • The image <img> element links to a graphic for display, with horizontal and vertical dimensions and alternative text in case the image doesn’t appear.

  • A figure caption <figcaption></figcaption> element labels the figure caption.

  • A document footer <footer></footer> element defines text for the bottom of the page.

Put all these elements together, add attribute values and text, and you have the web page shown here.