10 Stellar Web Resources for HTML5 and CSS3
Format Text in an HTML5 Document
How to Create Web Forms with HTML5

Dissect a Simple Markup Example

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>
    <head>
        <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">
    </head>
    <body>
        <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>
          </nav>
        <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=
             "http://www.amazon.com/Beginning-HTML5-CSS3-Dummies-
              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>.
             </p>
          <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>
           </figure>
         </div>
         <footer>
          copyright &copy; dummieshtml.com
         </footer>
       </div>
    </body>
</html>

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.

image0.jpg
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Create CSS Markup
How to Build Image Maps in HTML5
How to Use Password Fields and Hidden Fields in Your HTML5 Form
How to Draw and Animate Graphics with HTML5 canvas
Use the <img> Element to Place Images
Advertisement

Inside Dummies.com