HTML5 new features are based on HTML, CSS, DOM, and JavaScript, and reduce the need for external plugins (like Flash).
About HTML5 syntax
HTML5 syntax is compatible with both HTML4 and XHTML.
- You can close the single tag elements (META, BR, HR, INPUT, IMG) with a slash, <tag />, like in XHTML; or you can choose to not add the slash, <tag>.
- You can use both lower case, or upper case for the name of the tags and attributes.
So, all the variants bellow are valid HTML5:
<meta charset='utf-8'>
OR, closed with slash:
<meta charset='utf-8' />
<img src='image.jpg' alt='Some text'> OR: <img src='image.jpg' alt='Some text' /> OR, with upper case: <IMG src='image.jpg' ALT='Some text'>
<br> OR: <BR> OR: <br />
- In HTML5 you can choose to not specify the type attribute for the elements <script>, and <style>, it is optional.
<script> // JavaScript code </script>
<style> /* CSS code */ </style>• All these variants are valid in HTML5.
HTML5 structure
HTML5 doctype is much simpler:<!doctype html>Meta charset tag is much simpler:
<meta charset='utf-8'>
Divs are now used for styling rather than structure; HTML5 includes several new structural items that help define parts of the document.
These are the main structural elements you'll use most often in HTML5:
- <header> - is used to define a header, or navigation aids for some part of a Web page, be it the entire page, an <article> element, or a <section> element.
- Things you'd usually wrap in a H1, H2, Hx, <nav> tag with main links. - <footer> - represents a footer for the page, for a <section>, or for an <article>; and can contain information about the author, copyright information, etc.
- <section> - represents a section of a document or application. It is used to logically group the document structure.
It can contains header, articles, or navigation menu, footer. - <nav> - is a container for navigation links on a Web page. This item should be used for menu with navigation links.
If you have a <footer> that contains navigation links, you do not need to wrap these links in a <nav> element, since the <footer> will suffice on its own. - <article> - is used to define an independent item on the page (or in a <section>) that can be distributed on its own, such as a news article, blog post, or comment.
- <aside> - can be used to define a sidebar or some other content that is considered somewhat separate to the content around it. An example of this might be advertising blocks.
- <hgroup> - used to group a set of H1, H2, H3, ... elements when the heading has multiple levels, such as a title and a subtitle
HTML5 comes with other interesting items such as the <video> and <audio>, plus new and changed elements and attributes, but this tutorial is a quick quide that presents just the basics that will let you quickly move from HTML4 or XHTML to HTML5.
Here's a common structure of a HTML5 document that contains a top header (with a horisontal main menu), a section in the left side (with a vertical menu and an aside, for a banner), another section (that contains a header, two articles and footer), and a footer in the bottom of the page (click on the picture below):
You can also use the id, and class attributes, <div>, <span>, <p>, and other HTML tags to design and organize the content of your HTML document.
In the example below there are the HTML5 and CSS codes to create a web page based on the structure (template) presented in the image above:
The HTML5 document
<!doctype html> <html> <head> <meta charset='utf-8' /> <title>Web Development Courses and Tutorials</title> <meta name='description' content='Example document in HTML5, template, courses and tutorials' /> <meta name='keywords' content='html5, html5 tutorials' /> <link rel='stylesheet' type='text/css' href='style.css' /> </head> <body> <header id='page_header'> <h1>Web Development Courses and Tutorials</h1> <nav> <ul> <li><a href='/' title='Home'>Home</a></li> <li><a href='//marplo.net/' title='Free Courses'>Free Courses</a></li> <li><a href='//marplo.net/forum/'>Forum</a></li> <li><a href='/contact' title='Contact Us'>Contact Us</a></li> </ul> </nav> </header> <section id='posts'> <header id='posts_header'> <h2>HTML5 Tutorials</h2> </header> <article class='post'> <header> <h3>Quick learning Guide</h3> </header> <div class='ctext'> Learn about the new features in HTML5.<br /> New tags, and structure elements. </div> <aside class='post_baner'>Here can be a banner</aside> <p> <em>HTML5</em> new features are based on HTML, CSS, DOM, and JavaScript, and reduce the need for external plugins (like Flash).<br /> A lot of the new features of HTML center around creating a better platform for web-based applications, <a href='https://coursesweb.net/html/html5-quick-tutorial_t' title='HTML5 Quick Tutorial'>Read more</a> ... </p> </article> <article class='post'> <header> <h3>New Form elements and attributes in HTML5</h3> </header> <div class='ctext'> HTML forms are used to pass data to a server, to be processed by a programming language (like PHP, ASP). HTML forms can also be used with script languages, like JavaScript. </div> <p> HTML5 adds a number of new input types for form (datetime, datetime-local, date, month, week, time, number, range, email, url, search, and color), <a href='https://coursesweb.net/html/form-elements-attributes-html5' title='New Form elements'>Read more</a> ... </p> </article> <footer id='post_footer'> <p>See more HTML lessons and tutorials: <a href='https://coursesweb.net/html/' title='HTML Course'>HTML Course</a>.</p> </footer> </section> <section id='sidebar'> <nav> <ul> <li><a href='https://coursesweb.net/html/' title='HTML Course'>HTML Course</a></li> <li><a href='https://coursesweb.net/css/' title='CSS Course'>CSS Course</a></li> <li><a href='https://coursesweb.net/javascript/' title='JavaScript'>JavaScript</a></li> <li><a href='https://coursesweb.net/php-mysql/' title='PHP-MySQL'>PHP-MySQL</a></li> <li><a href='https://coursesweb.net/flash/' title='Flash-ActionScript 3'>Flash-ActionScript 3</a></li> <li><a href='https://marplo.net/jocuri' title='Flash Games'>Flash Games</a></li> </ul> </nav> <aside class='sidebar_baner'>Banner in sidebar</aside> </section> <footer id='page_footer'> <p>From: <a href='https://coursesweb.net/' title='Free Web Development courses'>coursesweb.net</a></p> </footer> </body> </html>
CSS code, in the style.css file
body {
width: 99%;
margin: 2px auto;
font-family: Arial, 'MS Trebuchet', sans-serif;
text-align: center;
}
header, footer, section, aside, nav, article { display: block; }
header#page_header {
width: 100%;
margin: 4px auto;
border: 2px solid blue;
}
header#page_header nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#page_header nav ul li {
display:inline;
margin: 0 20px 0 0;
padding: 1px;
}
section#posts {
float: right;
width: 79%;
background-color: #f1f2fe;
border: 1px solid yellow;
}
section#posts header#posts_header {
background-color: #abcdef;
border: 1px solid green;
}
article.post {
margin:10px;
background-color: yellow;
text-align: left;
}
article.post aside {
float: right;
margin-top: -58px;
width: 250px;
height: 120px;
background-color: #fefefe;
}
article.post p { clear: right;}
section#sidebar {
float: left;
width: 18%;
background-color: #d7d8fe;
border: 1px solid green;
padding:5px;
}
section#sidebar nav ul {
margin: 3px auto;
text-align: left;
padding: 0 0 0 15px;
}
section#sidebar aside {
width: 160px;
height: 250px;
margin: 10px auto;
background-color: #fefefe;
}
footer#page_footer {
clear: both;
width: 100%;
margin: 4px auto;
border: 2px solid blue;
}
These CSS rules are stored in an external file, named 'style.css', and it is included in the HTML document with the following code, added in the HEAD section.
<link rel='stylesheet' type='text/css' href='style.css' />To create web pages with HTML5, you should also know CSS.
- Click Example HTML5 structure, to see how the web page with this example looks.