HTML5 is not just about making existing markup shorter (although it does a fair amount of that). It also defines new semantic elements.
<section>
The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading. Examples of sections would be chapters, the tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, contact information.
<nav>
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a short list of links to common pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element.
<article>
The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
<aside>
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.
<hgroup>
The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.
<header>
The header element represents a group of introductory or navigational aids. A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.
<footer>
The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. Footers don’t necessarily have to appear at the end of a section, though they usually do. When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.
<time>
The time element represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a timezone offset.
<mark>
The mark element represents a run of text in one document marked or highlighted for reference purposes.
All of these elements can be styled with CSS. In fact HTML5 pushes the separation of content and presentation, so you have to style your page using CSS styles in HTML5. Following html shows what an HTML5 page might look like. It uses the new DOCTYPE, character set, and semantic markup elements—in short, the new sectioning content.
<!DOCTYPE html>
<html>
<html>
<head>
<meta charset=”utf-8″ >
<title>HTML5</title>
<link href=”StyleSheet.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<header>
<h1>codeheaven.org</h1>
<h2>coding techniques and tips</h2>
<h4>ch.org Rocks!</h4>
</header>
<div id=”container“>
<nav>
<h3><mark>Nav</mark></h3>
</nav>
<section>
<article>
<header>
<h1>Article Header</h1>
</header>
<p>Article: Thee article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site.</p>
<p>Header: Thee header element represents a group of introductory or navigational aids. A header element is intended to usually contain the section’s heading.</p>
<footer>
<h2>Article Footer</h2>
</footer>
</article>
<article>
<header>
<h1>Article Header</h1>
</header>
<p>Footer: The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element.</p>
<footer>
<h2>Article Footer</h2>
</footer>
</article>
</section>
<aside>
<h3><mark>Aside</mark></h3>
<p>The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content.</p>
</aside>
<footer>
<h2>Footer</h2>
</footer>
</div>
</body>
</html>
Now, defines the styles of these html5 semantic elements StyleSheet.css is:
body {
background-color:#1777BA;
font-family:Geneva,Arial,Helvetica,sans-serif;
margin: 0px auto;
max-width:900px;
border:solid;
border-color:#FFFFFF;
}header{background-color: #7EB05B;
display:block;
color:#FFFFFF;
text-align:center;
}
header h2 {
margin: 0px;
}
h1 {
font-size: 52px;
margin: 0px;
}
h2 {
font-size: 16px;
margin: 0px;
text-align:center;
color: #E53F38;
}
h3 {
font-size: 18px;
margin: 0px;
text-align:center;
color: #E53F38;
}
h4 {
color: #E53F38;
background-color: #fff;
-webkit-box-shadow: 2px 2px 20px #888;
-webkit-transform: rotate(-45deg);
-moz-box-shadow: 2px 2px 20px #888;
-moz-transform: rotate(-45deg);
position: absolute;
padding: 0px 150px;
top: 50px;
left: -120px;
text-align:center;
}
nav {
display:block;
width:25%;
float:left;
}
nav a:link, nav a:visited {
display: block;
border-bottom: 3px solid #fff;
padding: 10px;
text-decoration: none;
font-weight: bold;
margin: 5px;
}
nav a:hover {
color: white;
background-color: #E53F38;
}
nav h3 {
margin: 15px;
color: white;
}
#container {
background-color: #888;
}
section {
display:block;
width:50%;
float:left;
}
article {
background-color: #eee;
display:block;
margin: 10px;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 20px #888;
-webkit-transform: rotate(-10deg);
-moz-box-shadow: 2px 2px 20px #888;
-moz-transform: rotate(-10deg);
}
article header {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 5px;
}
article footer {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 5px;
}
article h1 {
font-size: 18px;
}
aside {
display:block;
width:25%;
float:left;
}
aside h3 {
margin: 15px;
color: white;
}
aside p {
margin: 15px;
color: white;
font-weight: bold;
font-style: italic;
}
footer {
clear: both;
display: block;
background-color: #413F36;
color:#413F36;
text-align:center;
padding: 15px;
}
footer h2 {
font-size: 14px;
color: white;
}
/* links */
a {
color: #413F36;
}
a:hover {
text-decoration: underline;
}
background-color:#1777BA;
font-family:Geneva,Arial,Helvetica,sans-serif;
margin: 0px auto;
max-width:900px;
border:solid;
border-color:#FFFFFF;
}header{background-color: #7EB05B;
display:block;
color:#FFFFFF;
text-align:center;
}
header h2 {
margin: 0px;
}
h1 {
font-size: 52px;
margin: 0px;
}
h2 {
font-size: 16px;
margin: 0px;
text-align:center;
color: #E53F38;
}
h3 {
font-size: 18px;
margin: 0px;
text-align:center;
color: #E53F38;
}
h4 {
color: #E53F38;
background-color: #fff;
-webkit-box-shadow: 2px 2px 20px #888;
-webkit-transform: rotate(-45deg);
-moz-box-shadow: 2px 2px 20px #888;
-moz-transform: rotate(-45deg);
position: absolute;
padding: 0px 150px;
top: 50px;
left: -120px;
text-align:center;
}
nav {
display:block;
width:25%;
float:left;
}
nav a:link, nav a:visited {
display: block;
border-bottom: 3px solid #fff;
padding: 10px;
text-decoration: none;
font-weight: bold;
margin: 5px;
}
nav a:hover {
color: white;
background-color: #E53F38;
}
nav h3 {
margin: 15px;
color: white;
}
#container {
background-color: #888;
}
section {
display:block;
width:50%;
float:left;
}
article {
background-color: #eee;
display:block;
margin: 10px;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 20px #888;
-webkit-transform: rotate(-10deg);
-moz-box-shadow: 2px 2px 20px #888;
-moz-transform: rotate(-10deg);
}
article header {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 5px;
}
article footer {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 5px;
}
article h1 {
font-size: 18px;
}
aside {
display:block;
width:25%;
float:left;
}
aside h3 {
margin: 15px;
color: white;
}
aside p {
margin: 15px;
color: white;
font-weight: bold;
font-style: italic;
}
footer {
clear: both;
display: block;
background-color: #413F36;
color:#413F36;
text-align:center;
padding: 15px;
}
footer h2 {
font-size: 14px;
color: white;
}
/* links */
a {
color: #413F36;
}
a:hover {
text-decoration: underline;
}
Now you can see the output these html5 new semantic elements.
an html page with new semantic elements
Posts
0 comments:
Post a Comment