Contents

What is HTML?............................................................................................................................................3
First Example of html...................................................................................................................................3
HTML Headings............................................................................................................................................3
HTML Paragraphs........................................................................................................................................4
HTML Horizontal Rules(HR Tag)...................................................................................................................4
HTML Line Breaks........................................................................................................................................4
The HTML <pre> Element............................................................................................................................5
HTML Text Formatting.................................................................................................................................5
HTML styles.................................................................................................................................................6
HTML Quotation and Citation Elements......................................................................................................8
HTML Comment Tags..................................................................................................................................9
HTML Colors..............................................................................................................................................10
Html styles css...........................................................................................................................................10
HTML Links - Hyperlinks.............................................................................................................................12
HTML Links - Different Colors....................................................................................................................14
HTML Images.............................................................................................................................................16
HTML Background Images.........................................................................................................................18
HTML Favicon............................................................................................................................................19
HTML Tables..............................................................................................................................................19
HTML Lists.................................................................................................................................................25
HTML Block and Inline Elements...............................................................................................................28
HTML class Attribute.................................................................................................................................29
HTML id Attribute......................................................................................................................................31
HTML Iframes............................................................................................................................................34
The HTML <meta> Element.......................................................................................................................35
What are Semantic Elements?...................................................................................................................36
HTML Forms..............................................................................................................................................39
HTML Form Attributes...............................................................................................................................41
The HTML <form> Elements......................................................................................................................42
Html input types........................................................................................................................................45
HTML Input Attributes...............................................................................................................................48
HTML Multimedia......................................................................................................................................50
HTML Video...............................................................................................................................................51
HTML Audio...............................................................................................................................................51
 What is HTML?
HTML stands for Hyper Text Markup Language.

HTML is the standard markup language for creating Web pages.

HTML describes the structure of a Web page.

HTML consists of a series of elements.

HTML elements tell the browser how to display the content.

HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is
a link", etc.

First Example of html

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

Example

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
 HTML Paragraphs
The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some white space (a
margin) before and after a paragraph.

Example

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

HTML Horizontal Rules(HR Tag)

The <hr> tag defines a break in an HTML page, and is most often displayed as a horizontal rule.

The <hr> element is used to separate content (or define a change) in an HTML page:

Example

<h1>This is heading 1</h1>

<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

HTML Line Breaks

The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a new paragraph:

Example

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

 The HTML <pre> Element
The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it
preserves both spaces and line breaks:

Example

<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</pre>

HTML Text Formatting

<b> - Bold text

<strong> - Important text

<i> - Italic text

<em> - Emphasized text

<mark> - Marked text

<small> - Smaller text

<del> - Deleted text

<ins> - Inserted text

<sub> - Subscript text

<sup> - Superscript text

The HTML <b> element defines bold text, without any extra importance.

The HTML <strong> element defines text with strong importance. The content inside is typically
displayed in bold.

The HTML <i> element defines a part of text in an alternate voice or mood. The content inside is
typically displayed in italic.

The HTML <em> element defines emphasized text. The content inside is typically displayed in
italic.

The HTML <small> element defines smaller text:

The HTML <mark> element defines text that should be marked or highlighted:

The HTML <del> element defines text that has been deleted from a document. Browsers will
usually strike a line through deleted text:

The HTML <ins> element defines a text that has been inserted into a document. Browsers will
usually underline inserted text:

The HTML <sub> element defines subscript text. Subscript text appears half a character below
the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for
chemical formulas, like H2O:

The HTML <sup> element defines superscript text. Superscript text appears half a character
above the normal line, and is sometimes rendered in a smaller font. Superscript text can be
used for footnotes.

HTML styles
The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

<tagname style="pro+perty:value;">
Background Color

The CSS background-color property defines the background color for an HTML element.

Example :

<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

Text Color

The CSS color property defines the text color for an HTML element:

Example

<h1 style="color:blue;">This is a heading</h1>

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

Fonts

The CSS font-family property defines the font to be used for an HTML element:

Example

<h1 style="font-family:verdana;">This is a heading</h1>

