Beginning HTML5 and CSS3 For Dummies
Book image
Explore Book Buy On Amazon

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="">Ed Tittel</a> and 
              <a href="">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 ©

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

  • The tag starts the web page, and ends it.

  • The markup between and defines general information for the entire web page.

  • The text inside the element provides the page title.

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

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

  • The markup between and supplies actual page content.

  • The

    element defines two different content divisions on the page, one for navigation, the other for page content.

  • The navigation

    element defines a navigation bar.

  • The anchor element defines hypertext links.

  • The heading1

    element defines a level-1 heading.

  • The paragraph

    element defines a paragraph of text.

  • A figure

    element defines a graphic with a caption.

  • The image

    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

    element labels the figure caption.

  • A document 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.


About This Article

This article is from the book:

About the book authors:

Ed Tittel is a 30-year veteran of the technology industry with more than 140 computing books to his credit, including the bestselling HTML For Dummies.

Chris Minnick runs Minnick Web Services. He teaches, speaks, and consults on web-related topics and has contributed to numerous books, including WebKit For Dummies.

This article can be found in the category: