 |
| HTML5 Tutorial with Examples |
Basic HTML document example
This is a Basic HTML Document Example
<!doctype html>
<html lang="en">
<head>
<meta name="description" content="HTML5 Tutorial for beginners with Examples">
<meta name="keywords" content="HTML5, tutorial, beginners, examples,">
<meta charset="UTF-8">
</head>
<body>
<h1>Heading</h1>
<p>
Document contents
</p>
</body>
</html>
Heading - HTML5 tutorial for beginners with examples
In an HTML document Headings are defined with the <h1>, <h2>, <h3>, <h4>, <h5>, <h6> tags, from <h1> for the most important to <h6> for the least important. A browser automatically adds some empty space before and after the Headings. Headings are supported in all major browsers.
Example
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>
Paragraph - HTML5 tutorial for beginners with examples
In an HTML document paragraphs are defined with the <p> tag, starts with the <p> opening tag and end with </p> tag. Browsers automatically add an extra blank line before and after a paragraph. The <p> tag is supported in all major browsers.
Example
<p>
Paragraph Example - HTML5 tutorial for beginners with examples
</p>
Horizontal line - HTML5 tutorial for beginners with examples
In an HTML document the <hr /> tag creates a horizontal line. The hr tag has no end tag, it is an empty tag. The hr tag is supported in all major browsers.
Example
<hr/>
List - HTML5 tutorial for beginners with examples
Definition List
In an HTML document, a Definition list starts with the <dl> tag and end with </dl>, <dt> tag is used for item of the list and <dd> tag is used for describes the item in the list.
Example
<dl>
<dt>Definition List</dt>
<dd>Definition List - definition</dd>
<dt>Unordered List</dt>
<dd>Unordered List - definition</dd>
<dt>Ordered List</dt>
<dd>Ordered List - definition</dd>
</dl>
Unordered List
An unordered list starts with the <ul> tag and end with </ul> and list item starts with the <li> tag end with the </li> tag in an HTML document.
Example
<ul>
<li>Definition List</li>
<li>Unordered List</li>
<li>Ordered List</li>
</ul>
Ordered List
An ordered list starts with the <ol> tag and end with </ol> and list item starts with the <li> tag end with the </li> tag in an HTML document.
Example
<ol>
<li>Definition List</li>
<li>Unordered List</li>
<li>Ordered List</li>
</ol>
doctype - HTML5 tutorial for beginners with examples
The DOCTYPE declaration give information to the web browser about what version of HTML is used, DOCTYPE declaration is supported in all major browsers. The <!DOCTYPE html> is case-insensitive in the HTML syntax and is placed in very first thing in HTML document before the html element. HTML 5 is not based on SGML therefore does not require a reference to a DTD and is case-insensitive in the HTML syntax
Example
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Heading</h1>
<p>
Document contents
</p>
</body>
</html>
Head element - HTML5 tutorial for beginners with examples
The head element starts with the <head> opening tag and end with </head> tag, head element is usually placed the first in the html element (that which starts with the <html> opening tag and ends with the </html> tag) but before the body element (that which starting with <body> and ending with </body>). The head element contains descriptive information about the document, such as <title>, <link>, <meta>, <style>, <script> etc. These elements are not displayed directly by the browsers but they function behind the scenes.
Example
<head>
<meta name="description" content="HTML5 Tutorial for beginners with Examples">
<meta name="keywords" content="HTML5, tutorial, beginners, examples,">
<meta charset="UTF-8">
</head>
Body element - HTML5 tutorial for beginners with examples
The body element starts with <body> and ending with </body>, body element represents the main content of the document.
Example
<body>
<h1>
Heading
</h1>
<p>
Document contents
</p>
</body>
Hyper Link - HTML5 tutorial for beginners with examples
An anchor tag "a" is used to define a link and the destination of the link is defined in the "href" attribute of the tag.
[syntax]
<a href="URL">Link label</a>
Linking to be in a same folder/directory:
[Syntax]
<a href="file.html">Link label</a>
Linking to be in a parent folder/directory:
[Syntax]
<a href="../file.html">Link label</a>
Linking to be in a subdirectory:
[Syntax]
<a href="directory/file.html">Link label</a>
Linking to a page on another Web site.
[Syntax]
<a href="URL">Link label</a>
Specified by the target attribute.
_blank:
Open the new window.
_self:
Open the current one.
_parent:
Open the parent browsing context of the current one.
_top:
Open the most top-level browsing context of the current one.
Example
<a href="http://www.willvick.com/" target="_blank">willvick.com - _blank</a>
<a href=" http://www.willvick.com/" target="_ self">willvick.com - _self</a>
<a href=" http://www.willvick.com/" target="_ parent">willvick.com - _parent</a>
<a href=" http://www.willvick.com/" target="_ top">willvick.com - _top</a>
Specified by the id attribute.
Example
<h3 id="exampleAttribute">Specified by the id attribute</h3>
<br/>
<a href="#exampleAttribute">Go to Heading</a>
Image - HTML5 tutorial for beginners with examples
Images are defined with the <img> tag in an HTML document. src attribute is use for location, alt attribute is use for short description, height attribute is use for specify the height, width attribute is use for specify the width of the image respectively.
Example
<img src="http://www.willvick.com/Image/Logo-willvick-com.png" alt="Logo" width="240px" height="50px"/>
Header - HTML5 tutorial for beginners with examples
The header element usually contain header of the Web pages or the sections. The header element is specified by
Example
<header>
<img src="logo.png" alt="Logo">
<h1>Head</h1>
</header>
Footer - HTML5 tutorial for beginners with examples
A footer element normally contains information about its section (like copyright, links etc.). The footer element is specified by <footer>.
Example
<footer>
<p>Copyright © 2014</p>
</footer>
Navigations - HTML5 tutorial for beginners with examples
Navigations are specified by <nav>.
Example
<nav>
<ul>
<li><a href="#">navigation 1</a></li>
<li><a href="#">navigation 2</a></li>
<li><a href="#">navigation 3</a></li>
</ul>
</nav>
Article - HTML5 tutorial for beginners with examples
The article element represents an independent item section of content. Article element is specified by <article>.
Example
<article>
<h1> HTML5 tutorial for beginners with examples </h1>
<p>
“HTML5 Tutorial for beginners with Examples” tutorial gives very good understanding on HTML5. In this tutorial contains many HTML5 examples in each chapter, helps you to understand better.
</p>
</article>
Aside - HTML5 tutorial for beginners with examples
The aside element represents a section of a page or a form that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content of the page or the form. Aside is specified by <aside>.
Example
<aside>
<h2>related pages</h2>
<ol>
<li><a href="page1.html"> page1</a></li>
<li><a href="page2.html"> page2</a></li>
<li><a href="page3.html"> page3</a></li>
</ol>
</aside>
Metadata - HTML5 tutorial for beginners with examples
META element is placed inside the HEAD element (that which starts with the <head> opening tag and ends with the </head> tag). Meta elements are typically used to specify page description, keywords, author of the document and other metadata. The <meta> tag provides information about your HTML document. Metadata will not be displayed on the page, but it is used by browsers, search engines, or other web services. Usually Metadata gives information to browsers like how to display content of the HTML document, name and other information about the author, last modified information of the page, when the page will reload and etc.
Example
<head>
<meta name="description" content="META element is placed inside the HEAD element">
<meta name="keywords" content="HTML, Meta">
</head>