Introduction to

HTML 5
Outline
HTML Training
● Introduction ● Lists
● Getting Started ● Forms
● Elements ● Iframes
● Attributes ● Meta
● Headings ● Head
● Paragraphs ● HTML5 Other Elements (audio &
● Links video)
● Text Formatting
● Styles
● Images
● Tables
● DIV
● HTML 5 layout elements
●
HTML Tutorial
HTML stands for HyperText Markup Language. HTML is the basic building block of World Wide Web.

Hypertext is text displayed on a computer or other electronic device with references to other text that the
user can immediately access, usually by a mouse click or key press.

Apart from text, hypertext may contain tables, lists, forms, images, and other presentational elements. It is
an easy-to-use and flexible format to share information over the Internet.

Markup languages use sets of markup tags to characterize text elements within a document, which gives
instructions to the web browsers on how the document should appear.

HTML was originally developed by Tim Berners-Lee in 1990. He is also known as the father of the web. In
1996, the World Wide Web Consortium (W3C) became the authority to maintain the HTML specifications.
HTML also became an international standard (ISO) in 2000. HTML5 is the latest version of HTML. HTML5
provides a faster and more robust approach to web development.
What You Can Do with HTML

There are lot more things you can do with HTML.

● You can publish documents online with text, images, lists, tables, etc.
● You can access web resources such as images, videos or other HTML document via hyperlinks.
● You can create forms to collect user inputs like name, e-mail address, comments, etc.
● You can include images, videos, sound clips, flash movies, applications and other HTML documents
directly inside an HTML document.
● You can create offline version of your website that work without internet.
● You can store data in the user's web browser and access later on.
● You can find the current location of your website's visitor.
HTML Getting Started

Getting Started with HTML

In this slides you will learn how easy it is to create an HTML document or a web page. To begin coding
HTML you need only two things: a simple-text editor and a web browser.
HTML Element Syntax

● An HTML element is an individual component of an HTML document. It represents semantics, or

meaning. For example, the title element represents the title of the document.

Most HTML elements are written with a start tag (or opening tag) and an end tag (or closing tag),
with content in between. Elements can also contain attributes that define its additional properties.
For example, a paragraph, which is represented by the p element, would be written as:
HTML Tags Vs Elements

Technically, an HTML element is the collection of start tag, its attributes, an end tag and everything
in between. On the other hand an HTML tag (either opening or closing) is used to mark the start or
end of an element, as you can see in the above illustration.

However, in common usage the terms HTML element and HTML tag are interchangeable i.e. a tag
is an element is a tag. For simplicity's sake of this website, the terms "tag" and "element" are used
to mean the same thing — as it will define something on your web page.
Case Insensitivity in HTML Tags and Attributes

In HTML, tag and attribute names are not case-sensitive (but most attribute values are
case-sensitive). It means the tag <P>, and the tag <p> defines the same thing in HTML which is a
paragraph.

But in XHTML they are case-sensitive and the tag <P> is different from the tag <p>.

<p>This is a paragraph.</p>
<P>This is also a valid paragraph.</P>
Empty HTML Elements

Empty elements (also called self-closing or void elements) are not container tags — that means,
you can not write <hr>some content</hr> or <br>some content</br>.

A typical example of an empty element, is the <br> element, which represents a line break. Some
other common empty elements are <img>, <input>, <link>, <meta>, <hr>, etc.

<p>This paragraph contains <br> a line break.</p>

<img src="images/sky.jpg" alt="Cloudy Sky">
<input type="text" name="username">
Nesting HTML Elements

Most HTML elements can contain any number of further elements (except empty elements), which
are, in turn, made up of tags, attributes, and content or other elements.

The following example shows some elements nested inside the <p> element.

<p>Here is some <b>bold</b> text.</p>

<p>Here is some <em>emphasized</em> text.</p>
<p>Here is some <mark>highlighted</mark> text.</p>

HTML tags should be nested in correct order. They must be closed in the inverse order of
how they are defined, that means the last tag opened must be closed first.

<p><strong>These tags are nested properly.</strong></p>

<p><strong>These tags are not nested properly.</p></strong>
Writing Comments in HTML

Comments are usually added with the purpose of making the source code easier to understand. It
may help other developer (or you in the future when you edit the source code) to understand what
you were trying to do with the HTML. Comments are not displayed in the browser.

An HTML comment begins with <!--, and ends with -->, as shown in the example below:

<!-- This is an HTML comment -->

<!-- This is a multi-line HTML comment
that spans across more than one line -->
<p>This is a normal piece of text.</p>
Writing Comments in HTML

Comments are usually added with the purpose of making the source code easier to understand. It
may help other developer (or you in the future when you edit the source code) to understand what
you were trying to do with the HTML. Comments are not displayed in the browser.

An HTML comment begins with <!--, and ends with -->, as shown in the example below:

<!-- This is an HTML comment -->

<!-- This is a multi-line HTML comment
that spans across more than one line -->
<p>This is a normal piece of text.</p>

You can also comment out part of your HTML code for debugging purpose, as shown here:
<!-- Hiding this image for testing
<img src="images/smiley.png" alt="Smiley">
-->
HTML Elements Types

Elements can be placed in two distinct groups: block level and inline level elements. The former make up
the document's structure, while the latter dress up the contents of a block.Also, a block element occupies
100% of the available width and it is rendered with a line break before and after. Whereas, an inline
element will take up only as much space as it needs.

The most commonly used block-level elements are <div>, <p>, <h1> through <h6>, <form>, <ol>, <ul>,
<li>, and so on. Whereas, the commonly used inline-level elements are <img>, <a>, <span>, <strong>,
<b>, <em>, <i>, <code>, <input>, <button>, etc.
HTML Attributes

Attributes define additional characteristics or properties of the element such as width and height of an
image. Attributes are always specified in the start tag (or opening tag) and usually consist of name/value
pairs like name="value". Attribute values should always be enclosed in quotation marks.

Also, some attributes are required for certain elements. For instance, an <img> tag must contain a src and
alt attributes. Let's take a look at some examples of the attributes usages:

<img src="images/smiley.png" width="30" height="30" alt="Smiley">

<a href="https://www.google.com/" title="Search Engine">Google</a>
<abbr title="Hyper Text Markup Language">HTML</abbr>
<input type="text" value="John Doe">

In the above example src inside the <img> tag is an attribute and image path provided is its value.
Similarly href inside the <a> tag is an attribute and the link provided is its value, and so on.
There are several attributes in HTML5 that do not consist of name/value pairs but consist of just a name.
Such attributes are called Boolean attributes. Examples of some commonly used Boolean attributes are
checked, disabled, readonly, required, etc.

<input type="email" required>

<input type="submit" value="Submit" disabled>
<input type="checkbox" checked>
<input type="text" value="Read only text" readonly>

You will learn about all these elements in detail in upcoming chapters.
General Purpose Attributes

There are some attributes, such as id, title, class, style, etc. that you can use on the majority of HTML
elements. The following section describes their usage.

The id Attribute
The id attribute is used to give a unique name or identifier to an
element within a document. This makes it easier to select the element
using CSS or JavaScript.
<input type="text" id="firstName">
<div id="container">Some content</div>
<p id="infoText">This is a paragraph.</p>
General Purpose Attributes

The class Attribute

Like id attribute, the class attribute is also used to identify elements. But unlike id, the class
attribute does not have to be unique in the document. This means you can apply the same class
to multiple elements in a document, as shown in the following example:
<input type="text" class="highlight">
<div class="box highlight">Some content</div>
<p class="highlight">This is a paragraph.</p>

The title Attribute

The title attribute to is used to provide advisory text about an element or its content. Try out the
following example to understand how this actually works.

<abbr title="World Wide Web Consortium">W3C</abbr>

<a href="images/kites.jpg" title="Click to view a larger image">
<img src="images/kites-thumb.jpg" alt="kites">
</a>
General Purpose Attributes

The style Attribute

The style attribute allows you to specify CSS styling rules such as color, font, border, etc.
directly within the element. Let's check out an example to see how it works:

<p style="color: blue;">This is a paragraph.</p>

<img src="images/sky.jpg" style="width: 300px;" alt="Cloudy Sky">
<div style="border: 1px solid red;">Some content</div>
HTML Headings

Organizing Content with Headings

Headings help in defining the hierarchy and the structure of the web page content.
HTML offers six levels of heading tags, <h1> through <h6>; the lower the heading level number, the
greater its importance — therefore <h1> tag defines the most important heading, whereas the <h6> tag
defines the least important heading in the document.
By default, browsers display headings in larger and bolder font than normal text. Also, <h1> headings are
displayed in largest font, whereas <h6> headings are displayed in smallest font.

<h1>Heading level 1</h1>

<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
HTML Paragraphs

Paragraph element is used to publish text on the web pages.

Paragraphs are defined with the <p> tag. Paragraph tag is a very basic and typically the first tag you will
need to publish your text on the web pages. Here's an example:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Closing a Paragraph Element

In HTML 4 and earlier versions, it was enough to initiate a new paragraph using the opening tag. Most
browsers will display HTML correctly even if you forget the end tag. For example:

<p>This is a paragraph.
<p>This is another paragraph.
The HTML code in the example above will work in most of the web browsers, but don't rely on it.
Forgetting the end tag can produce unexpected results or errors.
HTML Paragraphs
Creating Line Breaks

The <br> tag is used to insert a line break on the web page.

Since the <br> is an empty element, so there is no need of corresponding </br> tag.

<p>This is a paragraph <br> with line break.</p>

<p>This is <br>another paragraph <br> with line breaks.</p>

Creating Horizontal Rules

You can use the <hr> tag to create horizontal rules or lines to visually separate content sections
on a web page. Like <br>, the <hr> tag is also an empty element. Here's an example:

<p>This is a paragraph.</p>
<hr>
<p>This is another paragraph.</p>
HTML Paragraphs
Managing White Spaces

Normally the browser will display the multiple spaces created inside the HTML code by pressing
the space-bar key or tab key on the keyboard as a single space. Multiple line breaks created
inside the HTML code through pressing the enter key is also displayed as a single space.

The following paragraphs will be displayed in a single line without any extra space:
<p>This paragraph contains multiple spaces in the source code.</p>
<p>
This paragraph
contains multiple tabs and line breaks
in the source code.
</p>

Insert &nbsp; for creating extra consecutive spaces, while insert <br> tag for creating line
breaks on your web pages, as demonstrated in the following example:
<p>This paragraph has multiple&nbsp;&nbsp;&nbsp;spaces.</p>
<p>This paragraph has multiple<br><br>line<br><br><br>breaks.</p>
Defining Preformatted Text
Sometimes, using &nbsp;, <br>, etc. for managing spaces isn't very convenient. Alternatively,
you can use the <pre> tag to display spaces, tabs, line breaks, etc. exactly as written in the
HTML file. It is very helpful in presenting text where spaces and line breaks are important like
poem or code.

The following example will display the text in the browser as it is in the source code:

<pre>
Twinkle, twinkle, little star,
How I wonder what you are!
Up above the world so high,
Like a diamond in the sky.
</pre>
HTML Links
A link or hyperlink is a connection from one web resource to another. Links allow users to move
seamlessly from one page to another, on any server anywhere in the world.

A link has two ends, called anchors. The link starts at the source anchor and points to the
destination anchor, which may be any web resource, for example, an image, an audio or video
clip, a PDF file, an HTML document or an element within the document itself, and so on.

By default, links will appear as follows in most of the browsers:

● An unvisited link is underlined and blue.
● A visited link is underlined and purple.
● An active link is underlined and red.
Links are specified in HTML using the <a> tag.

