Guide to HTML Semantic Markup

thumb_html

This is the Chapter 6 of the Step-by-Step Creating a Website Guide series. This chapter will show you how to markup HTML finally! You like to design but don’t like coding? Don’t worry! Just follow this guide and markup a little by little with me! Open your favourite text edit tool like TextEdit or NotPad, let’s get started!

Step-by-Step Creating a Website Guide: Chapter 6

  • Goal: Understand and markup semantic HTML
  • Things you need: Text edit tool like Windows Notepad / Mac Textedit. Or HTML editor software like Adobe Dreamweaver
  • Knowledge Requirement: Basic HTML tags

Table of Contents

  1. Planning a Perfect Website Content
  2. Visualize Website Structure – Sitemap
  3. How to Create a Website Wireframe
  4. Photoshop Website Design Tutorial
  5. Slicing Images for Your Website with Photoshop
  6. Guide to HTML Semantic Markup ←We are here!
  7. Basic Process to Apply CSS to Your Website
  8. Let’s Publish Your Website to the World!

HTML Page Structure

HTML Page Structure
It’s a good idea to make sure of HTML page structure before you start to markup. I created a layout of this page like this. Adding IDs and classes to elements on this stage would be easier to code later on.

Div and Section Elements

section element is for a generic document or application section. A normally has a heading and contents. It’s a chunk of related content, like a subsection of a long article, a major part of the page. div element is a block-level element with no additional semantic meaning. So if you wrap contents only for layout, you’d better use div.

section

Let’s have a look floating 2 column page layout. These two blocks has only one contents each so it’s ok to use section element to float.

section

Both main column and side column have multiple section elements. It’s NOT ok to wrap those with section element.

div

In that case, use div element to layout.

HTML Markup

Open your text edit tool and create “index.html” file in your folder that you created previous chapter. This is a home page on your website.

1. Basic Template Source Code

This is a template code for HTML page.

<!DOCTYPE html>
<html lang="en">
<head>
</head>

<body>
</body>
</html>

2. head内

Insert page title, description and keywords into head area. <!--[if lt IE 9]>〜<![endif]--> is code to enable use of HTML5 sectioning elements in legacy Internet Explorer. You don’t have to insert this if you don’t support old browser like IE 6, 7 8.

<head>
     <meta charset="UTF-8">
     <title>Demo Portfolio Website</title>
     <meta name="description" content="I'm a photographer who's traveling around the world.">
     <meta name="keywords" content="photographer portfolio">

<!--[if lt IE 9]>
     <script src="js/html5shiv.js"></script>
<![endif]-->
</head>

Get html5shiv.js File

This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer.

  1. Create a new folder “js” in your project folder
  2. Download html5shiv
  3. Copy html5shiv.js in “dist” folder to your “js” folder
  4. Load that file using <!–[if lt IE 9]>〜<![endif]–> above

3. Header

Markup inside body. Contents should be displayed centre of a browser with 960px width so create div which wrap all contents.

<body>
    <div id="wrapper">
          <!-- All contents should be here -->
    </div>
</body>

Your logo image and navigation menu will be displayed in header area. Navigation menu is wrapped with nav tag and markuped with list tag.

<header>
     <a href="#" class="logo">
          <img src="images/logo.jpg" alt="logo" width="181" height="100">
     </a>
     <nav>
          <ul>
               <li><a href="#">Home</a></li>
               <li><a href="#">About</a></li>
               <li><a href="#">Works</a></li>
               <li><a href="#">Contact</a></li>
          </ul>
     </nav>
</header>

4. Contents Area

It’s a bit hard to understand the difference between div and section element. You might think it’s ok to wrap first main image and tagline with section tag. However, the area that is used section tag has to be include heading tags (h1 to h6) at the beginning. This area doesn’t have heading and contents so I used div tag.

Using comment will help you to organise a document. Also don’t forget to write alt attribute and size of images.

<div id="hero">
     <img src="images/hero.jpg" alt="Opera House" width="950" height="390">
     <p>I'm a photographer who's traveling around the world.</p>
</div><!-- /#hero -->

<section id="projects">
     <h1>Latest Works</h1>
     <ul>
          <li><a href="#"><img src="images/thumb1.jpg" alt="Sunset" width="200" height="130"></a></li>
          <li><a href="#"><img src="images/thumb2.jpg" alt="Canada" width="200" height="130"></a></li>
          <li><a href="#"><img src="images/thumb3.jpg" alt="New York" width="200" height="130"></a></li>
          <li><a href="#"><img src="images/thumb4.jpg" alt="London" width="200" height="130"></a></li>
          <li><a href="#"><img src="images/thumb5.jpg" alt="Japan" width="200" height="130"></a></li>
          <li><a href="#"><img src="images/thumb6.jpg" alt="Niagara Falls" width="200" height="130"></a></li>
     </ul>
