HTML5 tutorial for beginners with examples

//HTML5 tutorial for beginners with examples

HTML5 tutorial for beginners with examples

Basic content
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>

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

HTML Document – HTML5 tutorial for beginners with examples
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 – HTML5 tutorial for beginners with examples
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 – HTML5 tutorial for beginners with examples
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 – 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 and Link Options – HTML5 tutorial for beginners with examples
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 – 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=”400″ height=”80″/>

Sections

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 <header>.
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>navigation 1</li>
<li>navigation 2</li>
<li>navigation 3</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>

Table – HTML5 tutorial for beginners with examples
Tables are specified by <table>.
Example:
<table>
</table>

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

Table data – HTML5 tutorial for beginners with examples
Table data cells are specified by <td>.
Example:
<table>
<tr>
<td>Data cell 01</td>
<td>Data cell 02</td>
</tr>
</table>

Table heading – HTML5 tutorial for beginners with examples
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 – HTML5 tutorial for beginners with examples
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 – 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>

2018-09-17T15:49:49+00:00