Practice: Find and resolve semantic errors in HTML5

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.

Share:

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.



07 October 2011

Also available in Chinese

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>

Exercise solution

Follow these solution steps to check your work.

Resources

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
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. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

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.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

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

 


All information submitted is secure.

Dig deeper into Web development on developerWorks


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