A link or hyperlink could be a word, group of words, or image.

<a href="https://www.google.com/">Google Search</a>
<a href="https://www.tutorialrepublic.com/">Tutorial
<a href="url">Link text</a> Republic</a>
<a href="images/kites.jpg">
<img src="kites-thumb.jpg" alt="kites">
</a>
Setting the Targets for Links
The target attribute tells the browser where to open the linked document. There are four defined
targets, and each target name starts with an underscore(_) character:

● _blank — Opens the linked document in a new window or tab.

● _parent — Opens the linked document in the parent window.
● _self — Opens the linked document in the same window or tab as the source document.
This is the default, hence it is not necessary to explicitly specify this value.
● _top — Opens the linked document in the full browser window.

Try out the following example to understand how the link's target basically works:

<a href="/about-us.php" target="_top">About Us</a>

<a href="https://www.google.com/" target="_blank">Google</a>
<a href="images/sky.jpg" target="_parent">
<img src="sky-thumb.jpg" alt="Cloudy Sky">
</a>
Creating Download Links
You can also create the file download link in exactly the same fashion as placing text links. Just
point the destination URL to the file you want to be available for download.

In the following example we've created the download links for ZIP, PDF and JPG files.

<a href="downloads/test.zip">Download Zip file</a>

<a href="downloads/masters.pdf">Download PDF file</a>
<a href="downloads/sample.jpg">Download Image file</a>
HTML Text Formatting
HTML provides several tags that you can use to make some text on your web pages to appear
differently than normal text, for example, you can use the tag <b> to make the text bold, tag <i>
to make the text italic, tag <mark> to highlight the text, tag <code> to display a fragment of
computer code, tags <ins> and <del> for marking editorial insertions and deletions, and more.

The following example demonstrates the most commonly used formatting tags in action. Now,
let's try this out to understand how these tags basically work:
<p>This is <b>bold text</b>.</p>
<p>This is <strong>strongly important text</strong>.</p>
<p>This is <i>italic text</i>.</p>
<p>This is <em>emphasized text</em>.</p>
<p>This is <mark>highlighted text</mark>.</p>
<p>This is <code>computer code</code>.</p>
<p>This is <small>smaller text</small>.</p>
<p>This is _subscript and ^superscript text.</p>
<p>This is <del>deleted text</del>.</p>
<p>This is <ins>inserted text</ins>.</p>
HTML Text Formatting
By default, the <strong> tag is typically rendered in the browser as <b>, whereas the <em> tag
is rendered as <i>. However, there is a difference in the meaning of these tags.

Difference between <strong> and <b> tag

Both <strong> and <b> tags render the enclosed text in a bold typeface by default, but the
<strong> tag indicates that its contents have strong importance, whereas the <b> tag is simply
used to draw the reader's attention without conveying any special importance.
<p><strong>WARNING!</strong> Please proceed with caution.</p>
<p>The concert will be held at <b>Hyde Park</b> in London.</p>
Difference between <em> and <i> tag
Similarly, both <em> and <i> tags render the enclosed text in italic type by default, but the <em> tag
indicates that its contents have stressed emphasis compared to surrounding text, whereas the <i> tag
is used for marking up text that is set off from the normal text for readability reasons, such as a
technical term, an idiomatic phrase from another language, a thought, etc.
<p>Cats are <em>cute</em> animals.</p>
<p>The <i>Royal Cruise</i> sailed last night.</p>
Formatting Quotations
You can easily format the quotation blocks from other sources with the HTML <blockquote> tag.

Blockquotes are generally displayed with indented left and right margins, along with a little extra
space added above and below. Let's try an example to see how it works:

<blockquote>
<p>Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop
questioning.</p>
<cite>— Albert Einstein</cite>
</blockquote>

For short inline quotations, you can use the HTML <q> tag. Most browsers display inline
quotes by surrounding the text in quotation marks. Here's an example:

<p>According to the World Health Organization (WHO): <q>Health is a state of

complete physical, mental, and social well-being.</q></p>
HTML Styles
HTML is quite limited when it comes to the presentation of a web page. It was originally
designed as a simple way of presenting information. CSS (Cascading Style Sheets) was
introduced in December 1996 by the World Wide Web Consortium (W3C) to provide a better
way to style HTML elements.

With CSS, it becomes very easy to specify the things like, size and typeface for the fonts, colors
for the text and backgrounds, alignment of the text and images, amount of space between the
elements, border and outlines for the elements, and lots of other styling properties.

Adding Styles to HTML Elements

Style information can either be attached as a separate document or embedded in the HTML document
itself. These are the three methods of implementing styling information to an HTML document.

● Inline styles — Using the style attribute in the HTML start tag.
● Embedded style — Using the <style> element in the head section of the document.
● External style sheet — Using the <link> element, pointing to an external CSS files.
Inline Styles
Inline styles are used to apply the unique style rules to an element, by putting the CSS rules
directly into the start tag. It can be attached to an element using the style attribute.

The style attribute includes a series of CSS property and value pairs. Each property: value pair
is separated by a semicolon (;), just as you would write into an embedded or external style
sheet. But it needs to be all in one line i.e. no line break after the semicolon.

The following example demonstrates how to set the color and font-size of the text:
<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:18px;">This is a paragraph.</p>
<div style="color:green; font-size:18px;">This is some text.</div>

Using the inline styles are generally considered as a bad practice. Because style rules are
embedded directly inside the html tag, it causes the presentation to become mixed with the
content of the document, which makes updating or maintaining a website very difficult.
Embedded Style Sheets
Embedded or internal style sheets only affect the document they are embedded in.

Embedded style sheets are defined in the <head> section of an HTML document using the
<style> tag. You can define any number of <style> elements inside the <head> section.

The following example demonstrates how style rules are embedded inside a web page.