<p style="font-family:courier;">This is a paragraph.</p>

Text Size

The CSS font-size property defines the text size for an HTML element:

Example

<h1 style="font-size:300%;">This is a heading</h1>

<p style="font-size:160%;">This is a paragraph.</p>

Text Alignment

The CSS text-align property defines the horizontal text alignment for an HTML element:

Example

<h1 style="text-align:center;">Centered Heading</h1>

<p style="text-align:center;">Centered paragraph.</p>
 HTML Quotation and Citation Elements

HTML <blockquote> for Quotations

The HTML <blockquote> element defines a section that is quoted from another source.
Browsers usually indent <blockquote> elements.

Example:

<p>Here is a quote from WWF's website:</p>

<blockquote>
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>

HTML <q> for Short Quotations

The HTML <q> tag defines a short quotation.

Browsers normally insert quotation marks around the quotation.

Example:

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

HTML <abbr> for Abbreviations

The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.",
"ASAP", "ATM". Marking abbreviations can give useful information to browsers, translation
systems and search-engines.

Example:

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

HTML <address> for Contact Information

The HTML <address> tag defines the contact information for the author/owner of a document
or an article.

The contact information can be an email address, URL, physical address, phone number, social
media handle, etc.

The text in the <address> element usually renders in italic, and browsers will always add a line
break before and after the <address> element.

Example:

<address>
Written by John Doe.<br>
Visit us at:<br>
[Link]<br>
Box 564, Disneyland<br>
USA
</address>

HTML <bdo> for Bi-Directional Override

BDO stands for Bi-Directional Override.

The HTML <bdo> tag is used to override the current text direction:

Example

<bdo dir="rtl">This text will be written from right to left</bdo>

HTML Comment Tags

You can add comments to your HTML source by using the following syntax:

<!-- Write your comments here -->

 HTML Colors

Background Color

You can set the background color for HTML elements:

Example:

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">Lorem ipsum...</p>

Text Color

You can set the color of text:

Example

<h1 style="color:Tomato;">Hello World</h1>

<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Border Color

You can set the color of borders:

Example

<h1 style="border:2px solid Tomato;">Hello World</h1>

<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

Html styles css

CSS stands for Cascading Style Sheets.

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

Cascading Style Sheets (CSS) is used to format the layout of a webpage.

With CSS, you can control the color, font, the size of text, the spacing between elements, how
elements are positioned and laid out, what background images or background colors are to be
used, different displays for different devices and screen sizes, and much more!

Using CSS

CSS can be added to HTML documents in 3 ways:

 Inline - by using the style attribute inside HTML elements

 Internal - by using a <style> element in the <head> section
 External - by using a <link> element to link to an external CSS file

Inline CSS:-

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

Example

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

Internal CSS

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within a <style> element.

Example

<html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS

An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the <head> section of each HTML page:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

[Link]

body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}

HTML Links - Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

Syntax:

<a href="url">link text</a>

Example:

<a href="[Link] [Link]!</a>

The target Attribute

By default, the linked page will be displayed in the current browser window. To change this, you
must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

 _self - Default. Opens the document in the same window/tab as it was clicked
 _blank - Opens the document in a new window or tab
 _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the window

Example:

<a href="[Link] target="_blank">Visit W3Schools!</a>

Absolute URLs vs. Relative URLs

Both examples above are using an absolute URL (a full web address) in the href attribute.

A local link (a link to a page within the same website) is specified with a relative URL (without
the "[Link] part):

Example:

<h2>Absolute URLs</h2>
<p><a href="[Link]
<p><a href="[Link]

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/[Link]">CSS Tutorial</a></p>

Use an Image as a Link

Example:

<a href="[Link]">
<img src="[Link]" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

Link to an Email Address

Use mailto: inside the href attribute to create a link that opens the user's email program (to let them
send a new email):

Example:

<a href="[Link] email</a>

Button as a Link

To use an HTML button as a link, you have to add some JavaScript code.

JavaScript allows you to specify what happens at certain events, such as a click of a button:

Example

