Basic Structure of Semantic HTML5

HTML

Get Started

HTML5, CSS3 and responsive design are the new trends for web technologies. Get started using HTML5 on your projects today and show you some good practices to put what you learned to good use.

Semantic Structure

<!doctype html>
<html>

	<head>
    	<title></title> 
	</head>
    
    <body>
        <header>
        
            <h1></h1>
            
                <nav>
                    <ul>
                        <li><a href="#">link 1</a></li>
                        <li><a href="#">link 2</a></li>
                        <li><a href="#">link 3</a></li>
                    </ul>
                </nav>
                
            </header>
            
        <section>
        
            <article>
                <hgroup>
                    <h1>Post title</h1>
                    <h2>Subtitle and info</h2>
                </hgroup> 
                <p>Content goes here.</p>
            </article>
            
            <article>
            <!-- Another article here --> 
            </article>
            
        </section>
        
        <aside>
            <!-- Sidebar here -->
        </aside>
        
        <footer></footer>
        
    </body>
</html> 

Doctype

HTML5 has new simple doctype declaration and many new tags. Most of them are pretty much self explanatory.

Block Level Elements

<header>, <section> , <article> , <nav> , <aside> , <hgroup> <figure> , <figcaption> and <footer> .

Inline Elements

<time> and <mark> are the inline elements which helps to make our code more semantic.

Media Elements

HTML5 have <audio>, <video> and <embed> tags together with the <source> tag to specify media sources.

All the browsers are not support media elements, according to the browsers it supports the media types like .ogg,.mp3,.mp4,.mov.

Additional Features

Canvas Element the other great new feature in HTML5.Canvas ability to draw shapes dynamically or even manipulate images. Canvas by itself provides vast possibilities in modern web design and development.