</section><!-- /#projects -->

<section id="about">
     <h1>About Me</h1>
     <p>
          Hello, My name is Mana. I'm a photographer who's traveling around the world.
          Follow me on <a href="http://twitter.com/chibimana">Twitter</a> and
          <a href="http://facebook.com/webcreator.fb">Facebook</a>!
          Also check out my <a href="http://webcreatorbox.com">Blog</a>!
          This is a demo website. I'm not good at taking photos. Actually.
     </p>
     <p>
          Hello, My name is Mana. I'm a photographer who's traveling around the world.
          Follow me on <a href="http://twitter.com/chibimana">Twitter</a> and
          <a href="http://facebook.com/webcreator.fb">Facebook</a>!
          Also check out my <a href="http://webcreatorbox.com">Blog</a>!
          This is a demo website. I'm not good at taking photos. Actually.
     </p>
</section><!-- /#about -->

5. Footer

Many websites display their copyright in footer area. small tag used here is for displaying licence info or copyright.

<footer>
     <p>
          <small>
               By <a href="http://webcreatormana.com">Mana</a><br>
               &copy; 2012 <a href="http://webcreatorbox.com">Web Creator Box</a>
          </small>
     </p>
</footer>

Finished!

html

Super simple page without decoration is created! All source code is below.

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Demo Portfolio Website</title>
     <meta name="description" content="I'm a photographer who's traveling around the world.">
     <meta name="keywords" content="photographer portfolio">

<!--[if lt IE 9]>
     <script src="js/html5shiv.js"></script>
<![endif]-->
</head>

<body>
<div id="wrapper">
     <header>
          <a href="#" class="logo">
               <img src="images/logo.jpg" alt="logo" width="181" height="100">
          </a>
          <nav>
               <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Works</a></li>
                    <li><a href="#">Contact</a></li>
               </ul>
          </nav>
     </header>

     <div id="hero">
          <img src="images/hero.jpg" alt="Opera House" width="950" height="390">
          <p>I'm a photographer who's traveling around the world.</p>
     </div><!-- /#hero -->

     <section id="projects">
          <h1>Latest Works</h1>
          <ul>
               <li><a href="#"><img src="images/thumb1.jpg" alt="Sunset" width="200" height="130"></a></li>
               <li><a href="#"><img src="images/thumb2.jpg" alt="Canada" width="200" height="130"></a></li>
               <li><a href="#"><img src="images/thumb3.jpg" alt="New York" width="200" height="130"></a></li>
               <li><a href="#"><img src="images/thumb4.jpg" alt="London" width="200" height="130"></a></li>
               <li><a href="#"><img src="images/thumb5.jpg" alt="Japan" width="200" height="130"></a></li>
               <li><a href="#"><img src="images/thumb6.jpg" alt="Niagara Falls" width="200" height="130"></a></li>
          </ul>
     </section><!-- /#projects -->

     <section id="about">
          <h1>About Me</h1>
          <p>
              Hello, My name is Mana. I'm a photographer who's traveling around the world.
              Follow me on <a href="http://twitter.com/chibimana">Twitter</a> and
              <a href="http://facebook.com/webcreator.fb">Facebook</a>!
              Also check out my <a href="http://webcreatorbox.com">Blog</a>!
              This is a demo website. I'm not good at taking photos. Actually.
          </p>
          <p>
              Hello, My name is Mana. I'm a photographer who's traveling around the world.
              Follow me on <a href="http://twitter.com/chibimana">Twitter</a> and
              <a href="http://facebook.com/webcreator.fb">Facebook</a>!
              Also check out my <a href="http://webcreatorbox.com">Blog</a>!
              This is a demo website. I'm not good at taking photos. Actually.
          </p>
     </section><!-- /#about -->

     <footer>
          <p>
               <small>
                    By <a href="http://webcreatormana.com">Mana</a><br>
                    &copy; 2012 <a href="http://webcreatorbox.com">Web Creator Box</a>
               </small>
          </p>
     </footer>
</div>
</body>
</html>

It will take time to markup at first because you have to remember tags and think about the meanings of each tag. But you’ll get used to it when you create many pages. We’ll decorate this page with CSS next chapter!

» Next chapter: Basic Process to Apply CSS to Your Website

Share

Comments