<head>
<style>
body { background-color:
YellowGreen; }
h1 { color: blue; }
p { color: red; }
</style>
</head>
External Style Sheets
An external style sheet is ideal when the style is applied to many pages.

An external style sheet holds all the style rules in a separate document that you can link from
any HTML document on your site. External style sheets are the most flexible because with an
external style sheet, you can change the look of an entire website by updating just one file.

You can attach external style sheets in two ways — linking and importing:

Linking External Style Sheets

An external style sheet can be linked to an HTML document using the <link> tag.

The <link> tag goes inside the <head> section, as shown here:

<head>
<link rel="stylesheet" href="css/style.css">
</head>
Importing External Style Sheets
The @import rule is another way of loading an external style sheet. The @import statement
instructs the browser to load an external style sheet and use its styles.

You can use it in two ways. The simplest way is to use it within the <style> element in your
<head> section. Note that, other CSS rules may still be included in the <style> element.

<style>
@import url("css/style.css");
p{
color: blue;
font-size: 16px;
}
</style>

Similarly, you can use the @import rule to import a style sheet within another style sheet.
@import url("css/layout.css");
@import url("css/color.css");
body {
color: blue;
font-size: 14px;
}
HTML Images
Images enhance visual appearance of the web pages by making them more interesting and
colorful.

The <img> tag is used to insert images in the HTML documents. It is an empty element and
contains attributes only. The syntax of the <img> tag can be given with:

<img src="url" alt="some_text">

The following example inserts three images on the web page:

<img src="kites.jpg" alt="Flying Kites">
<img src="sky.jpg" alt="Cloudy Sky">
<img src="balloons.jpg" alt="Balloons">

Each image must carry at least two attributes: the src attribute, and an alt attribute.
The src attribute tells the browser where to find the image. Its value is the URL of the image file.
Whereas, the alt attribute provides an alternative text for the image, if it is unavailable or cannot be
displayed for some reason. Its value should be a meaningful substitute for the image.
Setting the Width and Height of an Image
The width and height attributes are used to specify the width and height of an image.

The values of these attributes are interpreted in pixels by default.

<img src="kites.jpg" alt="Flying Kites" width="300" height="300">

<img src="sky.jpg" alt="Cloudy Sky" width="250" height="150">
<img src="balloons.jpg" alt="Balloons" width="200" height="200">

You can also use the style attribute to specify width and height for the images. It prevents style sheets
from changing the image size accidently, since inline style has the highest priority.

<img src="kites.jpg" alt="Flying Kites" style="width: 300px; height: 300px;">

<img src="sky.jpg" alt="Cloudy Sky" style="width: 250px; height: 150px;">
<img src="balloons.jpg" alt="Balloons" style="width: 200px; height: 200px;">
scenarios
HTML images are used to display visual content on a webpage. Here are some scenarios
demonstrating how images can be used:

Displaying a Logo:

<img src="logo.png" alt="Company Logo">

In this scenario, a company's logo image file named logo.png is displayed on the webpage. The alt
attribute provides alternative text for screen readers and in case the image fails to load.

Adding a Product Image:

<img src="product1.jpg" alt="Product 1">

Adding a Product Image:

<div class="gallery">
<img src="photo1.jpg" alt="Photo 1">
<img src="photo2.jpg" alt="Photo 2">
<img src="photo3.jpg" alt="Photo 3">
</div>
scenarios
Responsive Images:
<img src="large.jpg" alt="Large Image" srcset="large.jpg 1200w, medium.jpg 800w, small.jpg 400w">

This code snippet uses the srcset attribute to provide multiple image sources at different resolutions.
The browser can then choose the most appropriate one based on the device's capabilities.

Embedding a Chart:
<img src="chart.png" alt="Sales Chart">
 Using the HTML5 Picture Element
Sometimes, scaling an image up or down to fit different devices (or screen sizes) doesn't work as
expected. Also, reducing the image dimension using the width and height attribute or property doesn't
reduce the original file size. To address these problems HTML5 has introduced the <picture> tag that
allows you to define multiple versions of an image to target different types of devices.

The <picture> element contains zero or more <source> elements, each referring to different image
source, and one <img> element at the end. Also each <source> element has the media attribute
which specifies a media condition (similar to the media query) that is used by the browser to
determine when a particular source should be used. Let's try out an example:
<picture>
<source media="(min-width: 1000px)" srcset="logo-large.png">
<source media="(max-width: 500px)" srcset="logo-small.png">
<img src="logo-default.png" alt="My logo">
</picture>
 Creating Tables in HTML
HTML table allows you to arrange data into rows and columns. They are commonly used to display
tabular data like product listings, customer's details, financial reports, and so on.

You can create a table using the <table> element. Inside the <table> element, you can use the <tr>
elements to create rows, and to create columns inside a row you can use the <td> elements. You can
also define a cell as a header for a group of table cells using the <th> element.

The following example demonstrates the most basic structure of a table.

<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Peter Parker</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>Clark Kent</td>
<td>34</td>
</tr>
</table>
 Creating Tables in HTML
Tables do not have any borders by default. You can use the CSS border property to add borders to
the tables. Also, table cells are sized just large enough to fit the contents by default. To add more
space around the content in the table cells you can use the CSS padding property.

The following style rules add a 1-pixel border to the table and 10-pixels of padding to its cells.

table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
 Creating Tables in HTML
By default, borders around the table and their cells are separated from each other. But you can
collapse them into one by using the border-collapse property on the <table> element.

Also, text inside the <th> elements are displayed in bold font, aligned horizontally center in the cell by
default. To change the default alignment you can use the CSS text-align property.

The following style rules collapse the table borders and align the table header text to left.

table {
border-collapse: collapse;
}
th {
text-align: left;
}
 Spanning Multiple Rows and Columns
Spanning allow you to extend table rows and columns across multiple other rows and columns.

