Scribd
Upload
2 views33 pages

HTML Css Module Makaut

The document provides a comprehensive overview of HTML, including its basic structure, key tags, formatting options, and various elements such as lists, tables, and forms. It explains the significance of HTML as a markup language used for web page creation and details the syntax and usage of different HTML tags. Additionally, it covers HTML versions and introduces frames for organizing content within a browser window.

Uploaded by

sabujadak006
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views33 pages

HTML Css Module Makaut

The document provides a comprehensive overview of HTML, including its basic structure, key tags, formatting options, and various elements such as lists, tables, and forms. It explains the significance of HTML as a markup language used for web page creation and details the syntax and usage of different HTML tags. Additionally, it covers HTML versions and introduces frames for organizing content within a browser window.

Uploaded by

sabujadak006
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Part-1

Chapter- 2
Part-1
HTML Basics HTML:
Introduction, Basic Structure of HTML,
Head Section and Elements of Head
Section, Formatting Tags: Bold, Italic,
Underline, Strikethrough, Div, Pre Tag
Anchor links and Named Anchors Image
Tag, Paragraphs, Comments, Tables:
Attributes –(Border, Cellpadding, Cell
spacing , height , width), TR, TH, TD, Basics of Web Design
Rowspan, Colspan Lists : Ordered List ,
Unordered List , Definition List,
Forms,Form Elements, Input types, Input
Attributes, Text Input Text Area,
Dropdown, Radio buttons , Check boxes,
Submit and Reset Buttons Frames:
Frameset, nested Frames.
HTML
HTML stands for Hyper Text Markup Language. It is a formatting language used to define
the appearance and contents of a web page. It allows us to organize text, graphics, audio,
and video on a web [Link] Points:
The word Hypertext refers to the text which acts as a link.
The word markup refers to the symbols that are used to define structure of the text. The
markup symbols tells the browser how to display the text and are often called tags.
The word Language refers to the syntax that is similar to any other [Link] was
created by Tim Berners-Lee at CERN.