<button onclick="[Link]='[Link]'">HTML Tutorial</button>

Link Titles

The title attribute specifies extra information about an element. The information is most often shown as
a tooltip text when the mouse moves over the element.

Example

<a href="[Link] title="Go to W3Schools HTML section">Visit our HTML

Tutorial</a>

HTML Links - Different Colors

An HTML link is displayed in a different color depending on whether it has been visited, is
unvisited, or is active.

 An unvisited link is underlined and blue

 A visited link is underlined and purple
 An active link is underlined and red

Example:
Here, an unvisited link will be green with no underline. A visited link will be pink with no underline. An
active link will be yellow and underlined. In addition, when mousing over a link (a:hover) it will become
red and underlined:

<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}

a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}

a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}

a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>

Link Buttons
<style>
a:link, a:visited {
 background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: red;
}
</style>

HTML Images
Images can improve the design and the appearance of a web page.

Example:

<img src="pic_trull.jpg" alt="Italian Trulli">

<img src="img_girl.jpg" alt="Girl in a jacket">

The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages. The <img> tag
creates a holding space for the referenced image.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The <img> tag has two required attributes:

src - Specifies the path to the image

alt - Specifies an alternate text for the image

Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.

Example

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Images in Another Folder

If you have your images in a sub-folder, you must include the folder name in the src attribute:

<img src="/images/[Link]" alt="HTML5 Icon" style="width:128px;height:128px;">

Images on Another Server/Website

Some web sites point to an image on another server.

To point to an image on another server, you must specify an absolute (full) URL in the src attribute:

Example

<img src="[Link] alt="[Link]">

Animated Images

<img src="[Link]" alt="Computer Man" style="width:48px;height:48px;">

Image as a Link

To use an image as a link, put the <img> tag inside the <a> tag:

Example

<a href="[Link]">
<img src="[Link]" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

Image Floating

Use the CSS float property to let the image float to the right or to the left of a text:

Example

<p><img src="[Link]" alt="Smiley face" style="float:right;width:42px;height:42px;">

The image will float to the right of the text.</p>

<p><img src="[Link]" alt="Smiley face" style="float:left;width:42px;height:42px;">

The image will float to the left of the text.</p>

HTML Background Images

To add a background image on an HTML element, use the HTML style attribute and the CSS background-
image property:

<p style="background-image: url('img_girl.jpg');">

Background Image on a Page

<style>
body {
background-image: url('img_girl.jpg');
}
</style>

Background Repeat

<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>

Background Cover

<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>

Background Stretch

<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>

HTML Favicon
A favicon is a small image displayed next to the page title in the browser tab.
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="../image/[Link]">
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

HTML Tables

HTML tables allow web developers to arrange data into rows and columns.

<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>

Table Cells

Each table cell is defined by a <td> and a </td> tag.

td stands for table data.

Everything between <td> and </td> are the content of the table cell.
Table Rows

Each table row starts with a <tr> and ends with a </tr> tag.

tr stands for table row.

Table Headers

Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of
the <td> tag:

th stands for table header.

HTML Table Borders

HTML tables can have borders of different styles and shapes.

table, th, td {
border: 1px solid black;
}

Collapsed Table Borders

border-collapse: collapse;

Style Table Borders

If you set a background color of each cell, and give the border a white color (the same as the document
background), you get the impression of an invisible border:

table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}

Round Table Borders

With the border-radius property, the borders get rounded corners:

table, th, td {
border: 1px solid black;
 border-radius: 10px;
}

Dotted Table Borders

With the border-style property, you can set the appearance of the border.

dotted

dashed

solid

double

groove

ridge

inset

outset

none

hidden

Border Color

With the border-color property, you can set the color of the border.

Style=” Border-color:red;”

Table Sizes

HTML tables can have different sizes for each column, row or the entire table.

<table style="width:100%">

<th style="width:70%">

<tr style="height:200px">

Table Headers

HTML tables can have headers for each column or row, or for many columns/rows.

Table headers are defined with th elements. Each th element represents a table cell.
Vertical table header:

<tr>
<th>Firstname</th>
<td>Jill</td>
<td>Eve</td>
</tr>

Align Table Headers

th {
text-align: left;
}

Table Caption

You can add a caption that serves as a heading for the entire table.

<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>

</table>

Table Padding & Spacing

HTML tables can adjust the padding inside the cells, and also the space between the cells.

Cell Padding:- Cell padding is the space between the cell edges and the cell content.

By default the padding is set to 0.

To add padding on table cells, use the CSS padding property:

th, td {
padding: 15px;
}

th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
 padding-right: 40px;
}

Cell Spacing: Cell spacing is the space between each cell.

By default the space is set to 2 pixels.

To change the space between table cells, use the CSS border-spacing property
on the table element:

table {
border-spacing: 30px;
}

Table Colspan & Rowspan

HTML tables can have cells that span over multiple rows and/or columns.

Colspan: To make a cell span over multiple columns, use the colspan attribute:

<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
</table>

Rowspan: To make a cell span over multiple rows, use the rowspan attribute:

<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
 </tr>
</table>

Table Styling

If you add a background color on every other table row, you will get a nice zebra stripes effect.

To style every other table row element, use the :nth-child(even) selector like this:

tr:nth-child(even) {
background-color: #D6EEEE;
}

Vertical Zebra Stripes

To make vertical zebra stripes, style every other column, instead of every other row.

Set the :nth-child(even) for table data elements like this:

td:nth-child(even), th:nth-child(even) {
background-color: #D6EEEE;
}

Hoverable Table

Use the :hover selector on tr to highlight table rows on mouse over:

tr:hover {background-color: #D6EEEE;}

Table Colgroup

The <colgroup> element is used to style specific columns of a table.

<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>

The <colgroup> element should be used as a container for the column specifications.
Each group is specified with a <col> element.

The span attribute specifies how many columns that get the style.

The style attribute specifies the style to give the columns.

HTML Lists

HTML lists allow web developers to group a set of related items in lists.

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Choose List Item Marker

<ul style="list-style-type:disc;">

<ul style="list-style-type:circle;">

<ul style="list-style-type:square;">

<ul style="list-style-type:none;">

Nested HTML Lists

<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Horizontal List with CSS

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}

li a:hover {
background-color: #111111;
}
</style>
</head>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ol type="1">

<ol type="A">

<ol type="a">

<ol type="I">

<ol type="i">

Control List Counting

<ol start="50">

HTML Description Lists

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag
describes each term:

<dl>
<dt>Coffee</dt>
 <dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

HTML Block and Inline Elements

Every HTML element has a default display value, depending on what type of element it is.

There are two display values: block and inline.

Block-level Elements

A block-level element always starts on a new line, and the browsers automatically add some space (a
margin) before and after the element.

A block-level element always takes up the full width available (stretches out to the left and right as far as
it can).

Two commonly used block elements are: <p> and <div>.

The <p> element defines a paragraph in an HTML document.

The <div> element defines a division or a section in an HTML document.

Here are the block-level elements in HTML:

<address>,<article>,<aside>,<blockquote>,<canvas>,<dd>,<div>,<dl>,<dt>,<fieldset>,

<figcaption>,<figure>,<footer>,<form>,<h1>-<h6>,<header>,<hr>,<li>,<main>,<nav>

<noscript>,<ol>,<p>,<pre>,<section>,<table>,<tfoot>,<ul>,<video>

Inline Elements

An inline element does not start on a new line.

An inline element only takes up as much width as necessary.

This is a <span> element inside a paragraph.

<a>,<abbr>,<acronym>,<b>,<bdo>,<big>,<br>,<button>,<cite>,<code>,<dfn>,<em>,<i>,<img>,

<input>,<kbd>,<label>,<map>,<object>,<output>,<q>,<samp>,<script>,<select>,<small>,<span>

<strong>,<sub>,<sup>,<textarea>,<time>,<tt>,<var>
 HTML class Attribute
The HTML class attribute is used to specify a class for an HTML element.