Normally, a table cell cannot pass over into the space below or above another table cell. But, you can
use the rowspan or colspan attributes to span multiple rows or columns in a table.

Let's try out the following example to understand how colspan basically works:

<table>
<tr>
<th>Name</th>
<th colspan="2">Phone</th>
</tr>
<tr>
<td>John Carter</td>
<td>5550192</td>
<td>5550152</td>
</tr>
</table>
Spanning Multiple Rows and Columns
Similarly, you can use the rowspan attribute to create a cell that spans more than one row.
Let's try out an example to understand how row spanning basically works:

<table>
<tr>
<th>Name:</th>
<td>John Carter</td>
</tr>
<tr>
<th rowspan="2">Phone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
 Adding Captions to Tables
You can specify a caption (or title) for your tables using the <caption> element.

The <caption> element must be placed directly after the opening <table> tag. By default, caption
appears at the top of the table, but you can change its position using the CSS caption-side property.

The following example shows how to use this element in a table.

<table>
<caption>Users Info</caption>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Peter Parker</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>Clark Kent</td>
<td>34</td>
</tr>
</table>
 Defining a Table Header, Body, and Footer
HTML provides a series of tags <thead>, <tbody>, and <tfoot> that helps you to create more
structured table, by defining header, body and footer regions, respectively.

The following example demonstrates the use of these elements.

<table>
<thead>
<tr>
<th>Items</th>
<th>Expenditure</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stationary</td>
<td>2,000</td>
</tr>
<tr>
<td>Furniture</td>
<td>10,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td>12,000</td>
</tr>
</tfoot>
</table>
 HTML Div Based Layout
Using the <div> elements is the most common method of creating layouts in HTML. The <div>
(stands for division) element is used for marking out a block of content, or set of other elements
inside an HTML document. It can contain further other div elements if required.
 Using the HTML5 Structural Elements
body {
<!DOCTYPE html> font: 14px Arial,sans-serif;
<html lang="en"> margin: 0px;
}
HTML5 has introduced the new structural <head>
<meta charset="utf-8">
header {
padding: 10px 20px;
background: #acb3b9;
elements such as <header>, <footer>, <title>HTML5 Web Page Layout</title> }
header h1 {
</head>
<nav>, <section>, etc. to define the <body> }
font-size: 24px;

.container {
<div class="container">
different parts of a web page in a more <header> }
width: 100%;
background: #f2f2f2;

semantic way. <h1>Tutorial Republic</h1>

</header>
nav, section {
float: left;
padding: 20px;
<div class="wrapper clearfix"> min-height: 170px;
box-sizing: border-box;
<nav> }
You can consider these elements as a <ul> section {
width: 80%;
<li><a href="#">Home</a></li>
replacement for commonly used classes <li><a href="#">About</a></li>
}
nav {
width: 20%;

such as .header, .footer, .nav, .section, etc. <li><a href="#">Contact</a></li>

</ul>
}
background: #d4d7dc;

nav ul {
list-style: none;
</nav> line-height: 24px;
<section> padding: 0px;
The following example uses the new <h2>Welcome to our site</h2> }
nav ul li a {
<p>Here you will learn how to create color: #333;
HTML5 structural elements to create the websites...</p>
}
.clearfix:after {

same layout that we have created in the </section>

</div>
content: ".";
display: block;
height: 0;

previous examples. <footer> clear: both;

visibility: hidden;
<p>copyright &copy; tutorialrepublic.com</p> }
footer {
</footer> background: #acb3b9;
text-align: center;
</div> padding: 5px;
</body> }
</html>
 Using the HTML5 Structural Elements
The following table provides a brief overview of new HTML5 structural elements.

Tag Description

<header> Represents the header of a document or a section.

<footer> Represents the footer of a document or a section.

<nav> Represents a section of navigation links.

<section> Represents a section of a document, such as header, footer etc.

<article> Represents an article, blog post, or other self-contained unit of information.

<aside> Represents some content loosely related to the page content.

 Working with HTML Lists
HTML lists are used to present list of information in well formed and semantic way. There are three
different types of list in HTML and each one has a specific purpose and meaning.

● Unordered list — Used to create a list of related items, in no particular order.

● Ordered list — Used to create a list of related items, in a specific order.
● Description list — Used to create a list of terms and their descriptions.

HTML Unordered Lists

An unordered list created using the

<ul> element, and each list item <ul>
starts with the <li> element. <li>Chocolate Cake</li>
<li>Black Forest Cake</li>
The list items in unordered lists are <li>Pineapple Cake</li>
marked with bullets. Here's an </ul>
example:
HTML Ordered Lists
An ordered list created using the <ol> element, and each list item starts with the <li> element.
Ordered lists are used when the order of the list's items is important.

The list items in an ordered list are marked with numbers. Here's an example:

<ol>
<li>Fasten your seatbelt</li>
<li>Starts the car's engine</li>
<li>Look around and go</li>
</ol>
The numbering of items in an ordered list typically starts with 1. However, if you want to change
that you can use the start attribute, as shown in the following example:
<ol start="10">
<li>Mix ingredients</li>
<li>Bake in oven for an hour</li>
<li>Allow to stand for ten minutes</li>
</ol>
scenarios
Ordered List (<ol>):

Scenario: Recipe Ingredients

<ol>
<li>1 cup flour</li>
<li>1/2 cup sugar</li>
<li>2 eggs</li>
<li>1 teaspoon baking powder</li>
<li>1/2 teaspoon salt</li>
</ol>
scenarios
To-Do List

<ul>
<li>Buy groceries</li>
<li>Clean the house</li>
<li>Attend the meeting at 2 PM</li>
<li>Finish the report</li>
</ul>
scenarios
Glossary of Terms

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language - the standard markup language for creating web
pages.</dd>

<dt>CSS</dt>
<dd>Cascading Style Sheets - a style sheet language used for describing the presentation of a
document written in HTML.</dd>

<dt>JavaScript</dt>
<dd>A high-level, interpreted programming language that is primarily used for adding
interactivity to websites.</dd>
</dl>
scenarios
Product Specifications

<dl>
<dt>Processor</dt>
<dd>Quad-core 2.3GHz</dd>

<dt>RAM</dt>
<dd>8GB DDR4</dd>

<dt>Storage</dt>
<dd>256GB SSD</dd>

<dt>Graphics</dt>
<dd>NVIDIA GeForce GTX 1650</dd>
</dl>
What is HTML Form
HTML Forms are required to collect different kinds of user inputs, such as contact details like
name, email address, phone numbers, or details like credit card information, etc.

Forms contain special elements called controls like inputbox, checkboxes, radio-buttons,
submit buttons, etc. Users generally complete a form by modifying its controls e.g. entering
text, selecting items, etc. and submitting this form to a web server for further processing.

The <form> tag is used to create an HTML form. Here's a simple example of a login for
<form>
<label>Username: <input type="text"></label>
<label>Password: <input type="password"></label>
<input type="submit" value="Submit">
</form>
Input Element
This is the most commonly used element within HTML forms.

It allows you to specify various types of user input fields, depending on the type attribute. An
input element can be of type text field, password field, checkbox, radio button, submit button,
reset button, file select box, as well as several new input types introduced in HTML5.

Text Fields
Text fields are one line areas that allow the user to input text.
Single-line text input controls are created using an <input> element, whose type attribute has
a value of text. Here's an example of a single-line text input used to take username:

<form>
<label for="username">Username:</label>
<input type="text" name="username" id="username">
</form>
Password Field
Password fields are similar to text fields. The only difference is; characters in a password field
are masked, i.e. they are shown as asterisks or dots. This is to prevent someone else from
reading the password on the screen. This is also a single-line text input controls created using
an <input> element whose type attribute has a value of password.

Here's an example of a single-line password input used to take user password:

<form>
<label for="user-pwd">Password:</label>
<input type="password" name="user-password" id="user-pwd">
</form>
Radio Buttons
Radio buttons are used to let the user select exactly one option from a <form>
pre-defined set of options. It is created using an <input> element <input type="radio" name="gender" id="male">
<label for="male">Male</label>
whose type attribute has a value of radio. <input type="radio" name="gender"
id="female">
Here's an example of radio buttons that can be used to collect user's <label for="female">Female</label>
gender information: </form>
Checkboxes
Checkboxes allows the user to select one or more option from a pre-defined set of options. It is
created using an <input> element whose type attribute has a value of checkbox.

Here's an example of checkboxes that can be used to collect information about user's hobbies:

<form>
<input type="checkbox" name="sports" id="soccer">
<label for="soccer">Soccer</label>
<input type="checkbox" name="sports" id="cricket">
<label for="cricket">Cricket</label>
<input type="checkbox" name="sports" id="baseball">
<label for="baseball">Baseball</label>
</form>
File Select box
The file fields allow a user to browse for a local file and send it as an attachment with the form
data. Web browsers such as Google Chrome and Firefox render a file select input field with a
Browse button that enables the user to navigate the local hard drive and select a file.

This is also created using an <input> element, whose type attribute value is set to file.

<form>
<label for="file-select">Upload:</label>
<input type="file" name="upload" id="file-select">
</form>
Textarea
Textarea is a multiple-line text input control that allows a user to enter more than one line of
text. Multi-line text input controls are created using an <textarea> element.
<form>
<label for="address">Address:</label>
<textarea rows="3" cols="30" name="address" id="address"></textarea>
</form>

Select Boxes
A select box is a dropdown list of options that allows user to select one or more option from a
pull-down list of options. Select box is created using the <select> element and <option>
element.

The <option> elements within the <select> element define each list item.
<form>
<label for="city">City:</label>
<select name="city" id="city">
<option value="sydney">Sydney</option>
<option value="melbourne">Melbourne</option>
<option value="cromwell">Cromwell</option>
</select>
</form>
Submit and Reset Buttons
A submit button is used to send the form data to a web server. When submit button is clicked
the form data is sent to the file specified in the form's action attribute to process the submitted
data.

A reset button resets all the forms control to default values. Try out the following example by
typing your name in the text field, and click on submit button to see it in action.

<form action="action.php" method="post">

<label for="first-name">First Name:</label>
<input type="text" name="first-name" id="first-name">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
Grouping Form Controls
You also group logically related controls and labels within a web form using the <legend>
element. Grouping form controls into categories makes it easier for users to locate a control
which makes the form more user-friendly. Let's try out the following example to see how it
works:

<form>
<fieldset>
<legend>Contact Details</legend>
<label>Email Address: <input type="email" name="email"></label>
<label>Phone Number: <input type="text" name="phone"></label>
</fieldset>
</form>
Frequently Used Form Attributes
You also group logically related controls and labels within a web form using the <legend>
element. Grouping form controls into categories makes it easier for users to locate a control
which makes the form more user-friendly. Let's try out the following example to see how it
works:

Attribute Description
name Specifies the name of the form.

action Specifies the URL of the program or script on the web server that will be used for processing the
information submitted via form.

method Specifies the HTTP method used for sending the data to the web server by the browser. The value can be
either get (the default) and post.

target Specifies where to display the response that is received after submitting the form. Possible values are
_blank, _self, _parent and _top.

enctype Specifies how the form data should be encoded when submitting the form to the server. Applicable only
when the value of the method attribute is post.
New Input Types in HTML5
HTML5 introduces several new <input> types like email, date, time, color, range, and so on. to
improve the user experience and to make the forms more interactive. However, if a browser
failed to recognize these new input types, it will treat them like a normal text box.

In this section we're going to take a brief look at each of the following new input types:

color date datetime-local

email month number

range search tel

time url week

There was also a datetime input type for entering a date and time, but it is now obsolete.
Input Type Color
The color input type allows the user to select a color from a color picker and returns the color
value in hexadecimal format (#rrggbb). If you don't specify a value, the default is #000000,
which is black.

Let's try out the following example to understand how it basically works:

<form>
<label for="mycolor">Select Color:</label>
<input type="color" value="#00ff00" id="mycolor">
</form>
Input Type Datetime-local
The datetime-local input type allows the user to select both local date and time, including the
year, month, and day as well as the time in hours and minutes.

Let's try out the following example to understand how it basically works:

<form>
<label for="mydatetime">Choose Date and Time:</label>
<input type="datetime-local" id="mydatetime">
</form>
Input Type Email
The email input type allows the user to enter e-mail address. It is very similar to a standard text
input type, but if it is used in combination with the required attribute, the browser may look for
the patterns to ensure a properly-formatted e-mail address should be entered.

Let's try out this example by entering any e-mail address to see how it actually works:

<form>
<label for="myemail">Enter Email Address:</label>
<input type="email" id="myemail" required>
</form>
Input Type Month
The month input type allows the user to select a month and year from a drop-down calendar.

The value is a string in the format "YYYY-MM", where YYYY is the four-digit year and MM is the
month number. Let's try out an example to see how this basically works:

<form>
<label for="mymonth">Select Month:</label>
<input type="month" id="mymonth">
</form>
Input Type Number
The number input type can be used for entering a numerical value. You can also restrict the
user to enter only acceptable values using the additional attributes min, max, and step.

The following example will allow you to enter a numeric value between 1 to 10.

<form>
<label for="mynumber">Enter a Number:</label>
<input type="number" min="1" max="10" step="0.5" id="mynumber">
</form>
Input Type Range
The range input type can be used for entering a numerical value within a specified range. It
works very similar to number input, but it offers a simpler control for entering a number.

Let's try out the following example to understand how it basically works:

<form>
<label for="mynumber">Select a Number:</label>
<input type="range" min="1" max="10" step="0.5" id="mynumber">
</form>
Input Type Search
The search input type can be used for creating search input fields.

A search field typically behaves like a regular text field, but in some browsers like Chrome and
Safari as soon as you start typing in the search box a small cross appears on the right side of
the field that lets you quickly clear the search field. Let's try out an example to see how it works:

<form>
<label for="mysearch">Search Website:</label>
<input type="search" id="mysearch">
</form>
Input Type Tel
The tel input type can be used for entering a telephone number.

Browsers don't support tel input validation natively. However, you can use the placeholder
attribute to help users in entering the correct format for a phone number, or specify a regular
expression to validate the user input using the pattern attribute. Let's check out an example:

<form>
<label for="myphone">Telephone Number:</label>
<input type="tel" id="myphone" placeholder="xx-xxxx-xxxx" required>
</form>
Input Type Time
The time input type can be used for entering a time (hours and minutes).

Browser may use 12- or 24-hour format for inputting times, based on local system's time
setting.

<form>
<label for="mytime">Select Time:</label>
<input type="time" id="mytime">
</form>
Input Type URL
The url input type can be used for entering URL's or web addresses.

You can use the multiple attribute to enter more than one URL. Also, if required attribute is
specified browser will automatically carry out validation to ensure that only text that matches
the standard format for URLs is entered into the input box. Let's see how this works:

<form>
<label for="myurl">Enter Website URL:</label>
<input type="url" id="myurl" required>
</form>
Input Type Week
The week input type allows the user to select a week and year from a drop-down calendar.

Let's try out the following example to understand how this works:

<form>
<label for="myweek">Select Week:</label>
<input type="week" id="myweek">
</form>
HTML forms can be used in various situations
A website has a "Contact Us" page with a form for users to submit their name, email address,
subject, and message. When submitted, this form sends an email to the website's support
team.

<form action="/send_message" method="post">

<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>

<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject"><br><br>

<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

<input type="submit" value="Submit">

</form>
User Registration Form:
A website requires users to register with their username, email, and password.

<form action="/register" method="post">

<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>

<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>

<input type="submit" value="Register">

</form>
Order Form
An e-commerce website allows users to select products and specify quantities.

<form action="/place_order" method="post">

<label for="product1">Product 1:</label>
<input type="text" id="product1" name="product1"><br>
<label for="quantity1">Quantity:</label>
<input type="number" id="quantity1" name="quantity1" min="1"><br><br>

<label for="product2">Product 2:</label>

<input type="text" id="product2" name="product2"><br>
<label for="quantity2">Quantity:</label>
<input type="number" id="quantity2" name="quantity2" min="1"><br><br>

<input type="submit" value="Place Order">

</form>
HTML Meta
The <meta> tags are typically used to provide structured metadata such as a document's
keywords, description, author name, character encoding, and other metadata. Any number of
meta tags can be placed inside the head section of an HTML or XHTML document.

Metadata will not be displayed on the web page, but will be machine parsable, and can be used
by the browsers, search engines like Google or other web services.

The following section describes the use of meta tags for various purposes.
Declaring Character Encoding in HTML
Meta tag typically used to declare character encoding inside HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Declaring Character Encoding</title>
<meta charset="utf-8">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

To set the character encoding inside a CSS document, the @charset at-rule is used.
Defining the Author of a Document
You can also use the meta tag to clearly define who is the author or creator of the web page.

The author can be an individual, the company as a whole or a third party.

<head>
<title>Defining Document's Author</title>
<meta name="author" content="Alexander Howick">
</head>
Keywords and Description for Search Engines
Some search engines use metadata especially keywords and descriptions to index web pages;
however this may not necessarily be true. Keywords giving extra weight to a document's
keywords and description provide a short synopsis of the page. Here's an example:

<head>
<title>Defining Keywords and Description</title>
<meta name="keywords" content="HTML, CSS, javaScript">
<meta name="description" content="Easy to understand tutorials and
references on HTML, CSS, javaScript and more...">
</head>
Configuring the Viewport for Mobile Devices
You can use the viewport meta tag to display the web pages correctly on mobile devices.

Without a viewport meta tag, mobile browsers render the web pages as typical desktop screen
widths, and then scale it down to fit the mobile screen. As a result, it requires pinch-and-zoom
to view the web page properly in mobile devices, which is very inconvenient.

The following demonstration shows two web pages — one with viewport meta tag and other
without viewport meta tag set.
The viewport meta tag allows you to set the best viewport size and scaling limits for viewing the web
pages on mobile devices. A typical viewport meta tag definition will look as follows:

<head>
<title>Configuring the Viewport</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
The width=device-width key-value pair inside the content attribute sets the width of the viewport to same as the screen width of the
device, whereas the initial-scale=1 sets the initial scale or zoom level to 100% when the page is first loaded by the browser.
The HTML head Element
The <head> element primarily is the container for all the head elements, which provide extra
information about the document (metadata), or reference to other resources that are required
for the document to display or behave correctly in a web browser.

The head elements collectively describes the properties of the document such as title, provide
meta information like character set, instruct the browser where to find the style sheets or scripts
that allows you to extend the HTML document in a highly active and interactive ways.

The HTML elements that can be used inside the <head> element are: <title>, <base>,
<link>, <style>, <meta>, <script> and the <noscript> element.
The HTML title Element
The <title> element defines the title of the document.

The title element is required in all HTML/XHTML documents to produce a valid document.
Only one title element is permitted in a document and it must be placed within the <head>
element. The title element contains plain text and entities; it may not contain other markup tags.
The title of the document may be used for different purposes. For example:

To display a title in the browser title bar and in the task bar.
To provide a title for the page when it is added to favorites or bookmarked.
To displays a title for the page in search-engine results.

<!DOCTYPE html>
<html lang="en">
<head>
<title>A simple HTML document</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
The HTML base Element
The HTML <base> element is used to define a base URL for all relative links contained in the
document, e.g. you can set the base URL once at the top of your page, and then all subsequent
relative links will use that URL as a starting point. Here's an example:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Defining a base URL</title>
<base href="https://www.openlabsgh.com/">
</head>
<body>
<p><a href="html.php>HTML Head</a>.</p>
</body>
</html>
The HTML link Element
The <link> element defines the relationship between the current document and an external
documents or resources. A common use of link element is to link to external style sheets.

<head>
<title>Linking Style Sheets</title>
<link rel="stylesheet" href="style.css">
</head>
The HTML style Element
The <style> element is used to define embedded style information for an HTML document. The
style rules inside the <style> element specify how HTML elements render in a browser

<head>
<title>Embedding Style Sheets</title>
<style>
body { background-color: YellowGreen; }
h1 { color: red; }
p { color: green; }
</style>
</head>
The HTML meta Element
The <meta> element provides metadata about the HTML document. Metadata is a set of data
that describes and gives information about other data. Here's an example:

<head>
<title>Specifying Metadata</title>
<meta charset="utf-8">
<meta name="author" content="John Smith">
</head>
The HTML script Element
The <script> element is used to define client-side script, such as JavaScript in HTML
documents.

The following example will display a greeting message in the browser:

<head>
<title>Adding JavaScript</title>
<script>
document.write("<h1>Hello World!</h1>")
</script>
</head>
Embedding Audio in HTML Document
Inserting audio onto a web page was not easy before, because web browsers did not have a
uniform standard for defining embedded media files like audio.

In this chapter we'll demonstrates some of the many ways to embed sound in your webpage,
from the use of a simple link to the use of the latest HTML5 <audio> element.

Using the HTML5 audio Element

The newly introduced HTML5 <audio> element provides a standard way to embed audio in
web pages. However, the audio element is relatively new but it works in most of the modern
web browsers.

The following example simply inserts an audio into the HTML5 document, using the browser
default set of controls, with one source defined by the src attribute.
<audio controls="controls" src="media/birds.mp3">
Your browser does not support the HTML5 Audio element.
</audio>
Linking Audio Files
You can make links to your audio files and play it by ticking on them.

Let's try out the following example to understand how this basically works:
<a href="media/sea.mp3">Track 1</a>
<a href="media/wind.mp3">Track 2</a>

Using the object Element

The <object> element is used to embed different kinds of media files into an HTML document.
Initially, this element was used to insert ActiveX controls, but according to the specification, an
object can be any media object such as audio, video, PDF files, Flash animations or even images.

The following example code embeds a simple audio file into a web page.

<object data="media/sea.mp3"></object>
<object data="media/sea.ogg"></object>
Using the embed Element
The <embed> element is used to embed multimedia content into an HTML document.

The following code fragment embeds audio files into a web page.
<embed src="media/wind.mp3">
<embed src="media/wind.ogg">

Using the object Element

The <object> element is used to embed different kinds of media files into an HTML document.
Initially, this element was used to insert ActiveX controls, but according to the specification, an
object can be any media object such as audio, video, PDF files, Flash animations or even images.

The following example code embeds a simple audio file into a web page.

<object data="media/sea.mp3"></object>
<object data="media/sea.ogg"></object>
Embedding Video in HTML Document
Inserting video onto a web page was not relatively easy, because web browsers did not have a
uniform standard for defining embedded media files like video.

we'll demonstrates some of the many ways of adding videos on web pages, from the latest
HTML5 <video> element to the popular YouTube videos.

Using the HTML5 video Element

The newly introduced HTML5 <video> element provides a standard way to embed video in web
pages. However, the video element is relatively new, but it works in most of the modern web
browsers.

The following example simply inserts a video into the HTML document, using the browser
default set of controls, with one source defined by the src attribute.

<video controls="controls" src="media/shuttle.mp4">

Your browser does not support the HTML5 Video element.
</video>