HTML Versions
The following table shows the various versions of HTML:
Version Year
HTML 1.0 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.0 1999
XHTML 2000
HTML5 2012
STRUCTURE OF HTML DOCUMENT
The main component of HTML document is HTML tag. HTML document is written by
using HTML tag. Tag comes in pair and it is written in between (start tag) and (End tag
The first tag of HTML document is <HTML> and the last tag is </HTML>. 7 indicates the
end of that tag. There are mainly four parts of HTML document and they are:
1. HTML tag
2. Head tag
3. body tag
4. Graphics tag

Key Points:
Tags are indicated with pair of angle brackets.
They start with a less than < character and end with a greater than > character. The tag
name is specified between the angle brackets.
Most of the tags usually occur in pair: the start tag and the closing tag.
The start tag is simply the tag name is enclosed in angle bracket whereas the closing tag is
specified including a forward slash /.
Some tags are the empty i.e. they don’t have the closing tag. Tags are not case sensitive.
The starting and closing tag name must be the same. For example <b> hello </i> is invalid
as both are different.
If you don’t specify the angle brackets <> for a tag, the browser will treat the tag name as a
simple text.
The tag can also have attributes to provide additional information about the tag to the
browser.
Basic tags
The following table shows the Basic HTML tags that define the basic web page:
Tag Description
<html> </html> Specifies the document as a web page.
<head> </head> Specifies the descriptive information about the web documents.
<title> </title> Specifies the title of the web page.
<body> </body> Specifies the body of a web document.

Basic HTML Tags


Tag is a command that tells the web browser how to display the text, audio, graphics or
video on a web [Link] tags defines that how web browser will format and display the
content. HTML tags are nothing but like keywords by the help of which a browser can
distinguish between an HTML content and a simple content. HTML tags have three main
parts: opening tag content and closing tag. But some have unclosed tags.
SYNTAX:

<Tag name>........... </tag name>

The following should be noted:

 All tags must enclosed within <> brackets.


 Every tag in HTML parform different tasks.
 When a opening tag <tag> is used, then it must be closed by <tag> (except some
tags).

The systax is-

HTML TAG

<html>...........</html>

It is the root element of HTML document and all other elements or contained in it. The
following example will clear the concept-

<html>

HTML Text starts here

</html>
HEAD TAG

In this page tile or title heading resides. Head tag starts with <head> tag and ends with
</head>. See the following example-

<html>

<head>

<title> welcome to IT systems </title> </head>

</html>

The <head> tag is a container for metadata (data about data) and is placed between the
<html> tag as shown above. Metadata is not displayed.

BODY TAG

The <body> tag contains the main subject matter of the web page. It must be the second
element after the <head> tag or it should be placed between <head> and </html> tag. This
is required for every HTML document and should only use once in the whole HTML
document see the following syntax-

The following code shows how to use basic tags.


<html>
<head> Heading goes here… </head>
<title> Title goes here… </title>
<body> Body goes here… </body>
</html>

EXAMPLE:

<html>
<head>
<title> Introduction to IT systems </title>
</head>
<body> welcome to IT systems introduced in new syllabus of 1st year second sem in
Diploma Engineering.
</body>
</html>
Some useful tags are listed in the following table-

TAG NAME DESCRIPTION

<!--...--> A comment text in the source code is


described

<!doctype> Defines a document type

<a> used for link in internal/external web


documents

<head> …. </head> The element contains meta information


about the HTML page

<title> …… </title> The element specifies a title for the HTML


page (which is shown in the browser's title
bar or in the page's tab)

<body> …… </body> The element defines the document's body,


and is a container for all the visible contents,
such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.

<h1> …… </h1> The element defines a large heading

<p> …… </p> The element defines a paragraph


Formatting Tags
The following table shows the HTML tags used for formatting the text:

Tag Description
<b> </b> Specifies the text as bold. Eg. this is bold text
<em> </em> It is a phrase text. It specifies the emphasized text. Eg. Emphasized
text
<strong> </strong> It is a phrase tag. It specifies an important text. Eg. this is strong text
<i> </i> The content of italic tag is displayed in italic. Eg. Italic text
<sub> </sub> Specifies the subscripted text. Eg. X1
<sup> </sup> Defines the superscripted text. Eg. X2
<ins> </ins> Specifies the inserted text. Eg. The price of pen is now 2015.
<del> </del> Specifies the deleted text. Eg. The price of pen is now 2015.
<mark> </mark> Specifies the marked text. Eg. It is raining

Table Tags
Following table describe the commonaly used table tags:

Tag Description
<table> </table> Specifies a table.
<tr> </tr> Specifies a row in the table.
<th> </th> Specifies header cell in the table.
<td> </td> Specifies the data in an cell of the table.
<caption> </caption> Specifies the table caption.
<colgroup> </colgroup> Specifies a group of columns in a table for formatting.

List tags
Following table describe the commonaly used list tags:

Tag Description
<ul> </ul> Specifies an unordered list.
<ol> </ol> Specifies an ordered list.
<li> </li> Specifies a list item.
<dl> </dl> Specifies a description list.
<dt> </dt> Specifies the term in a description list.
<dd> </dd> Specifies description of term in a description list.
Frames
Frames help us to divide the browser’s window into multiple rectangular regions. Each
region contains separate html web page and each of them work independently.
A set of frames in the entire browser is known as frameset. It tells the browser how to
divide browser window into frames and the web pages that each has to load.
The following table describes the various tags used for creating frames:
Tag Description

<frameset> It is replacement of the <body> tag. It doesn’t contain the tags that are
</frameset> normally used in <body> element; instead it contains the <frame>
element used to add each frame.

<frame> Specifies the content of different frames in a web page.


</frame>

<base> It is used to set the default target frame in any page that contains links
</base> whose contents are displayed in another frame.

HTML Tags Chart

Tag Name Code Example


<!-- comment <!--This can be viewed in the HTML part of a document-->

<a - anchor <a href="[Link] Visit Our Site</a>


<b> bold <b>Example</b>
<big> big (text) <big>Example</big>
body of HTML
<body> documen t <body>The content of your HTML
page</body>

<br> line break The contents of your page<br>The contents of your page

<center center <center>This will center your contents</center>


>
<dl>
<dt>Definition Term</dt>
definition <dd>Definition of the term</dd>
<dd> descripti on <dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>
<dl>
<dt>Definition Term</dt>
<dl> definition list <dd>Definition of the term</dd>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>
<dl>
<dt>Definition Term</dt>
<dt> definition term <dd>Definition of the term</dd>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>
<em> emphasis This is an <em>Example</em> of using the emphasis tag

<embed embed <embed src="[Link]" width="100%" height="60"


> object align="center">
<embed src="[Link]" autostart="true" hidden="false"
loop="false">
<noembed><bgsound src="[Link]"
<embed embed loop="1"></noembed>
> object

<font> font <font face="Times New Roman">Example</font>

<font> font <font face="Times New Roman"


size="4">Example</font>
<font> font <font face="Times New Roman" size="+3"
color="#ff0000">Example</font>
<form action="[Link] ">
Name: <input name="Name" value=""
size="10"><br>
<form> form Email: <input name="Email" value=""
size="10"><br>
<center><input type="submit"></center>
</form>

<h1> heading 1 <h1>Heading 1 Example</h1>


<h2> heading 2 <h2>Heading 2 Example</h2>
<h3> heading 3 <h3>Heading 3 Example</h3>
<h4> heading 4 <h4>Heading 4 Example</h4>
<h5> heading 5 <h5>Heading 5 Example</h5>
<h6> heading 6 <h6>Heading 6 Example</h6>
heading of HTML
<head> documen t <head>Contains elements describing the
document</head>
horizonta l rule
<hr> <hr />

horizonta l rule
<hr> <hr width="50%" size="3" />

horizonta l rule
<hr> <hr width="50%" size="3" noshade />
<hr> horizonta l rule <hr width="75%" color="#ff0000" size="4"
(Internet />
Explorer)
<hr> horizonta l rule <hr width="25%" color="#6699ff" size="6"
(Internet />
Explorer)
<html>
<head>
<meta>
hypertext markup <title>Title of your web page</title>
<html> language </head>
<body>HTML web page contents
</body>
</html>
<i> italic <i>Example</i>
<img src="[Link]" width="41" height="41"
<img> image border="0" alt="text describing the image" />

Example 1:
<form method=post action="/cgi-
input field bin/[Link]">
<input> <input type="text" size="10"
maxlength="30">
<input type="Submit" value="Submit">
</form>
Example 2:
<form method=post action="/cgi-
bin/[Link]">
<input type="text" style="color: #ffffff;
<input>
input field font-family: Verdana; font-weight: bold; font- size:
(Internet
12px; background-color: #72a4d2;" size="10"
Explorer)
maxlength="30">
<input type="Submit" value="Submit">
</form>
Example 3:

<form method=post action="/cgi- bin/[Link]">


<table border="0" cellspacing="0"
cellpadding="2"><tr><td bgcolor="#8463ff"><input
<input> input field type="text" size="10" maxlength="30"></td><td
bgcolor="#8463ff" valign="Middle"> <input
type="image" name="submit"
src="[Link]"></td></tr> </table>
</form>
Example 4:
<form method=post action="/cgi- bin/[Link]">
Enter Your Comments:<br>
<textarea wrap="virtual" name="Comments" rows=3
input field cols=20 maxlength=100></textarea><br>
<input>
<input type="Submit" value="Submit">
<input type="Reset" value="Clear">
</form>

Example 5:
<form method=post action="/cgi- bin/[Link]">
<center>
Select an option:
<select>
<option >option 1</option>
<option selected>option 2</option>
input field <option>option 3</option>
<input> <option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
<input type="Submit"
value="Submit"></center>
</form>
<input> input field Example 6:
<form method=post action="/cgi- bin/[Link]">
Select an option:<br>
<input type="radio" name="option"> Option 1
<input type="radio" name="option" checked> Option
2
<input type="radio" name="option"> Option 3
<br>
<br>
Select an option:<br>
<input type="checkbox" name="selection">
Selection 1
<input type="checkbox" name="selection" checked>
Selection 2
<input type="checkbox" name="selection">
Selection 3
<input type="Submit" value="Submit">
</form>
Example 1:
<menu>
<li type="disc">List item 1</li>
<li type="circle">List item 2</li>
<li type="square">List item 3</li>
</MENU>
<li> list item Example 2:
<ol type="i">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
<head>
<link> link <link rel="stylesheet" type="text/css" href="[Link]"
/>
</head>

<marquee
> scrolling text <marquee bgcolor="#cccccc" loop="-1"
(Internet scrollamount="2" width="100%">Example
Explorer) Marquee</marquee>
<menu>
<li type="disc">List item 1</li>
<menu> menu <li type="circle">List item 2</li>
<li type="square">List item 3</li>
</menu>
<meta name="Description" content="Description of
<meta> meta your site">
<meta name="keywords" content="keywords
describing your site">
<meta HTTP-EQUIV="Refresh"
<meta> meta CONTENT="4;URL=[Link]
om/">

<meta> meta <meta http-equiv="Pragma" content="no- cache">


<meta> meta <meta name="rating" content="General">
<meta> meta <meta name="robots" content="all">
<meta> meta <meta name="robots" content="noindex,follow">
Numbered
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
Numbered Special Start
<ol start="5">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
Lowercase Letters
<ol type="a">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
<ol> ordered list
Capital Letters
<ol type="A">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
Capital Letters Special Start
<ol type="A" start="3">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
Lowercase Roman Numerals
<ol type="i">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Capital Roman Numerals

<ol type="I">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
Capital Roman Numerals Special Start

<ol type="I" start="7">


<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
<form method=post action="/cgi- bin/[Link]">
<center>
Select an option:
<select>
<option>option 1</option>
<option selected>option 2</option>
listbox option <option>option 3</option>
<option> <option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
</center>
</form>
This is an example displaying the use of the paragraph
tag. <p> This will create a line break and a space
between lines.
Attributes: Example 1:<br>
<br>
<p align="left">
This is an example<br> displaying the
use<br>
of the paragraph tag.<br>
<br>
Example 2:<br>
<br>
paragrap h <p align="right"> This is an
<p>
example<br> displaying the use<br>
of the paragraph tag.<br>
<br>
Example 3:<br>
<br>
<p align="center"> This is an
example<br> displaying the use<br>
of the paragraph tag.
<small> small (text) <small>Example</small>

<strike> deleted text <strike>Example</strike>


<strong> strong emphasis <strong>Example</strong>
Example 1:
<table border="4" cellpadding="2" cellspacing="2"
width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Example 2: (Internet Explorer)
<table border="2" bordercolor="#336699"
cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
<table> table </tr>
</table>
Example 3:
<table cellpadding="2" cellspacing="2"
width="100%">
<tr>
<td bgcolor="#cccccc">Column 1</td>
<td bgcolor="#cccccc">Column 2</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
</tr>
</table>
<table border="2" cellpadding="2" cellspacing="2"
width="100%">
table data <tr>
<td> <td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
<div align="center">
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<th> table header <td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
</table>
</div>
documen t title
<title> <title>Title of your HTML page</title>
<table border="2" cellpadding="2" cellspacing="2"
width="100%">
<tr>
<tr> table row <td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
<tt> teletype <tt>Example</tt>
<u> underline <u>Example</u>
Example 1:<br>
<br>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<br>
Example 2:<br>
<ul> unordere d list <ul type="disc">
<li>List item 1</li>
<li>List item 2</li>
<ul type="circle">
<li>List item 3</li>
<li>List item 4</li>
</ul>
</ul>
HTML Attributes
HTML attributes provide additional information about HTML elements.

HTML Attributes

● All HTML elements can have attributes


● Attributes provide additional information about elements
● Attributes are always specified in the start tag
● Attributes usually come in name/value pairs like: name="value"

The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link
goes to:

Example: <a href="[Link] abcd</a>

<html><body>

<h2>The href Attribute</h2>

<p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p>

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

</body></html>

The src Attribute

The <img> tag is used to embed an image in an HTML page. The src attribute specifies the
path to the image to be displayed:

Example : <img src="img_girl.jpg">

There are two ways to specify the URL in the src attribute:

1. Absolute URL - Links to an external image that is hosted on another website

Example: src="[Link]

2. Relative URL - Links to an image that is hosted within the website. Here, the URL does
not include the domain name. If the URL begins without a slash, it will be relative to the
current page. Example: src="img_girl.jpg". If the URL begins with a slash, it will be relative
to the domain. Example: src="/images/img_girl.jpg".
The width and height Attributes

The <img> tag should also contain the width and height attributes, which specify the width
and height of the image (in pixels):

Example : <img src="img_girl.jpg" width="500" height="600">

The alt Attribute

The required alt attribute for the <img> tag specifies an alternate text for an image, if the
image for some reason cannot be displayed. This can be due to a slow connection, or an error
in the src attribute, or if the user uses a screen reader.

Example : <img src="img_girl.jpg" alt="Girl with a jacket">

<html><body><img src="img_girl.jpg" alt="Girl with a jacket">

<p>If we try to display an image that does not exist, the value of the alt attribute will be displayed
instead. </p>

</body></html>

The style Attribute

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

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

<html>
<body>
<h2>The style Attribute</h2>
<p>The style attribute is used to add styles to an element, such as color:</p>
<p style="color:red;">This is a red paragraph.</p>
</body>
</html>
The lang Attribute

You should always include the lang attribute inside the <html> tag, to declare the language
of the Web page. This is meant to assist search engines and browsers.

The following example specifies English as the language:

<!DOCTYPE html>

<html lang="en"><body>...</body>

</html>

Country codes can also be added to the language code in the lang attribute. So, the first two
characters define the language of the HTML page, and the last two characters define the
country.

The following example specifies English as the language and United States as the country:

<!DOCTYPE html>

<html lang="en-US"><body>...</body>

</html>

The title Attribute

The title attribute defines some extra information about an element.

The value of the title attribute will be displayed as a tooltip when you mouse over the
element:

<html>

<body><h2 title="I'm a header">The title Attribute</h2>

<p title="I'm a tooltip">Mouse over this paragraph, to display the title attribute as a tooltip.</p>

</body>

</html>
HTML Attribute Reference
The table below lists all HTML attributes and what elements they can be used within:

Attribute Belongs to Description

Specifies the types of files that the server


accept <input>
accepts (only for type="file")

Specifies the character encodings that are to


accept-charset <form>
be used for the form submission

Specifies a shortcut key to activate/focus an


accesskey Global Attributes
element

Specifies where to send the form-data when a


action <form>
form is submitted

Not supported in Specifies the alignment according to


align
HTML 5. surrounding elements. Use CSS instead

<area>, <img>, Specifies an alternate text when the original


alt
<input> element fails to display

Specifies that the script is executed


async <script>
asynchronously (only for external scripts)

Specifies whether the <form> or the <input>


autocomplete <form>, <input>
element should have autocomplete enabled

<button>, <input>, Specifies that the element should


autofocus
<select>, <textarea> automatically get focus when the page loads
Specifies that the audio/video will start
autoplay <audio>, <video>
playing as soon as it is ready

Not supported in Specifies the background color of an element.


bgcolor
HTML 5. Use CSS instead

Not supported in Specifies the width of the border of an


border
HTML 5. element. Use CSS instead

charset <meta>, <script> Specifies the character encoding

Specifies that an <input> element should be


checked <input> pre- selected when the page loads (for
type="checkbox" or type="radio")

<blockquote>, <del>, Specifies a URL which explains the


cite
<ins>, <q> quote/deleted/inserted text

Specifies one or more classnames for an


class Global Attributes
element (refers to a class in a style sheet)

Not supported in Specifies the text color of an element. Use


color
HTML 5. CSS instead

cols <textarea> Specifies the visible width of a text area

Specifies the number of columns a table cell


colspan <td>, <th>
should span

Gives the value associated with the http-equiv


content <meta>
or name attribute
Specifies whether the content of an element is
contenteditable Global Attributes
editable or not

Specifies that audio/video controls should be


controls <audio>, <video>
displayed

Specifies the URL of the resource to be used


data <object>
by the object

Used to store custom data private to the page


data-* Global Attributes
or application

datetime <del>, <ins>, <time> Specifies the date and time

Specifies that the track is to be enabled if the


default <track> user's preferences do not indicate that another
track would be more appropriate

Specifies that the script is executed when the


defer <script> page has finished parsing (only for external
scripts)

Specifies the text direction for the content in


dir Global Attributes
an element

Specifies that the text direction will be


dirname <input>, <textarea>
submitted

<button>, <fieldset>, Specifies that the specified element/group of


disabled
<input>, <optgroup>, elements should be disabled

<option>, <select>,
<textarea>
Specifies that the target will be downloaded
download <a>, <area>
when a user clicks on the hyperlink

Specifies whether an element is draggable or


draggable Global Attributes
not

Specifies how the form-data should be


enctype <form> encoded when submitting it to the server
(only for method="post")

Specifies which form element(s) a


for <label>, <output>
label/calculation is bound to

<button>, <fieldset>,
Specifies the name of the form the element
form <input>, <label>,
belongs to
<meter>,

<object>, <output>,
<select>, <textarea>

Specifies where to send the form-data when a


formaction <button>, <input>
form is submitted. Only for type="submit"

Specifies one or more headers cells a cell is


headers <td>, <th>
related to

<canvas>, <embed>,
height <iframe>, <img>, Specifies the height of the element
<input>,

<object>, <video>

Specifies that an element is not yet, or is no


hidden Global Attributes
longer, relevant
Specifies the range that is considered to be a
high <meter>
high value

<a>, <area>, <base>,


href Specifies the URL of the page the link goes to
<link>

Specifies the language of the linked


hreflang <a>, <area>, <link>
document

Provides an HTTP header for the


http-equiv <meta>
information/value of the content attribute

id Global Attributes Specifies a unique id for an element

Specifies an image as a server-side image


ismap <img>
map

kind <track> Specifies the kind of text track

<track>, <option>,
label Specifies the title of the text track
<optgroup>

Specifies the language of the element's


lang Global Attributes
content

Refers to a <datalist> element that contains


list <input>
pre- defined options for an <input> element

Specifies that the audio/video will start over


loop <audio>, <video>
again, every time it is finished
Specifies the range that is considered to be a
low <meter>
low value

<input>, <meter>,
max Specifies the maximum value
<progress>

Specifies the maximum number of characters


maxlength <input>, <textarea>
allowed in an element

<a>, <area>, <link>, Specifies what media/device the linked


media
<source>, <style> document is optimized for

Specifies the HTTP method to use when


method <form>
sending form-

min <input>, <meter> Specifies a minimum value

Specifies that a user can enter more than one


multiple <input>, <select>
value

Specifies that the audio output of the video


muted <video>, <audio>
should be muted

<button>, <fieldset>,
name <form>, <iframe>, Specifies the name of the element
<input>,

<map>, <meta>,
<object>, <output>,
<param>,

<select>, <textarea>
Specifies that the form should not be
no validate <form>
validated when submitted

<audio>, <embed>,
onabort <img>, <object>, Script to be run on abort
<video>

on after print <body> Script to be run after the document is printed

Script to be run before the document is


on before print <body>
printed

Script to be run when the document is about


onbeforeunload <body>
to be unloaded

onblur All visible elements. Script to be run when the element loses focus

Script to be run when a file is ready to start


<audio>, <embed>,
oncanplay playing (when it has buffered enough to
<object>, <video>
begin)

Script to be run when a file can be played all


on can play
<audio>, <video> the way to the end without pausing for
through
buffering

Script to be run when the value of the element


onchange All visible elements.
is changed

Script to be run when the element is being


on click All visible elements.
clicked

Script to be run when a context menu is


on context menu All visible elements.
triggered
Script to be run when the content of the
on copy All visible elements.
element is being copied

Script to be run when the cue changes in a


on cue change <track>
<track> element

Script to be run when the content of the


oncut All visible elements.
element is being cut

Script to be run when the element is being


on dbl click All visible elements.
double- clicked

Script to be run when the element is being


on drag All visible elements.
dragged

on dragend All visible elements. Script to be run at the end of a drag operation

Script to be run when an element has been


on dragenter All visible elements.
dragged to a valid drop target

Script to be run when an element leaves a


on drag leave All visible elements.
valid drop target

Script to be run when an element is being


on drag over All visible elements.
dragged over a valid drop target

on drag start All visible elements. Script to be run at the start of a drag operation

Script to be run when dragged element is


on drop All visible elements.
being dropped
on duration Script to be run when the length of the media
<audio>, <video>
change changes

Script to be run when something bad happens


on emptied <audio>, <video> and the file is suddenly unavailable (like
unexpectedly disconnects)

Script to be run when the media has reach the


on ended <audio>, <video> end (a useful event for messages like "thanks
for listening")

<audio>, <body>,
on error <embed>, <img>, Script to be run when an error occurs
<object>,

<script>, <style>,
<video>

on focus All visible elements. Script to be run when the element gets focus

Script to be run when there has been changes


on hash change <body>
to the anchor part of the a URL

Script to be run when the element gets user


on input All visible elements.
input

onkeydown All visible elements. Script to be run when a user is pressing a key

onkeypress All visible elements. Script to be run when a user presses a key

onkeyup All visible elements. Script to be run when a user releases a key
<body>, <iframe>,
Script to be run when the element is finished
onload <img>, <input>,
loading
<link>,

<script>, <style>

on loaded data <audio>, <video> Script to be run when media data is loaded

on loaded meta Script to be run when meta data (like


<audio>, <video>
data dimensions and duration) are loaded

Script to be run just as the file begins to load


on load start <audio>, <video>
before anything is actually loaded

Script to be run when a mouse button is


on mouse down All visible elements.
pressed down on an element

Script to be run as long as the mouse pointer


onmousemove All visible elements.
is moving over an element

Script to be run when a mouse pointer moves


onmouseout All visible elements.
out of an element

Script to be run when a mouse pointer moves


onmouseover All visible elements.
over an element

Script to be run when a mouse button is


onmouseup All visible elements.
released over an element

Script to be run when a mouse wheel is being


onmousewheel All visible elements.
scrolled over an element
Script to be run when the browser starts to
onoffline <body>
work offline

Script to be run when the browser starts to


ononline <body>
work online

Script to be run when a user navigates away


onpagehide <body>
from a page

Script to be run when a user navigates to a


onpageshow <body>
page

Script to be run when the user pastes some


onpaste All visible elements.
content in an element

Script to be run when the media is paused


onpause <audio>, <video>
either by the user or programmatically

Script to be run when the media has started


onplay <audio>, <video>
playing

Script to be run when the media has started


onplaying <audio>, <video>
playing

Script to be run when the window's history


onpopstate <body>
changes.

Script to be run when the browser is in the


onprogress <audio>, <video>
process of getting the media data

Script to be run each time the playback rate


onratechange <audio>, <video> changes (like when a user switches to a slow
motion or fast forward mode).
Script to be run when a reset button in a form
onreset <form>
is clicked.

Script to be run when the browser window is


onresize <body>
being resized.

Script to be run when an element's scrollbar is


onscroll All visible elements.
being scrolled

Script to be run when the user writes


onsearch <input> something in a search field (for
<input="search">)

Script to be run when the seeking attribute is


onseeked <audio>, <video>
set to false indicating that seeking has ended

Script to be run when the seeking attribute is


onseeking <audio>, <video>
set to true indicating that seeking is active

Script to be run when the element gets


onselect All visible elements.
selected

Script to be run when the browser is unable to


onstalled <audio>, <video>
fetch the media data for whatever reason

Script to be run when a Web Storage area is


onstorage <body>
updated
Always Quote Attribute Values

The HTML standard does not require quotes around attribute values.

However, The quotes in HTML, and demands quotes for stricter document types like XHTML.

Good: <a href="[Link] our HTML tutorial</a>

Bad: <a href=[Link] our HTML tutorial</a>

Sometimes you have to use quotes. This example will not display the title attribute correctly,
because it contains a space:

Example : <p title=About abncd>

Single or Double Quotes?

Double quotes around attribute values are the most common in HTML, but single quotes can also
be used.

In some situations, when the attribute value itself contains double quotes, it is necessary to use
single quotes:

<p title='John "ShotGun" Nelson'>

Forms
Forms are used to input the values. These values are sent to the server for processing. Forms uses
input elements such as text fields, check boxes, radio buttons, lists, submit buttons etc. to enter
the data into it.
The following table describes the commonly used tags while creating a form:
Tag Description
<form> </form> It is used to create HTML form.
<input> </input> Specifies the input field.
<textarea> </textarea> Specifies a text area control that allows to enter multi-line text.
<label> </label> Specifies the label for an input element.

You might also like