Unit-1: 10hrs

Synopsis:
Web Design: Origins and evolution of HTML, Basic syntax, Basic text markup, Images, Lists, Tables, Forms,
Frame, Overview and features of HTML5.
CSS: Introduction, Level soft style sheets, Style specification formats, Select or forms, Property value forms, Font
properties, List properties, Color, Alignment of text, The and <span> and <div>tags;Overview and features of
CSS3.
JavaScript: Object orientation and JavaScript; General syntactic characteristics; Primitives, operations, and
expressions; Screen output and keyboard input.

Origins and evolution of HTML

HTML was created by Sir Tim Berners-Lee in late 1991 but was not officially released. It was published in 1995
as HTML 2.0. HTML 4.01 was published in late 1999 and was a major version of HTML.
HTML is a very evolving markup language and has evolved with various versions updating. Long before its
revised standards and specifications are carried in, each version has allowed its user to create web pages in a much
easier and prettier way and make sites very efficient.
• HTML 1.0 was released in 1993 with the intention of sharing information that can be readable and
accessible via web browsers. But not many of the developers were involved in creating websites. So the
language was also not growing.
• Then comes HTML 2.0, published in 1995, which contains all the features of HTML 1.0 along with a few
additional features, which remained the standard markup language for designing and creating websites
until January 1997 and refined various core features of HTML.
• Then comes HTML 3.0, where Dave Raggett introduced a fresh paper or draft on HTML. It included
improved new features of HTML, giving more powerful characteristics for webmasters in designing web
pages. But these powerful features of the new HTML slowed down the browser in applying further
improvements.
• Then comes HTML 4.01, which is widely used and was a successful version of HTML before HTML 5.0,
which is currently released and used worldwide. HTML 5 can be said for an extended version of HTML
4.01, which was published in the year 2012.

A web page is a text file in which a hypertext language is written according to HTML grammar. This HTML code
is displayed by the browser converting it to a web page. Programs in which HTML code is written or modified are
called HTML editors. Many specialized software applications are available online to edit HTML code and create
web pages such as Adobe Dreamweaver, Bluefish, Google Web Designer, Sublime Text, etc.
DOCUMENTS STRUCTURE
Html used predefined tags and attributes to tell the browser how to display content, means in which format,
style, font size, and images to display. Html is a case insensitive language. Case insensitive means there is no
difference in upper case and lower case ( capital and small letters) both treated as the same, for example ‘D’ and
‘d’ both are the same here.
There are generally two types of tags in HTML:

1. Paired Tags: These tags come in pairs. That is they have both opening(< >) and closing(</ >) tags.
2. Empty Tags: These tags do not require to be closed.

Tags and attributes: Tags are individuals of html structure, we have to open and close any tag with a forward
slash like this <h1> </h1>. There are some variations with the tag some of them are self-closing tag which isn’t
required to close and some are empty tag where we can add any attributes in it. Attributes are additional
properties of html tags that define the property of any html tags. i.e. width, height, controls, loops, input, and
autoplay. These attributes also help us to store information in meta tags by using name, content, and type
attributes. Html documents structured mentioned below:
Structure of an HTML Document

An HTML Document is mainly divided into two parts:

• HEAD: This contains the information about the HTML document. For Example, the Title of the page,
version of HTML, Meta Data, etc.
• BODY: This contains everything you want to display on the Web Page.

Every Webpage must contain this code. Below is the complete explanation of each of the tags used in the above
piece of HTML code:
<!DOCTYPE html>: This tag is used to tell the HTML version. This currently tells that the version is HTML
5.0
<html> </html> : <html> is a root element of html. It’s a biggest and main element in complete html
language, all the tags , elements and attributes enclosed in it or we can say wrap init , which is used to structure
a web page. <html> tag is parent tag of <head> and <body> tag , other tags enclosed within <head > and
<body>. In <html > tag we use “lang” attributes to define languages of html page such as <html lang=”en”>
here en represents English language. Some of them are : es = Spanish , zh-Hans = Chinese, fr= french and el=
Greek etc.
<head>: Head tag contains metadata, title, page CSS etc. Data stored in the <head> tag is not displayed to the
user, it is just written for reference purposes and as a watermark of the owner.

