Skip to main content

If you don't have an IBM ID and password, register here.

By clicking Submit, you agree to the developerWorks terms of use.

The first time you sign into developerWorks, a profile is created for you. This profile includes the first name, last name, and display name you identified when you registered with developerWorks. Select information in your developerWorks profile is displayed to the public, but you may edit the information at any time. Your first name, last name (unless you choose to hide them), and display name will accompany the content that you post.

All information submitted is secure.

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerworks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

By clicking Submit, you agree to the developerWorks terms of use.

All information submitted is secure.

Select a language:

Practice: Find and resolve semantic errors in HTML5

Grace Walker, IT Consultant, Walker Automated Services
Grace Walker, a partner in Walker Automated Services in Chicago, Illinois, is an IT consultant with a diverse background and broad experience. She has worked in IT as a manager, administrator, programmer, instructor, business analyst, technical analyst, systems analyst, and Web developer in various environments, including telecommunications, education, financial services, and software.

Summary:  HTML5 is the fundamental component required to bring web pages into semantic form. By understanding the new HTML5 tags and their semantic nature, you can prepare yourself and your site for the Semantic Web future. This exercise tests your understanding of a few of the new HTML5 tags.

Date:  07 Oct 2011
Level:  Intermediate
PDF:  A4 and Letter (15KB | 4 pages)Get Adobe® Reader®

Comments:  

HTML5 is designed to facilitate a greater understanding of the information found on the web. Resolving many of the problems found in earlier versions of HTML, version 5 can handle the requirements of today's web applications. HTML5 provides the means to compartmentalize your pages, allowing both humans and computers to better understand and use the information presented.

Frequently used acronyms

  • CSS3: Cascading Style Sheet version 3
  • HTML5: Hypertext Markup Language version 5

To complete the tasks required to correct the code provided you should:

  • Be familiar with HTML in general
  • Understand the semantic fundamentals of HTML5
  • Know which tag is appropriate for a given set of data
  • Have a basic understanding of CSS3

Exercise

In this practice exercise, you convert markup into the proper semantic format. Figure 1 shows the page you will use for this exercise. The page is called A Semantic Endeavor.


Figure 1. A Semantic Endeavor web page
Sample page with 3 links, 3 headings, and 3 paragraphs

The code shown in Listing 1 was written to create this page. However, it is semantically incorrect. Your task is to find and correct the six semantic errors in the code.


Listing 1. Incorrect page
	
<!doctype html>
<html>
<head>
    <title>A Semantic Endeavor -- Before</title>
	
    <style>
    	header h1 {
            font-size: 20px;
             margin: 0px;
            color: #006;
        }

        header h2 {
            font-size: 16px;
            margin: 0px;
            color: #99f;
            font-style: italic;
        }
        p {
            font-size: 15px;
            margin-top: 0px;
            margin-left: 50px;
        }

    </style>
</head>
<body>
    <header>
            <h1>A Semantic Endeavor</h1>
            <h2>HTML5 Fundamentals</h2>

    </header>
    <menu>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">A Page</a></li>
            <li><a href="#">Another Page</a></li>
        </ul>
    </menu>

    <section>
        <header>
            <hgroup>
                <h1>Story Heading</h1>
            </hgroup>
        </header>
        <p> Primum non nocere ad vitam paramus tu quoque. Mutatis mutandis de 
	    	gustibus et coloribus non est disputandum Ad infinitum, ad nauseum. </p>
        <article>

            <header>
                <h1>Part 1 of the story</h1>
            </header>
            <p>Scientia potentia  est qua nocent docent ars longa, Vita brevis 
    		alea lacta est vici. P rimum non nocere quid pro quo. Audaces fortuna 
	    	iuvat fortes  fortuna adiuvat.  </p>
        </article>
        <article>
            <header>
                 <h1>Part 2 of the story</h1>

            </header>
            <p>Ave Caesar morituri te salutant. veni, vidi, vici. Mater semper 
	    	   certa est, pater nunquam ignoramus et ignorabimus 
		          ergo sum e pluribus unum.</p>
        </article>
    </section>
    <footer>
        <small>copyright 2011 Acme United. All rights reserved.</small>
    </footer>
</body>
</html>

Back to top

Exercise solution

Follow these solution steps to check your work.


Resources

About the author

Grace Walker, a partner in Walker Automated Services in Chicago, Illinois, is an IT consultant with a diverse background and broad experience. She has worked in IT as a manager, administrator, programmer, instructor, business analyst, technical analyst, systems analyst, and Web developer in various environments, including telecommunications, education, financial services, and software.

Close [x]

Report abuse help

Report abuse

Thank you. This entry has been flagged for moderator attention.

Close [x]

Report abuse help

Report abuse

Report abuse submission failed. Please try again later.

Close [x]

developerWorks: Sign in

If you don't have an IBM ID and password, register here.


Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 

The first time you sign into developerWorks, a profile is created for you. This profile includes the first name, last name, and display name you identified when you registered with developerWorks. Select information in your developerWorks profile is displayed to the public, but you may edit the information at any time. Your first name, last name (unless you choose to hide them), and display name will accompany the content that you post.

All information submitted is secure.

Close [x]

Choose your display name

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 

All information submitted is secure.

Rate this article

Comments

Back to top

Close [x]

Help: Update or add to My dW interests

What's this?

This little timesaver lets you update your My developerWorks profile with just one click! The general subject of this content (AIX and UNIX, Information Management, Lotus, Rational, Tivoli, WebSphere, Java, Linux, Open source, SOA and Web services, Web development, or XML) will be added to the interests section of your profile, if it's not there already. You only need to be logged in to My developerWorks.

And what's the point of adding your interests to your profile? That's how you find other users with the same interests as yours, and see what they're reading and contributing to the community. Your interests also help us recommend relevant developerWorks content to you.

View your My developerWorks profile

Return from help

Close [x]

Help: Remove from My dW interests

What's this?

Removing this interest does not alter your profile, but rather removes this piece of content from a list of all content for which you've indicated interest. In a future enhancement to My developerWorks, you'll be able to see a record of that content.

View your My developerWorks profile

Return from help

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Web development
ArticleID=762623
ArticleTitle=Practice: Find and resolve semantic errors in HTML5
publish-date=10072011

Table of contents

Tags

Help
Use the search field to find all types of content in My developerWorks with that tag.

Use the slider bar to see more or fewer tags.

For articles in technology zones (such as Java technology, Linux, Open source, XML), Popular tags shows the top tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), Popular tags shows the top tags for just that product zone.

For articles in technology zones (such as Java technology, Linux, Open source, XML), My tags shows your tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), My tags shows your tags for just that product zone.

Use the search field to find all types of content in My developerWorks with that tag. Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere). My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).

 

Share this page:

Follow developerWorks: