HTML5 tutorial for beginners with examples

HTML5 tutorial for beginners with examples 2017-06-16T21:31:26+00:00

HTML5 tutorial for beginners with examples

HTML5 tutorial for beginners with examples

HTML5 tutorial for beginners with examples

Basic content

Heading
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>

Paragraph
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
</p>

Horizontal line
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
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>

HTML Document
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>

Description
doctype
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>
or
<!doctype html>

html element
The html element starts with the <html> opening tag and ends with the </html> tag, html element represents the root of an HTML document.

head element
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
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 and Link Options
Hyper Link
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>
Example:
<a href=”HTML5-Elements.aspx”>HTML5 Elements</a>

Linking to be in a parent folder/directory:
[Syntax]
<a href=”../file.html”>Link label</a>
Example:
<a href=”../HTML5-Elements.aspx”>HTML5 Elements</a>

Linking to be in a subdirectory:
[Syntax]
<a href=”directory/file.html”>Link label</a>
Example:
<a href=”HTML5-Elements/HTML5-Elements.aspx”>HTML5 Elements</a>

Linking to a page on another Web site.
[Syntax]
<a href=”URL”>Link label</a>
Example:
<a href=” http://www.html5-tutorial.co/”>HTML5 Tutorial</a>

Specified by the target attribute.
_blank:
Open the new window.
Example:
<a href=”http://www.html5-tutorial.co/” target=”_blank”>HTML5 Tutorial</a>

_self:
Open the current one.
Example:
<a href=” http://www.html5-tutorial.co/” target=”_ self”>HTML5 Tutorial</a>

_parent:
Open the parent browsing context of the current one.
Example:
<a href=” http://www.html5-tutorial.co/” target=”_ parent”>HTML5 Tutorial</a>

_top:
Open the most top-level browsing context of the current one.
Example:
<a href=” http://www.html5-tutorial.co/” target=”_ top”>HTML5 Tutorial</a>

Specified by the id attribute.
Example:
<h1 id=”heading”>Heading</h1>
<a href=”#heading”>Go Heading</a>

Image
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=”400″ height=”80″/>

Sections
Header
The header element usually contain header of the Web pages or the sections. The header element is specified by <header>.
Example:
<header>
<img src=”logo.png” alt=”Logo”>
<h1>Head</h1>
</header>

Footer
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
Navigations are specified by <nav>.
Example:
<nav>
<ul>
<li>navigation 1</li>
<li>navigation 2</li>
<li>navigation 3</li>
</ul>
</nav>

Article
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
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>

Table
Tables are specified by <table>.
Example:
<table>
</table>

Table row
Table rows are specified by <tr>.
Example:
<table>
<tr>
</tr>
</table>

Table data
Table data cells are specified by <td>.
Example:
<table>
<tr>
<td>Data cell 01</td>
<td>Data cell 02</td>
</tr>
</table>

Table heading
Table heading cells are specified by <th>.
Example:
<table>
<tr>
<th>Table heading 01</th>
<th>Table heading 02</th>
</tr>
<tr>
<td>Data cell 01</td>
<td>Data cell 02</td>
</tr>
</table>

Captions
Captions are specified by <caption>. <caption> must be as the first element child of a table element.
Example:
<table>
<caption>Captions</caption>
<tr>
<th>Table heading 01</th>
<th>Table heading 02</th>
</tr>
<tr>
<td>Data cell 01</td>
<td>Data cell 02</td>
</tr>
</table>

Metadata
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>