HTML Formatting Elements

Formatting elements were designed to display special types of text:
• <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

HTML <b> and <strong> Elements

The HTML <b> element defines bold text, without any extra importance.
Example
<b>This text is bold</b>
The HTML <strong> element defines text with strong importance. The content inside is typically displayed in
bold.
Example
<strong>This text is important!</strong>

HTML <i> and <em> Elements

The HTML <i> element defines a part of text in an alternate voice or mood. The content inside is typically
displayed in italic.
Tip: The <i> tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name,
etc.
Example
<i>This text is italic</i>
The HTML <em> element defines emphasized text. The content inside is typically displayed in italic.
Tip: A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.
Example
<em>This text is emphasized</em>

HTML <small> Element

The HTML <small> element defines smaller text:
Example
<small>This is some smaller text.</small>

HTML <mark> Element

The HTML <mark> element defines text that should be marked or highlighted:
Example
<p>Do not forget to buy <mark>milk</mark> today.</p>

HTML <del> Element

The HTML <del> element defines text that has been deleted from a document. Browsers will usually strike a line
through deleted text:
Example
<p>My favorite color is <del>blue</del> red.</p>

HTML <ins> Element

The HTML <ins> element defines a text that has been inserted into a document. Browsers will usually underline
inserted text:
Example
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

HTML <sub> Element

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:
Example
<p>This is _subscripted text.</p>
HTML <sup> Element
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, like WWW[1]:
Example
<p>This is ^{superscripted} text.</p>
HTML Text Formatting Elements(html text markup)

Tag Description

<b> Defines bold text

<em> Defines emphasized text

<i> Defines a part of text in an alternate voice or mood

<small> Defines smaller text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

 <mark> Defines marked/highlighted text

HTML Images
Images can improve the design and the appearance of a web page.
Example
<img src="mountain.jpg" alt="Indian mountains">
HTML Images Syntax

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

Syntax

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

The src Attribute

The required src attribute specifies the path (URL) to the image.

Note: When a web page loads, it is the browser, at that moment, that gets the image from a web server and inserts
it into the page. Therefore, make sure that the image actually stays in the same spot in relation to the web page,
otherwise your visitors will get a broken link icon. The broken link icon and the alt text are shown if the browser
cannot find the image.

Example
<img src="flower.jpg" alt="Flowers in India">

The alt Attribute

The required alt attribute provides an alternate text for an image, if the user for some reason cannot view it
(because of slow connection, an error in the src attribute, or if the user uses a screen reader).

Example
<img src="wrongname.gif" alt="Flowers in India">
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;">

Alternatively, you can use the width and height attributes:

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

The width and height attributes always define the width and height of the image in pixels.

Note: Always specify the width and height of an image. If width and height are not specified, the web page might
flicker while the image loads.

Width and Height, or Style?

The width, height, and style attributes are all valid in HTML.

However, we suggest using the style attribute. It prevents styles sheets from changing the size of images:

Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>

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="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

Notes on external images: External images might be under copyright. If you do not get permission to use it, you
may be in violation of copyright laws. In addition, you cannot control external images; they can suddenly be
removed or changed.

Animated Images

HTML allows animated GIFs:

Example
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">

Image as a Link

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

Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

Abbreviation File Format File Extension

APNG Animated Portable Network .apng

Graphics

GIF Graphics Interchange Format .gif

ICO Microsoft Icon .ico, .cur

 JPEG Joint Photographic Expert Group .jpg, .jpeg, .jfif, .pjpeg,
image .pjp

PNG Portable Network Graphics .png

SVG Scalable Vector Graphics .svg

HTML Lists
Example

An unordered HTML list:

• Item
• Item
• Item
• Item

An ordered HTML list:

1. First item
2. Second item
3. Third item
4. Fourth item

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:

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

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:

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

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:

Tag Description

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term in a description list

 <dd> Describes the term in a description list

example

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

HTML List Tags

Unordered HTML List - Choose List Item Marker

The CSS list-style-type property is used to define the style of the list item marker. It can have one of the following
values:

Value Description

disc Sets the list item marker to a bullet (default)

circle Sets the list item marker to a circle

square Sets the list item marker to a square

none The list items will not be marked

Example - Disc
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Example - Circle
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Example - Square
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Example - None
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Nested HTML Lists

Lists can be nested (list inside list):

Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

Note: A list item (<li>) can contain a new list, and other HTML elements, like images and links, etc.

HTML Ordered Lists

The HTML <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.

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:

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

Ordered HTML List - The Type Attribute

The type attribute of the <ol> tag, defines the type of the list item marker:

Type Description

type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman numbers

type="i" The list items will be numbered with lowercase roman numbers

Numbers:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Uppercase Letters:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Lowercase Letters:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Uppercase Roman Numbers:

<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>

Lowercase Roman Numbers:

<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Control List Counting

By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you
can use the start attribute:

Example
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Nested HTML Lists

Lists can be nested (list inside list):

Example
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>

HTML also supports description lists.

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

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

HTML Tables

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

Example

Company Contact Country

Wipro John India

 Centro commercial factory Francisco Mexico

Ernst& Young Rajeev UK

Island Trading Helen Bennett UK

Adobe Charles US

Boat Aman India

Define an HTML Table

A table in HTML consists of table cells inside rows and columns.

Example

A simple HTML table:

<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Wipro</td>
<td>John</td>
<td>India</td>
</tr>
<tr>
<td>Centro commercial factory</td>
<td>Francisco </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.

Example
<table>
<tr>
<td>Emily</td>
<td>Tyler</td>
<td>Jenna</td>
</tr>
</table>

Note: A table cell can contain all sorts of HTML elements: text, images, lists, links, other tables, etc.

Table Rows

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

tr stands for table row.

Example
<table>
<tr>
<td>Emily</td>
<td>Tyler</td>
<td>Jenna</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>

You can have as many rows as you like in a table; just make sure that the number of cells are the same in each
row.

Note: There are times when a row can have less or more cells than another. You will learn about that in a later
chapter.
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.

Example

Let the first row be table header cells:

<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emily</td>
<td>Tyler</td>
<td>Jenna</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>

HTML Table Tags

Tag Description

<table> Defines a table

<th> Defines a header cell in a table

<tr> Defines a row in a table

 <td> Defines a cell in a table

<caption> Defines a table caption

<colgroup> Specifies a group of one or more columns in a table for formatting

<col> Specifies column properties for each column within a <colgroup>

element

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

HTML Table Borders

HTML tables can have borders of different styles and shapes.

How To Add a Border

To add a border, use the CSS border property on table, th, and td elements:
Example
table, th, td {
border: 1px solid black;
}

Collapsed Table Borders

To avoid having double borders like in the example above, set the CSS border-collapse property to collapse.

This will make the borders collapse into a single border:

Example

