HTML 5

Semantic concerns the meaning of words. The new semantic tags describe the content of the tags; they include the following:

<article><aside><audio><details><figcaption><figure>,<footer><header><hgroup><mark>,
<nav><section><summary><svg><time>, and <video>.

Search Engines and HTML5

Searches will be improved because of the new semantic elements; this is true of the <nav>tag and perhaps the <video> tag. A search engine could locate the footer and apply a lower weighting because the footer is less likely to include the information the user is looking for.

Internet Explorer 7 and 8 do not understand the semantic tags; therefore, web designers must either ignore HTML5 semantic tags for a few years or use semantic tags with a JavaScript work-around.

<!doctype html>
<html lang=en>
<head>
<title>Simplistic HTML5</title>
<meta charset=utf-8>
<style>
body { width:500px; margin:auto;
}
header, nav, article, footer { display:block;
}
header { width:500px; background-color:#FF9966; text-align:center; margin:auto;
}
nav { float:left; width:25%; background-color: #FF9966; margin-bottom:10px;
}
article { float:right; width:70%; background-color:#FF9966; margin-bottom:10px;
}
footer { clear:both; background-color:#FF9966; text-align:center;
}
h2 { font-size:large; font-weight:bold; margin-top:0; margin-bottom:0;
}
</style>
</head>
<body>
<header>
<h1>header goes here</h1>
</header>
<nav>
<ul>
<li><a href=”page-one.html” >Page One</a></li>
<li><a href=”page-two.html” >Page Two</a></li>
<li><a href=”index.html” >Home page</a></li>
</ul>
</nav>
<article>
<h2>Article</h2>
Are you illiterate? Write today for free course.
</article>
<article>
<h2>Another Article</h2>
Stock up for Christmas. Limited to one per family.
</article>
<footer>
Footer. Perhaps for a copyright statement
</footer>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s