New way:
<!doctype html>
<!doctype html>
Old ways:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Meta charset tag is much simpler:
New way:
<meta charset="UTF-8">
Old way:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-
8" />
Main Structural Elements in HTML5
<header></header>
<nav></nav>
<section></section>
<article></article>
<aside></aside>
<footer></footer>
<header> represents a group of introductory or navigational aids. Things you'd usually wrap in a H1, H2, Hx, etc...
<nav> represents a section of the document intended for navigation. Like a menu.
<section> represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.
<article> represents an independent piece of content of a document, such as
a blog entry or newspaper article. If the piece of content could make sense plucked out of this document and placed somewhere else, it's probably an article.
<aside> represents a piece of content that is only slightly related to the rest of the page. Usually a sidebar, but could be another type of content that isn't directly related to the main content.
<footer> represents a footer for a section and can contain information about the author, copyright information, et cetera.
Here's a simple way to code a very basic document
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Meta charset tag is much simpler:
New way:
<meta charset="UTF-8">
Old way:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-
8" />
Main Structural Elements in HTML5
<header></header>
<nav></nav>
<section></section>
<article></article>
<aside></aside>
<footer></footer>
<header> represents a group of introductory or navigational aids. Things you'd usually wrap in a H1, H2, Hx, etc...
<nav> represents a section of the document intended for navigation. Like a menu.
<section> represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.
<article> represents an independent piece of content of a document, such as
a blog entry or newspaper article. If the piece of content could make sense plucked out of this document and placed somewhere else, it's probably an article.
<aside> represents a piece of content that is only slightly related to the rest of the page. Usually a sidebar, but could be another type of content that isn't directly related to the main content.
<footer> represents a footer for a section and can contain information about the author, copyright information, et cetera.
Here's a simple way to code a very basic document
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Very Basic Document</title>
<style>header, footer, section, aside, nav, article {display: block;}</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<header>
<h1><a href="#">Very Basic Document</a></h1>
<h2>A tag line might go here</h2>
</header>
<section>
<article>
<h3><a href="#">First Article Title</a></h3>
<img src="images/flower.jpg" alt="flower">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. </p>
</article>
<article>
<h3><a href="#">Second Article Title</a></h3>
<img src="images/tree.jpg" alt="tree">
<p>Praesent libero. Sed cursus ante dapibus diam.</p>
</article>
</section>
<aside>
<h4>Connect With Us</h4>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</aside>
<footer>
<p>All rights reserved.</p>
</footer>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Very Basic Document</title>
<style>header, footer, section, aside, nav, article {display: block;}</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<header>
<h1><a href="#">Very Basic Document</a></h1>
<h2>A tag line might go here</h2>
</header>
<section>
<article>
<h3><a href="#">First Article Title</a></h3>
<img src="images/flower.jpg" alt="flower">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. </p>
</article>
<article>
<h3><a href="#">Second Article Title</a></h3>
<img src="images/tree.jpg" alt="tree">
<p>Praesent libero. Sed cursus ante dapibus diam.</p>
</article>
</section>
<aside>
<h4>Connect With Us</h4>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</aside>
<footer>
<p>All rights reserved.</p>
</footer>
</body>
</html>