table, th, td {
border: 1px solid black;
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:

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

Example
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.

Example

th, td {
border-style: dotted;
}

Border Color

With the border-color property, you can set the color of the border.
Example
th, td {
border-color: #96D4D4;
}
HTML Table Padding & Spacing

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

With Spacing

hello hello hello

hello hello hello

hello hello hello

With Padding

hello hello hello

hello hello hello

hello hello hello

HTML Table - 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:

Example
th, td {
padding: 15px;
}

To add padding only above the content, use the padding-top property.

And the others sides with the padding-bottom, padding-left, and padding-right properties:

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

HTML Table - 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:

Example
table {
border-spacing: 30px;
}

HTML Table Colspan & Rowspan

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

NAME
 2022
APRIL

FIESTA

HTML Table - Colspan

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

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

Note: The value of the colspan attribute represents the number of columns to span.

HTML Table - Rowspan

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

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

Note: The value of the rowspan attribute represents the number of rows to span.

HTML Forms

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

Example
First name:
John

Last name:
Doe

Submit

Bottom of Form

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.

All the different form elements are covered in this chapter: HTML Form Elements.

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 Displays a checkbox (for selecting zero or more of many

type="checkbox"> choices)

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

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

All the different input types are covered in this chapter: HTML Input Types.

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>

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

First name:

Last name:

Note: The form itself is not visible. Also note that the default width of an input field is 20 characters.

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.

Example

A form with radio buttons:

<p>Choose your favorite Web language:</p>

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

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.

Example

A form with checkboxes:

<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>

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.

Example

A form with a 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>

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

First name:
John

Last name:
Doe

Submit

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.

Example

This example will not submit the value of the "First name" input field:

<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

This chapter describes the different attributes for the HTML <form> element.

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.

In the example below, the form data is sent to a file called "action_page.php". This file contains a server-side
script that handles the form data:
Example

On submit, send form data to "action_page.php":

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

Tip: If the action attribute is omitted, the action is set to the current page.

The Target Attribute

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

The target attribute can have one of the following values:

Value Description

_blank The response is displayed in a new window or tab

_self The response is displayed in the current window

_parent The response is displayed in the parent frame

_top The response is displayed in the full body of the window

framename The response is displayed in a named iframe

The default value is _self which means that the response will open in the current window.
Example

Here, the submitted result will open in a new browser tab:

<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").

The default HTTP method when submitting form data is GET.

Example

This example uses the GET method when submitting the form data:

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

Example

This example uses the POST method when submitting the form data:

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

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

Tip: Always use POST if the form data contains sensitive or personal information!

HTML Form Elements

This chapter describes all the different HTML form elements.

The HTML <form> Elements

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

• <input>
• <label>
• <select>
• <textarea>
• <button>
• <fieldset>
• <legend>
• <datalist>
• <output>
• <option>
• <optgroup>

The <input> Element

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

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

Example
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

All the different values of the type attribute are covered in the next chapter: HTML Input Types.

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 <label> element also help 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.

The <select> Element

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

Example
<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> element defines an option that can be selected.

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

To define a pre-selected option, add the selected attribute to the option:

Example
<option value="fiat" selected>Fiat</option>

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 rows attribute specifies the visible number of lines in a text area.

The cols attribute specifies the visible width of a text area.

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

You can also define the size of the text area by using CSS:

Example
<textarea name="message" style="width:200px; height:600px;">
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>

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

Click Me!

Note: Always specify the type attribute for the button element. Different browsers may use different default types
for the button element.

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>

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

Personalia:First name:
John

Last name:
Doe

Submit

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="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>

HTML Input Types

Here are the different input types you can use in HTML:

• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">

Tip: The default value of the type attribute is "text".

Input Type Text

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

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

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

First name:

Last name:

Input Type Password

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

Example
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>

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

Username:

Password:

The characters in a password field are masked (shown as asterisks or circles).

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.

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

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

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

First name:
John

Last name:
Doe
 Submit

If you omit the submit button's value attribute, the button will get a default text:

Example
<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">
</form>

Input Type Reset

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

Example
<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" value="Reset">
</form>

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

First name:
John

Last name:
Doe

Submit Reset

If you change the input values and then click the "Reset" button, the form-data will be reset to the default values.

Input Type Radio

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

Radio buttons let a user select ONLY ONE of a limited number of choices:
Example
<p>Choose your favorite Web language:</p>

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

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

HTML
CSS
JavaScript

Input Type Checkbox

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

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

Example
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>

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

Input Type Button

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

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

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

Input Type Color

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

Depending on browser support, a color picker can show up in the input field.

Example
<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>

Input Type Date

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

Depending on browser support, a date picker can show up in the input field.

Example
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>

You can also use the min and max attributes to add restrictions to dates:

Example
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>

Input Type Email

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

Depending on browser support, the e-mail address can be automatically validated when submitted.
Some smartphones recognize the email type, and add ".com" to the keyboard to match email input.

Example
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>

Input Type Image

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

The path to the image is specified in the src attribute.

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

Input Type File

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

Example
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>

Input Type Hidden

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

A hidden field lets web developers include data that cannot be seen or modified by users when a form is submitted.

A hidden field often stores what database record that needs to be updated when the form is submitted.

Note: While the value is not displayed to the user in the page's content, it is visible (and can be edited) using any
browser's developer tools or "View Source" functionality. Do not use hidden inputs as a form of security!

Example
<form>
<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="submit" value="Submit">
</form>

Input Type Month

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

Depending on browser support, a date picker can show up in the input field.

Example
<form>
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>

Input Type Number

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

You can also set restrictions on what numbers are accepted.

The following example displays a numeric input field, where you can enter a value from 1 to 5:

Example
<form>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

The following example displays a numeric input field, where you can enter a value from 0 to 100, in steps of 10.
The default value is 30:

Example
<form>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>

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:
Example
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>

Input Type Search

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

Example
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>

Input Type Time

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

Depending on browser support, a time picker can show up in the input field.

Example
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>

Input Type Url

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

Depending on browser support, the url field can be automatically validated when submitted.

Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.

Example
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>

Input Type Week

The <input type="week"> allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input field.

Example
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>

HTML5 is the next major revision of the HTML standard HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is
a standard for structuring and presenting content on the World Wide Web.

HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application
Technology Working Group (WHATWG).

The new standard incorporates features like video playback and drag-and-drop that have been previously
dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears.

The HTML 5 language has a "custom" HTML syntax that is compatible with HTML 4 and XHTML1 documents
published on the Web, but is not compatible with the more esoteric SGML features of HTML 4.

HTML 5 does not have the same syntax rules as XHTML where we needed lower case tag names, quoting our
attributes, an attribute had to have a value and to close all empty elements.

HTML5 comes with a lot of flexibility and it supports the following features −

• Uppercase tag names.

• Quotes are optional for attributes.

• Attribute values are optional.

• Closing empty elements are optional.

The DOCTYPE

DOCTYPEs in older versions of HTML were longer because the HTML language was SGML based and therefore
required a reference to a DTD.

HTML 5 authors would use simple syntax to specify DOCTYPE as follows −

<!DOCTYPE html>

The above syntax is case-insensitive.

Character Encoding

HTML 5 authors can use simple syntax to specify Character Encoding as follows −

<meta charset = "UTF-8">

The above syntax is case-insensitive.

The <script> tag

It's common practice to add a type attribute with a value of "text/javascript" to script elements as follows −

<script type = "text/javascript" src = "scriptfile.js"></script>

HTML 5 removes extra information required and you can use simply following syntax −

<script src = "scriptfile.js"></script>

The <link> tag

So far you were writing <link> as follows −

<link rel = "stylesheet" type = "text/css" href = "stylefile.css">

HTML 5 removes extra information required and you can simply use the following syntax −

<link rel = "stylesheet" href = "stylefile.css">

HTML5 Elements

HTML5 elements are marked up using start tags and end tags. Tags are delimited using angle brackets with the tag
name in between.

The difference between start tags and end tags is that the latter includes a slash before the tag name.

Following is the example of an HTML5 element −

<p>...</p>

HTML5 tag names are case insensitive and may be written in all uppercase or mixed case, although the most
common convention is to stick with lowercase.

Most of the elements contain some content like <p>...</p> contains a paragraph. Some elements, however, are
forbidden from containing any content at all and these are known as void elements. For example, br, hr, link,
meta, etc.

Here is a complete list of HTML5 Elements.

HTML5 Attributes

Elements may contain attributes that are used to set various properties of an element.

Some attributes are defined globally and can be used on any element, while others are defined for specific
elements only. All attributes have a name and a value and look like as shown below in the example.

Following is the example of an HTML5 attribute which illustrates how to mark up a div element with an attribute
named class using a value of "example" −

<div class = "example">...</div>

Attributes may only be specified within start tags and must never be used in end tags.
HTML5 attributes are case insensitive and may be written in all uppercase or mixed case, although the most
common convention is to stick with lowercase.

Here is a complete list of HTML5 Attributes.

HTML5 Document

The following tags have been introduced for better structure −

• section − This tag represents a generic document or application section. It can be used together with h1-h6
to indicate the document structure.

• article − This tag represents an independent piece of content of a document, such as a blog entry or
newspaper article.

• aside − This tag represents a piece of content that is only slightly related to the rest of the page.

• header − This tag represents the header of a section.

• footer − This tag represents a footer for a section and can contain information about the author, copyright
information, et cetera.

• nav − This tag represents a section of the document intended for navigation.

• dialog − This tag can be used to mark up a conversation.

• figure − This tag can be used to associate a caption together with some embedded content, such as a
graphic or video.