Multiple HTML elements can share the same class.

The class attribute is often used to point to a class name in a style sheet. It can also be used by a
JavaScript to access and manipulate elements with the specific class name.

<!DOCTYPE html>

<html>

<head>

<style>

.city {

background-color: tomato;

color: white;

border: 2px solid black;

margin: 20px;

padding: 20px;

</style>

</head>

<body>

<div class="city">

<h2>London</h2>

<p>London is the capital of England.</p>

</div>

<div class="city">
<h2>Paris</h2>

<p>Paris is the capital of France.</p>

</div>

<div class="city">

<h2>Tokyo</h2>

<p>Tokyo is the capital of Japan.</p>

</div>

</body>

</html>

The Syntax For Class

To create a class; write a period (.) character, followed by a class name. Then, define the CSS
properties within curly braces {}:

Multiple Classes

HTML elements can belong to more than one class.

To define multiple classes, separate the class names with a space, e.g. <div class="city main">.
The element will be styled according to all the classes specified.

In the following example, the first <h2> element belongs to both the city class and also to
the main class, and will get the CSS styles from both of the classes:

<h2 class="city main">London</h2>

<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

Different Elements Can Share Same Class

Different HTML elements can point to the same class name.

In the following example, both <h2> and <p> point to the "city" class and will share the same
style:

<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
 HTML id Attribute

The HTML id attribute is used to specify a unique id for an HTML element.

You cannot have more than one element with the same id in an HTML document.

Using The id Attribute

The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique
within the HTML document.

The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript
to access and manipulate the element with the specific id.

The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS properties
within curly braces {}.

In the following example we have an <h1> element that points to the id name "myHeader".
This <h1> element will be styled according to the #myHeader style definition in the head section:

<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>

Difference Between Class and ID

A class name can be used by multiple HTML elements, while an id name must only be used by one HTML
element within the page:

<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}

/* Style all elements with the class name "city" */

.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>

<!-- An element with a unique id -->

<h1 id="myHeader">My Cities</h1>

<!-- Multiple elements with same class -->

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

HTML Bookmarks with ID and Links

HTML bookmarks are used to allow readers to jump to specific parts of a webpage.

Bookmarks can be useful if your page is very long.

To use a bookmark, you must first create it, and then add a link to it.

Then, when the link is clicked, the page will scroll to the location with the bookmark.

<html>

<body>

<p><a href="#C4">Jump to Chapter 4</a></p>

<p><a href="#C10">Jump to Chapter 10</a></p>

<h2>Chapter 1</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>

<p>This chapter explains ba bla bla</p>

<h2 id="C4">Chapter 4</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>

<p>This chapter explains ba bla bla</p>

<h2 id="C10">Chapter 10</h2>

<p>This chapter explains ba bla bla</p>

</body>

</html>

HTML Iframes
An HTML iframe is used to display a web page within a web page.

<iframe src="url" title="description"></iframe>

Iframe - Set Height and Width

Use the height and width attributes to specify the size of the iframe.

The height and width are specified in pixels by default:

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

Or you can add the style attribute and use the CSS height and width properties:

<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe

Example"></iframe>

Iframe - Remove the Border

By default, an iframe has a border around it.

To remove the border, add the style attribute and use the CSS border property:

<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>

With CSS, you can also change the size, style and color of the iframe's border:

<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>

Iframe - Target for a Link

An iframe can be used as the target frame for a link.

The target attribute of the link must refer to the name attribute of the iframe:

<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>

<p><a href="[Link] target="iframe_a">[Link]</a></p>

The HTML <meta> Element

The <meta> element is typically used to specify the character set, page description, keywords, author of
the document, and viewport settings.

The metadata will not be displayed on the page, but is used by browsers (how to display content or
reload page), by search engines (keywords), and other web services.

Define the character set used:

<meta charset="UTF-8">

Define keywords for search engines:

<meta name="keywords" content="HTML, CSS, JavaScript">

Define a description of your web page:

<meta name="description" content="Free Web tutorials">

Define the author of a page:

<meta name="author" content="John Doe">

Refresh document every 30 seconds:

<meta http-equiv="refresh" content="30">

Setting the viewport to make your website look good on all devices:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

All meta information goes inside the head section.

 What are Semantic Elements?
A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

Semantic Elements in HTML

Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div id="footer"> to
indicate navigation, header, and footer.

In HTML there are some semantic elements that can be used to define different parts of a web page:

<article>

<aside>

<details>

<figcaption>

<figure>

<footer>

<header>

<main>

<mark>

<nav>

<section>

<summary>

<time>

HTML <section> Element

The <section> element defines a section in a document.

According to W3C's HTML documentation: "A section is a thematic grouping of content, typically with a
heading."
Examples of where a <section> element can be used:

Chapters

Introduction

News items

Contact information

A web page could normally be split into sections for introduction, content, and contact information.

HTML <article> Element

The <article> element specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to distribute it independently from
the rest of the web site.

Examples of where the <article> element can be used:

Forum posts

Blog posts

User comments

Product cards

Newspaper articles

HTML <header> Element

The <header> element represents a container for introductory content or a set of navigational links.

A <header> element typically contains:

one or more heading elements (<h1> - <h6>)

logo or icon

authorship information

HTML <footer> Element

The <footer> element defines a footer for a document or section.

A <footer> element typically contains:

authorship information
copyright information

contact information

sitemap

back to top links

related documents

HTML <nav> Element

The <nav> element defines a set of navigation links.

Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is
intended only for major blocks of navigation links.

Browsers, such as screen readers for disabled users, can use this element to determine whether to omit
the initial rendering of this content.

HTML <aside> Element

The <aside> element defines some content aside from the content it is placed in (like a sidebar).

The <aside> content should be indirectly related to the surrounding content.

HTML <figure> and <figcaption> Elements

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be placed as
the first or as the last child of a <figure> element.

The <img> element defines the actual image/illustration.

HTML Forms
An HTML form is used to collect user input. The user input is most often sent to a server for processing.

The <form> Element

The HTML <form> element is used to create an HTML form for user input:
<form>
.
form elements
.
</form>

The <form> element is a container for different types of input elements, such as: text fields, checkboxes,
radio buttons, submit buttons, etc.

The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.

Here are some examples:

Type Description

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many choices)

<input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices)

<input type="submit"> Displays a submit button (for submitting the form)

<input type="button"> Displays a clickable button

Text Fields

The <input type="text"> defines a single-line input field for text input.

Example

A form with input fields for text:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
The <label> Element

Notice the use of the <label> element in the example above.

The <label> tag defines a label for many form elements.

The <label> element is useful for screen-reader users, because the screen-reader will read out loud the
label when the user focuses on the input element.

The <label> element also helps users who have difficulty clicking on very small regions (such as radio
buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the
radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind
them together.

Radio Buttons

The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

This is how the HTML code above will be displayed in a browser:

Choose your favorite Web language:

HTML

CSS

JavaScript

Checkboxes

The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

This is how the HTML code above will be displayed in a browser:

I have a bike

I have a car

I have a boat
The Submit Button

The <input type="submit"> defines a button for submitting the form data to a form-handler.

The form-handler is typically a file on the server with a script for processing input data.

The form-handler is specified in the form's action attribute.

The Name Attribute for <input>

Notice that each input field must have a name attribute to be submitted.

If the name attribute is omitted, the value of the input field will not be sent at all.

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>

HTML Form Attributes

The Action Attribute

The action attribute defines the action to be performed when the form is submitted.

Usually, the form data is sent to a file on the server when the user clicks on the submit button.

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

The Target Attribute

The target attribute specifies where to display the response that is received after submitting the form.

<form action="/action_page.php" target="_blank">

The Method Attribute

The method attribute specifies the HTTP method to be used when submitting the form data.

The form-data can be sent as URL variables (with method="get") or as HTTP post transaction
(with method="post").

<form action="/action_page.php" method="get">

Notes on GET:

 Appends the form data to the URL, in name/value pairs

 NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!)
 The length of a URL is limited (2048 characters)
 Useful for form submissions where a user wants to bookmark the result
 GET is good for non-secure data, like query strings in Google

Notes on POST:

 Appends the form data inside the body of the HTTP request (the submitted form data is
not shown in the URL)
 POST has no size limitations, and can be used to send large amounts of data.
 Form submissions with POST cannot be bookmarked

The Autocomplete Attribute

The autocomplete attribute specifies whether a form should have autocomplete on or off.

When autocomplete is on, the browser automatically complete values based on values that the user has
entered before.

<form action="/action_page.php" autocomplete="on">

The HTML <form> Elements

The HTML <form> element can contain one or more of the following form elements:

The <input> Element

One of the most used form element is the <input> element.

The <input> element can be displayed in several ways, depending on the type attribute.

<label for="fname">First name:</label>

<input type="text" id="fname" name="fname">

The <label> Element

The <label> element defines a label for several form elements.

The <label> element is useful for screen-reader users, because the screen-reader will read out loud the
label when the user focus on the input element.

The <select> Element

The <select> element defines a drop-down list:

<label for="cars">Choose a car:</label>

<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

The <option> elements defines an option that can be selected.

By default, the first item in the drop-down list is selected.

Visible Values:

Use the size attribute to specify the number of visible values:

Example

<label for="cars">Choose a car:</label>

<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

Allow Multiple Selections:

Use the multiple attribute to allow the user to select more than one value:

Example

<label for="cars">Choose a car:</label>

<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):

Example

<textarea name="message" rows="10" cols="30">

The cat was playing in the garden.
</textarea>

The <button> Element

The <button> element defines a clickable button:

Example

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

The <fieldset> and <legend> Elements

The <fieldset> element is used to group related data in a form.

The <legend> element defines a caption for the <fieldset> element.

Example

<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

The <datalist> Element

The <datalist> element specifies a list of pre-defined options for an <input> element.

Users will see a drop-down list of the pre-defined options as they input data.

The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.

Example
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>

Html input types

Input Type Text

<input type="text"> defines a single-line text input field:

Input Type Password

<input type="password"> defines a password field:

Input Type Submit

<input type="submit"> defines a button for submitting form data to a form-handler.

The form-handler is typically a server page with a script for processing input data.

Input Type Reset

<input type="reset"> defines a reset button that will reset all form values to their default values:

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>

Input Type Radio

<input type="radio"> defines a radio button.

<input type="radio" id="html" name="fav_language" value="HTML">

<label for="html">HTML</label><br>
 <input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>

Input Type Checkbox

<input type="checkbox"> defines a checkbox.

Input Type Button

<input type="button"> defines a button:

Input Type Color

The <input type="color"> is used for input fields that should contain a color.

Input Type Date

The <input type="date"> is used for input fields that should contain a date.

Input Type Email

The <input type="email"> is used for input fields that should contain an e-mail address.

Input Type Image

The <input type="image"> defines an image as a submit button.

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

Input Type File

The <input type="file"> defines a file-select field and a "Browse" button for file uploads.

Input Type Hidden

The <input type="hidden"> defines a hidden input field (not visible to a user).

<label for="fname">First name:</label>

<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="custId" name="custId" value="3487">

Input Type Month

The <input type="month"> allows the user to select a month and year.

Input Type Number

The <input type="number"> defines a numeric input field.

Input type range

The <input type="range"> defines a control for entering a number whose exact value is not important
(like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are
accepted with the min, max, and step attributes:

<input type="range" id="vol" name="vol" min="0" max="50">

Input Type Search

The <input type="search"> is used for search fields (a search field behaves like a regular text field).

Input Type Tel

The <input type="tel"> is used for input fields that should contain a telephone number.

Input Type Time

The <input type="time"> allows the user to select a time (no time zone).

Input Type Url

The <input type="url"> is used for input fields that should contain a URL address.

Input Type Week

The <input type="week"> allows the user to select a week and year.

HTML Input Attributes

The value Attribute

The input value attribute specifies an initial value for an input field:

The readonly Attribute

The input readonly attribute specifies that an input field is read-only.

A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text
from it).

The value of a read-only input field will be sent when submitting the form!

<input type="text" id="fname" name="fname" value="John" readonly><br>

The disabled Attribute

The input disabled attribute specifies that an input field should be disabled.

A disabled input field is unusable and un-clickable.

The value of a disabled input field will not be sent when submitting the form!

<input type="text" id="fname" name="fname" value="John" disabled><br>

The size Attribute

The input size attribute specifies the visible width, in characters, of an input field.

The default value for size is 20.

Note: The size attribute works with the following input types: text, search, tel, url, email, and password.

<input type="text" id="fname" name="fname" size="50"><br>

The maxlength Attribute

The input maxlength attribute specifies the maximum number of characters allowed in an input field.

<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">

The multiple Attribute

The input multiple attribute specifies that the user is allowed to enter more than one value in an input
field.

The multiple attribute works with the following input types: email, and file.

<label for="files">Select files:</label>

<input type="file" id="files" name="files" multiple>

The pattern Attribute

The input pattern attribute specifies a regular expression that the input field's value is checked against,
when the form is submitted.

The pattern attribute works with the following input types: text, date, search, url, tel, email, and
password.

<label for="country_code">Country code:</label>

<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">

The placeholder Attribute

The input placeholder attribute specifies a short hint that describes the expected value of an input field
(a sample value or a short description of the expected format).

The short hint is displayed in the input field before the user enters a value.

The placeholder attribute works with the following input types: text, search, url, tel, email, and
password.

<input type="tel" id="phone" name="phone"

placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{3}">

The required Attribute

The input required attribute specifies that an input field must be filled out before submitting the form.

The required attribute works with the following input types: text, search, url, tel, email, password, date
pickers, number, checkbox, radio, and file.

<input type="text" id="username" name="username" required>

The step Attribute

The input step attribute specifies the legal number intervals for an input field.

Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.

Tip: This attribute can be used together with the max and min attributes to create a range of legal
values.

The step attribute works with the following input types: number, range, date, datetime-local, month,
time and week.
<label for="points">Points:</label>
<input type="number" id="points" name="points" step="3">

The autofocus Attribute

The input autofocus attribute specifies that an input field should automatically get focus when the page
loads.

<input type="text" id="fname" name="fname" autofocus><br>

The autocomplete Attribute

The input autocomplete attribute specifies whether a form or an input field should have autocomplete
on or off.

Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser
should display options to fill in the field, based on earlier typed values.

The autocomplete attribute works with <form> and the following <input> types: text, search, url, tel,
email, password, datepickers, range, and color.

<form action="/action_page.php" autocomplete="on">

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" ><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>

HTML Multimedia

Multimedia comes in many different formats. It can be almost anything you can hear or see, like
images, music, sound, videos, records, films, animations, and more.

Web pages often contain multimedia elements of different types and formats.

HTML Video
The HTML <video> element is used to show a video on a web page.

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>

The controls attribute adds video controls, like play, pause, and volume.

It is a good idea to always include width and height attributes. If height and width are not set,
the page might flicker while the video loads.

The <source> element allows you to specify alternative video files which the browser may
choose from. The browser will use the first recognized format.

The text between the <video> and </video> tags will only be displayed in browsers that do not
support the <video> element.

HTML <video> Autoplay

To start a video automatically, use the autoplay attribute:

<video width="320" height="240" autoplay>

HTML Audio
The HTML <audio> element is used to play an audio file on a web page.

<audio controls>
<source src="[Link]" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

The controls attribute adds audio controls, like play, pause, and volume.

The <source> element allows you to specify alternative audio files which the browser may
choose from. The browser will use the first recognized format.

The text between the <audio> and </audio> tags will only be displayed in browsers that do not
support the <audio> element.

HTML <audio> Autoplay

To start an audio file automatically, use the autoplay attribute:

<audio controls autoplay>

Add muted after autoplay to let your audio file start playing automatically (but muted):
<audio controls autoplay muted>