Scribd
Upload
7 views48 pages

Understanding HTML Basics and Structure

HTML, or Hyper Text Markup Language, is the standard markup language used for creating web pages and applications, consisting of various elements that define the structure and presentation of content. It includes essential components such as tags, attributes, and elements, which help browsers render the content correctly. HTML has evolved through several versions since its inception by Tim Berners-Lee in the late 1980s, with HTML5 being the latest version that supports multimedia and interactive content.

Uploaded by

cooltrick94682
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
7 views48 pages

Understanding HTML Basics and Structure

HTML, or Hyper Text Markup Language, is the standard markup language used for creating web pages and applications, consisting of various elements that define the structure and presentation of content. It includes essential components such as tags, attributes, and elements, which help browsers render the content correctly. HTML has evolved through several versions since its inception by Tim Berners-Lee in the late 1980s, with HTML5 being the latest version that supports multimedia and interactive content.

Uploaded by

cooltrick94682
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

What is HTML: -

HTML is an acronym which stands for Hyper Text Markup Language which is used for
creating web pages and web applications. Let's see what is meant by Hypertext Markup
Language, and Web page.

Hyper Text: Hypertext simply means "Text within Text." A text has a link within it, is a
hypertext. Whenever you click on a link which brings you to a new webpage, you haveclicked
on a hypertext. HyperText is a way to link two or more web pages (HTML documents) with
each other.

Markup language: A markup language is a computer language that is used to applylayout


and formatting conventions to a text document. Markup language makes text more interactive
and dynamic. It can turn text into images, tables, links, etc.

Web Page: A web page is a document which is commonly written in HTML and translated
by a web browser. A web page can be identified by entering an URL. A Webpage can be of
the static or dynamic type. With the help of HTML only, we can create static web pages.

Hence, HTML is a markup language which is used for creating attractive web pages with the
help of styling, and which looks in a nice format on a web browser. An HTMLdocument is
made of many HTML tags and each HTML tag contains different content.

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

A Simple HTML Document


HTML Documents (Basic Structure of HTML Documents)

 All HTML documents must start with a document type declaration: <!DOCTYPE html>.

 The HTML document itself begins with <html> and ends with </html>.

 The visible part of the HTML document is between <body> and </body>.

Let's see a simple example of HTML.

<!DOCTYPE>
<html>
<head>
<title>Web page title</title>
</head>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</html>
Description of HTML Example

<!DOCTYPE>: It defines the document type or it instruct the browser about the version of
HTML.

<html > :This tag informs the browser that it is an HTML document. Text between html tag
describes the web document. It is a container for all other elements of HTML except
<!DOCTYPE>
<head>: It should be the first element inside the <html> element, which contains the
metadata(information about the document). It must be closed before the body tag opens.

<title>: As its name suggested, it is used to add title of that HTML page which appearsat the
top of the browser window. It must be placed inside the head tag and should close
immediately. (Optional)

<body> : Text between body tag describes the body content of the page that is visible to the
end user. This tag contains the main content of the HTML document.

<h1> : Text between <h1> tag describes the first level heading of the webpage.

<p> : Text between <p> tag describes the paragraph of the webpage.

The <!DOCTYPE> Declaration


The <!DOCTYPE> declaration represents the document type, and helps browsers to display web
pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>

Brief History of HTML


In the late 1980's , a physicist, Tim Berners-Lee who was a contractor at CERN, proposed a
system for CERN researchers. In 1989, he wrote a memo proposing an internet based
hypertext system.

Tim Berners-Lee is known as the father of HTML. The first available descriptionof HTML
was a document called "HTML Tags" proposed by Tim in late 1991.

HTML Versions

Since the time HTML was invented there are lots of HTML versions in market, the brief
introduction about the HTML version is given below:
HTML 1.0: The first version of HTML was 1.0, which was the barebones version of HTML
language, and it was released in1991.

HTML 2.0: This was the next version which was released in 1995, and it was standard
language version for website design. HTML 2.0 was able to support extra features such as
form-based file upload, form elements such as text box, option button, etc.

HTML 3.2: HTML 3.2 version was published by W3C in early 1997. This version was
capable of creating tables and providing support for extra options for form elements. It can
also support a web page with complex mathematical equations. It became an official standard
for any browser till January 1997. Today it is practically supported bymost of the browsers.

HTML 4.01: HTML 4.01 version was released on December 1999, and it is a very stable
version of HTML language. This version is the current official standard, and it provides added
support for stylesheets (CSS) and scripting ability for various multimedia elements.

HTML5 : HTML 5 is the newest version of HyperText Markup language. The first draft of
this version was announced in January 2008. There are two major organizations one is W3C
(World Wide Web Consortium), and another one is WHATWG (Web Hypertext Application
Technology Working Group) which are involved in the development of HTML 5 version,
and still, it is under development.

Features of HTML

1) It is a very easy and simple language. It can be easily understood and modified.

2) It is very easy to make an effective presentation with HTML because it has a lot of
formatting tags.

3) It is a markup language, so it provides a flexible way to design web pages alongwith


the text.

4) It facilitates programmers to add a link on the web pages (by html anchor tag), so it
enhances the interest of browsing of the user.

5) It is platform-independent because it can be displayed on any platform like


Windows, Linux, and Macintosh, etc.

6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which
makes it more attractive and interactive.

7) HTML is a case-insensitive language, which means we can use tags either in lower-case or
upper-case.

HTML text Editors


o An HTML file is a text file, so to create an HTML file we can use any text editors.
o Text editors are the programs which allow editing in a written text, hence to create a
web page we need to write our code in some text editor.
o There are various types of text editors available which you can directly download, but
for a beginner, the best text editor is Notepad (Windows) or TextEdit (Mac).
o After learning the basics, you can easily use other professional text editors which
are, Notepad++, Sublime Text, Vim, etc.
A. HTML code with Notepad. (Recommended for Beginners)

Notepad is a simple text editor and suitable for beginners to learn HTML. It is available in all
versions of Windows, from where you easily access it.

Building blocks of HTML


An HTML document consist of its basic building blocks which are:

o Tags: An HTML tag surrounds the content and apply meaning to it. It is
written between < and > brackets.
o Attribute: An attribute in HTML provides extra information about the element, and
it is applied within the start tag.
o An HTML attribute contains two fields: name & value.

Syntax
1. <tag name attribute_name = " attr_value"> content </ tag name>
o Elements: An HTML element is an individual component of an HTML file. In an
HTMLfile, everything written within tags are termed as HTML elements.

What is an HTML Element?


Example:
<!DOCTYPE html>
<html>
<head>
<title>The basic building blocks of HTML</title>
</head>
<body>
<h2>The building blocks</h2>
<p>This is a paragraph tag</p>
<p style="color: red">The style is attribute of paragraph tag</p>
<span>The element contains tag, attribute and content</span>
</body>
</html>
Output:

The building blocks

This is a paragraph tag

The style is attribute of paragraph tag

The element contains tag, attribute and content

Nested HTML Elements


 HTML elements can be nested (this means that elements can contain other elements).

 All HTML documents consist of nested HTML elements.

 The following example contains four HTML elements (<html>, <body>, <h1> and <p>):

Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

Example Explained
 The <html> element is the root element and it defines the whole HTML document.

 It has a start tag <html> and an end tag </html>.

 Then, inside the <html> element there is a <body> element:

<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>

 The <body> element defines the document's body.

 It has a start tag <body> and an end tag </body>.

 Then, inside the <body> element there are two other elements: <h1> and <p>:

<h1>My First Heading</h1>


<p>My first paragraph.</p>

 The <h1> element defines a heading.

 It has a start tag <h1> and an end tag </h1>:

<h1>My First Heading</h1>


 The <p> element defines a paragraph.

 It has a start tag <p> and an end tag </p>:

<p>My first paragraph.</p>

Never Skip the End Tag


Some HTML elements will display correctly, even if you forget the end tag:

Example
<html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>
Empty HTML Elements
 HTML elements with no content are called empty elements.

 The <br> tag defines a line break, and is an empty element without a closing tag:

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

HTML is Not Case Sensitive


 HTML tags are not case sensitive: <P> means the same as <p>.

 The HTML standard does not require lowercase tags, but W3C recommends lowercase in
HTML, and demands lowercase for stricter document types like XHTML.

HTML Tag Reference


 Tag reference contains additional information about these tags and their attributes.

Tag Description
<html> Defines the root of an HTML document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings

For a complete list of all available HTML tags

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>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

HTML Paragraphs
 HTML paragraphs are defined with the <p> tag:

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

HTML Links
 HTML links are defined with the <a> tag:

Example
<a href="[Link] is a link</a>

 The link's destination is specified in the href attribute.

 Attributes are used to provide additional information about HTML elements.

HTML Images
 HTML images are defined with the <img> tag.

 The source file (src), alternative text (alt), width, and height are provided as attributes:

Example

<img src="[Link]" alt="[Link]" width="104" height="142">

HTML Tags
HTML tags are like keywords which defines that how web browser will format and display
the content. With the help of tags, a web browser can distinguish between an HTML content
and a simple content. HTML tags contain three main parts: opening tag,content and closing tag.
But some HTML tags are unclosed tags.

When a web browser reads an HTML document, browser reads it from top to bottom and left
to right. HTML tags are used to create HTML documents and render their properties. Each
HTML tags have different properties.

An HTML file must have some essential tags so that web browser can differentiate between a
simple text and HTML text. You can use as many tags you want as per yourcode requirement.

o All HTML tags must enclosed within < > these brackets.
o Every tag in HTML perform different tasks.
o If you have used an open tag <tag>, then you must use a close tag </tag> (except
some tags)

Syntax

<tag> content </tag>

HTML Tag Examples


Note: HTML Tags are always written in lowercase letters. The basic HTML tags are
given below:

<p> Paragraph Tag </p>


<h2> Heading Tag </h2>

<b> Bold Tag </b>


<i> Italic Tag </i>

<u> Underline Tag</u>

Unclosed HTML Tags

Some HTML tags are not closed, for example br and hr.

<br> Tag: br stands for break line, it breaks the line of the code.

<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.

HTML Meta Tags

DOCTYPE, title, link, meta and style

HTML Text Tags

<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>,
<address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>,
<samp>, <var> and <br>

HTML Link Tags

<a> and <base>

HTML Image and Object Tags

<img>, <area>, <map>, <param> and <object>

HTML List Tags

<ul>, <ol>, <li>, <dl>, <dt> and <dd>

Markup tags

A markup tag is a directive that contains snippet of code with a relative reference to an object in
your store such as a variable, URL, image, or block. Markup tags can be used anywhere the
editor is available and incorporated into the HTML of email and newsletter templates, as well as
other types of content.
Markup tags are enclosed in double, curly braces, and can either be generated by the Widget tool,
or typed directly into HTML content. For example, rather than hard-coding the full path to a
page, you can use a markup tag to represent the store [Link] markup tags featured in the
following examples include:

Custom variable

The Variable markup tag can be used to insert a custom variable into an email template, blocks,
newsletters, and content pages.

{{CustomVar code= “my_custom_variable”}}

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

Example
I am Red

I am Blue

I am Big

The HTML Style Attribute


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

The HTML style attribute has the following syntax:

<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.

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

Example

Set the background color for a page to powderblue:

<body style="background-color:powderblue;">

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

</body>

Example

Set background color for two different elements:


<body>

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


<p style="background-color:tomato;">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>

Summary

 Use the style attribute for styling HTML elements


 Use background-color for background color
 Use color for text colors
 Use font-family for text fonts
 Use font-size for text sizes
 Use text-align for text alignment

HTML Text Formatting


HTML contains several elements for defining text with a special meaning.

Example

This text is bold

This text is italic

This is subscript and superscript

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 <sub>subscripted</sub> 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 <sup>superscripted</sup> text.</p>

HTML Text Formatting Elements


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 Quotation and Citation Elements


In this chapter we will go through the <blockquote>,<q>, <abbr>, <address>, <cite>,
and <bdo> HTML elements.

Example

Here is a quote from WWF's website:

For 60 years, WWF has worked to help people and nature thrive. As
the world's leading conservation organization, WWF works in nearly
100 countries. At every level, we collaborate with people around the
world to develop and deliver innovative solutions that protect
communities, wildlife, and the places in which they live.

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 cite="[Link]
For 60 years, WWF has worked to help people and nature thrive. As the
world's leading conservation organization, WWF works in nearly 100
countries. At every level, we collaborate with people around the world to
develop and deliver innovative solutions that protect communities,
wildlife, and the places in which they live.
</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.

Tip: Use the global title attribute to show the description for the abbreviation/acronym when
you mouse over the element.

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 <cite> for Work Title
The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie,
a painting, a sculpture, etc.).

Note: A person's name is not the title of a work.

The text in the <cite> element usually renders in italic.

Example

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

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 Quotation and Citation Elements


Tag Description
<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a section that is quoted from another source
<cite> Defines the title of a work
<q> Defines a short inline quotation

HTML Comments
HTML comments are not displayed in the browser, but they can help document your HTML
source code.

HTML Comment Tag


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

<!-- Write your comments here -->

Notice that there is an exclamation point (!) in the start tag, but not in the end tag.

Add Comments
With comments you can place notifications and reminders in your HTML code:

Example
<!-- This is a comment -->

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

<!-- Remember to add more information here -->

HTML Colors
HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or
HSLA values.

Color Names

In HTML, a color can be specified by using a color name:

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

HTML supports 140 standard color names.

Background Color
You can set the background color for HTML elements:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.

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:

Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.

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:

Hello World
Hello World
Hello World

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 Tables
HTML tables allow web developers to arrange data into rows and columns.

Example

Company Contact Country


Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

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

Example

<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</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>Emil</td>
<td>Tobias</td>
<td>Linus</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>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
By default, the text in <th> elements are bold and centered, but you can change that with CSS.

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 Lists
HTML lists allow web developers to group a set of related items in 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:

Example

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML List Tags
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
HTML Tag List with Description
Tag Description

<!--...--> Describe a comment text in the source code

<!doctype> Defines a document type

<a> Specific a anchor (Hyperlink)


Use for link in internal/external web documents.

<abbr> Describes an abbreviation (acronyms)

<acronym> Describes an acronyms

<address> Describes an address information

<applet> Embedding an applet in HTML document

<area> Defines an area in an image map

<article> Defines an article

<aside> Describes contain set(or write) on aside place in page contain

<audio> Specific audio content

<b> Specific text weight bold


<base> Define a base URL for all the links with in a web page

<basefont> Describes a default font color, size, face in a document

<bb> Define browser command, that command invoke as per client action NE

<bdo> Specific direction of text display

<big> Defines a big text

<blockquote> Specifies a long quotation

<body> Defines a main section(body) part in HTML document

<br /> Specific a single line break

<button> Specifies a press/push button

<canvas> Specifies the display graphics on HTML web documment

<caption> Define a table caption

<center> Specifies a text is display in center align

<cite> Specifies a text citation

<code> Specifies computer code text


<col> Specifies a each column within a <colgroup> element in table

<colgroup> Defines a group of one or more columns inside table

<command> Define a command button, invoke as per user action

<datagrid> Define a represent data in datagrid either list wise or tree wise NE

<datalist> Define a list of pre-defined options surrounding <input> tag

<dd> Defines a definition description in a definition list

<del> Specific text deleted in web document

<details> Define a additional details hide or show as per user action

<dfn> Define a definition team

<dialog> Define a chat conversation between one or more person NE

<dir> Define a directory list

<div> Define a division part

<dl> Define a definition list

<dt> Define a definition team


<em> Define a text is emphasize format

<embed> Define a embedding external application using a relative plug-in

<eventsource> Defines a source of event generates to remote server NE

<fieldset> Defines a grouping of related form elements

<figcaption> Represents a caption text corresponding with a figure element

<figure> Represents self-contained content corresponding with a <figcaption>


element

<font> Defines a font size, font face and font color for its text

<footer> Defines a footer section containing details about the author, copyright,
contact us, sitemap, or links to related documents.

<form> Defines a form section that having interactive input controls to submit
form information to a server.

<frame> Defines frame window.

<frameset> Used to holds one or more <frame> elements.

<h1> to <h6> Defines a Headings level from 1 to 6 different sizes.

<head> Defines header section of HTML document.


<header> Defines as a container that hold introductory content or navigation links.

<hgroup> Defines the heading of a section that hold the h1 to h6 tags. NE

<hr /> Represent a thematic break between paragraph-level tags. It is typically


draw horizontal line.

<html> Define a document is a HTML markup language

<i> Defines a italic format text

<iframe> Defines a inline frame that embedded external content into current web
document.

<img> Used to insert image into a web document.

<input> Define a get information in selected input

<ins> Used to indicate text that is inserted into a page and indicates changes
to a document.

<isindex> Used to create a single line search prompt for querying the contents of
the document.

<kbd> Used to identify text that are represents keyboard input.

<keygen> Used to generate signed certificate, which is used to authenticate to NE


services.

<label> Used to caption a text label with a form <input> element.


<legend> Used to add a caption (title) to a group of related form elements that are
grouped together into the <fieldset> tag.

<li> Define a list item either ordered list or unordered list.

<link> Used to load an external stylesheets into HTML document.

<map> Defines an clickable image map.

<mark> Used to highlighted (marked) specific text.

<menu> Used to display a unordered list of items/menu of commands.

<meta> Used to provide structured metadata about a web page.

<meter> Used to measure data within a given range.

<nav> Used to defines group of navigation links.

<noframes> Used to provide a fallback content to the browser that does not support
the <frame> element.

<noscript> Used to provide an fall-back content to the browser that does not
support the JavaScript.

<object> Used to embedded objects such as images, audio, videos, Java applets,
and Flash animations.

<ol> Defines an ordered list of items.


<optgroup> Used to create a grouping of options, the related options are grouped
under specific headings.

<option> Represents option items within


a <select>, <optgroup> or <datalist> element.

<output> Used for representing the result of a calculation.

<p> Used to represents a paragraph text.

<param> Provides parameters for embedded object element.

<pre> Used to represents preformatted text.

<progress> Represents the progress of a task.

<q> Represents the short quotation.

<rp> Used to provide parentheses around fall-back content to the browser


that does not support the ruby annotations.

<rt> Specifies the ruby text of ruby annotation.

<ruby> Used to represents a ruby annotation.

<s> Text display in strikethrough style.

<samp> Represents text that should be interpreted as sample output from a


computer program.
<script> Defines client-side JavaScript.

<section> Used to divide a document into number of different generic section.

<select> Used to create a drop-down list.

<small> Used to makes the text one size smaller.

<source> Used to specifies multiple media resources.

<span> Used to grouping and applying styles to inline elements.

<strike> Represents strikethrough text.

<strong> Represents strong emphasis greater important text.

<style> Used to add CSS style to an HTML document.

<sub> Represents inline subscript text.

<sup> Represents inline superscript text.

<table> Used to defines a table in an HTML document.

<tbody> Used for grouping table rows.

<td> Used for creates standard data cell in HTML table.


<textarea> Create multi-line text input.

<tfoot> Used to adding a footer to a table that containing summary of the table
data.

<th> Used for creates header of a group of cell in HTML table.

<thead> Used to adding a header to a table that containing header information of


the table.

<time> Represents the date and/or time in an HTML document.

<title> Represents title to an HTML document.

<tr> Defines a row of cells in a table.

<track> Represents text tracks for both the <audio> and <video> tags.

<tt> Represents teletype text.

<u> Represents underlined text.

<ul> Defines an unordered list of items.

<var> Represents a variable in a computer program or mathematical equation.

<video> Used to embed video content.

<wbr> Defines a word break opportunity in a long string of text.


HTML - Embed Multimedia
Sometimes you need to add music or video into your web page. The easiest way to
add video or sound to your web site is to include the special HTML tag
called <embed>. This tag causes the browser itself to include controls for the
multimedia automatically provided browser supports <embed> tag and given media
type.
You can also include a <noembed> tag for the browsers which don't recognize the
<embed> tag. You could, for example, use <embed> to display a movie of your choice,
and <noembed> to display a single JPG image if browser does not support <embed>
tag.

Example
Here is a simple example to play an embedded midi file −

<!DOCTYPE html>
<html>

<head>
<title>HTML embed Tag</title>
</head>

<body>
<embed src = "/html/[Link]" width = "100%" height = "60" >
<noembed><img src = "[Link]" alt = "Alternative Media" ></noembed>
</embed>
</body>

</html>

The <embed> Tag Attributes


Following is the list of important attributes which can be used with <embed> tag.
Note −The align and autostart attributes deprecated in HTML5. Do not use these
attributes.

[Link] Attribute & Description

1
align
Determines how to align the object. It can be set to either center, left or
right.

2
autostart
This boolean attribute indicates if the media should start automatically.
You can set it either true or false.

3
loop
Specifies if the sound should be played continuously (set loop to true), a
certain number of times (a positive value) or not at all (false)

4
playcount
Specifies the number of times to play the sound. This is alternate option
for loop if you are usiong IE.

5
hidden
Specifies if the multimedia object should be shown on the page. A false
value means no and true values means yes.

6
width
Width of the object in pixels

7
height
Height of the object in pixels

8
name
A name used to reference the object.

9
src
URL of the object to be embedded.

10
volume
Controls volume of the sound. Can be from 0 (off) to 100 (full volume).

Supported Video Types


You can use various media types like Flash movies (.swf), AVI's (.avi), and MOV's
(.mov) file types inside embed tag.
• .swf files − are the file types created by Macromedia's Flash program.
• .wmv files − are Microsoft's Window's Media Video file types.
• .mov files − are Apple's Quick Time Movie format.
• .mpeg files − are movie files created by the Moving Pictures Expert
Group.

<!DOCTYPE html>
<html>

<head>
<title>HTML embed Tag</title>
</head>

<body>
<embed src = "/html/[Link]" width = "200" height = "200" >
<noembed><img src = "[Link]" alt = "Alternative Media" ></noembed>
</embed>
</body>

</html>

Background Audio
You can use HTML <bgsound> tag to play a soundtrack in the background of your
webpage. This tag is supported by Internet Explorer only and most of the other
browsers ignore this tag. It downloads and plays an audio file when the host
document is first downloaded by the user and displayed. The background sound file
also will replay whenever the user refreshes the browser.
Note − The bgsound tag is deprecated and it is supposed to be removed in a future
version of HTML. So they should not be used rather, it's suggested to use HTML5 tag
audio for adding sound. But still for learning purpose, this chapter will explain
bgsound tag in detail.
This tag is having only two attributes loop and src. Both these attributes have same
meaning as explained above.
Here is a simple example to play a small midi file −

<!DOCTYPE html>
<html>

<head>
<title>HTML embed Tag</title>
</head>

<body>
<bgsound src = "/html/[Link]">
<noembed><img src = "[Link]" ></noembed>
</bgsound>
</body>

</html>

This will produce the blank screen. This tag does not display any component and
remains hidden.
HTML Object tag
HTML 4 introduces the <object> element, which offers an all-purpose solution to
generic object inclusion. The <object> element allows HTML authors to specify
everything required by an object for its presentation by a user agent.
Here are a few examples −

Example - 1
You can embed an HTML document in an HTML document itself as follows −
<object data = "data/[Link]" type = "text/html" width = "300" height = "200">
alt : <a href = "data/[Link]">[Link]</a>
</object>
Here alt attribute will come into picture if browser does not support object tag.

Example - 2
You can embed a PDF document in an HTML document as follows −
<object data = "data/[Link]" type = "application/pdf" width = "300" height = "200">
alt : <a href = "data/[Link]">[Link]</a>
</object>
Example - 3
You can specify some parameters related to the document with the <param> tag.
Here is an example to embed a wav file −
<object data = "data/[Link]" type = "audio/x-wav" width = "200" height = "20">
<param name = "src" value = "data/[Link]">
<param name = "autoplay" value = "false">
<param name = "autoStart" value = "0">
alt : <a href = "data/[Link]">[Link]</a>
</object>
Example - 4
You can add a flash document as follows −
<object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id = "penguin"
codebase = "someplace/[Link]" width = "200" height = "300">

<param name = "movie" value = "flash/[Link]" />


<param name = "quality" value = "high" />
<img src = "[Link]" width = "200" height = "300" alt = "Penguin" />
</object>
Example - 5
You can add a java applet into HTML document as follows −
<object classid = "clsid:8ad9c840-044e-11d1-b3e9-00805f499d93"
width = "200" height = "200">
<param name = "code" value = "[Link]">
</object>
The classid attribute identifies which version of Java Plug-in to use. You can use the
optional codebase attribute to specify if and how to download the JRE.
HTML – Forms
HTML Forms are required, when you want to collect some data from the site visitor.
For example, during user registration you would like to collect information such as
name, email address, credit card, etc.
A form will take input from the site visitor and then will post it to a back-end
application such as CGI, ASP Script or PHP script etc. The back-end application will
perform required processing on the passed data based on defined business logic
inside the application.
There are various form elements available like text fields, textarea fields, drop-down
menus, radio buttons, checkboxes, etc.
The HTML <form> tag is used to create an HTML form and it has following syntax −
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>
Form Attributes
Apart from common attributes, following is a list of the most frequently used form
attributes −

[Link] Attribute & Description

1
action
Backend script ready to process your passed data.

2
method
Method to be used to upload data. The most frequently used are GET and
POST methods.

3
target
Specify the target window or frame where the result of the script will be
displayed. It takes values like _blank, _self, _parent etc.

4
enctype
You can use the enctype attribute to specify how the browser encodes the
data before it sends it to the server. Possible values are −
application/x-www-form-urlencoded − This is the standard method
most forms use in simple scenarios.
mutlipart/form-data − This is used when you want to upload binary data
in the form of files like image, word file etc.

Note − You can refer to Perl & CGI for a detail on how form data upload works.

HTML Form Controls


There are different types of form controls that you can use to collect data using HTML
form −

• Text Input Controls


• Checkboxes Controls
• Radio Box Controls
• Select Box Controls
• File Select boxes
• Hidden Controls
• Clickable Buttons
• Submit and Reset Button

Text Input Controls


There are three types of text input used on forms −
• Single-line text input controls − This control is used for items that
require only one line of user input, such as search boxes or names. They
are created using HTML <input> tag.
• Password input controls − This is also a single-line text input but it
masks the character as soon as a user enters it. They are also created
using HTMl <input> tag.
• Multi-line text input controls − This is used when the user is required
to give details that may be longer than a single sentence. Multi-line
input controls are created using HTML <textarea> tag.

Single-line text input controls


This control is used for items that require only one line of user input, such as search
boxes or names. They are created using HTML <input> tag.

Example
Here is a basic example of a single-line text input used to take first name and last
name −

<!DOCTYPE html>
<html>

<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>

</html>

This will produce the following result −

Attributes
Following is the list of attributes for <input> tag for creating text field.

[Link] Attribute & Description

1
type
Indicates the type of input control and for text input control it will be set
to text.

2
name
Used to give a name to the control which is sent to the server to be
recognized and get the value.

3
value
This can be used to provide an initial value inside the control.

4
size
Allows to specify the width of the text-input control in terms of characters.

5
maxlength
Allows to specify the maximum number of characters a user can enter into
the text box.

Password input controls


This is also a single-line text input but it masks the character as soon as a user enters
it. They are also created using HTML <input>tag but type attribute is set
to password.
Example
Here is a basic example of a single-line password input used to take user password

<!DOCTYPE html>
<html>

<head>
<title>Password Input Control</title>
</head>

<body>
<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" />
</form>
</body>

</html>

This will produce the following result −

Attributes
Following is the list of attributes for <input> tag for creating password field.

[Link] Attribute & Description

1
type
Indicates the type of input control and for password input control it will be
set to password.

2
name
Used to give a name to the control which is sent to the server to be
recognized and get the value.

3
value
This can be used to provide an initial value inside the control.

4
size
Allows to specify the width of the text-input control in terms of characters.

5
maxlength
Allows to specify the maximum number of characters a user can enter into
the text box.

Multiple-Line Text Input Controls


This is used when the user is required to give details that may be longer than a single
sentence. Multi-line input controls are created using HTML <textarea> tag.

Example
<!DOCTYPE html>
<html>

<head>
<title>Multiple-Line Input Control</title>
</head>

<body>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>
</body>

</html>

This will produce the following result −

Attributes
Following is the list of attributes for <textarea> tag.

[Link] Attribute & Description

1
name
Used to give a name to the control which is sent to the server to be
recognized and get the value.

2
rows
Indicates the number of rows of text area box.

3
cols
Indicates the number of columns of text area box
Checkbox Control
Checkboxes are used when more than one option is required to be selected. They are
also created using HTML <input> tag but type attribute is set to checkbox..

Example
Here is an example HTML code for a form with two checkboxes −

<!DOCTYPE html>
<html>

<head>
<title>Checkbox Control</title>
</head>

<body>
<form>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>
</body>

</html>

This will produce the following result −

Attributes
Following is the list of attributes for <checkbox> tag.

[Link] Attribute & Description

1
type
Indicates the type of input control and for checkbox input control it will be
set to checkbox..

2
name
Used to give a name to the control which is sent to the server to be
recognized and get the value.

3
value
The value that will be used if the checkbox is selected.

4
checked
Set to checked if you want to select it by default.

Radio Button Control


Radio buttons are used when out of many options, just one option is required to be
selected. They are also created using HTML <input> tag but type attribute is set
to radio.

Example
Here is example HTML code for a form with two radio buttons −

<!DOCTYPE html>
<html>

<head>
<title>Radio Box Control</title>
</head>

<body>
<form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>
</body>

</html>

This will produce the following result −

Attributes
Following is the list of attributes for radio button.

[Link] Attribute & Description

1
type
Indicates the type of input control and for checkbox input control it will be
set to radio.

2
name
Used to give a name to the control which is sent to the server to be
recognized and get the value.

3
value
The value that will be used if the radio box is selected.
4
checked
Set to checked if you want to select it by default.

Select Box Control


A select box, also called drop down box which provides option to list down various
options in the form of drop down list, from where a user can select one or more
options.

Example
Here is example HTML code for a form with one drop down box

<!DOCTYPE html>
<html>

<head>
<title>Select Box Control</title>
</head>

<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>

</html>

This will produce the following result −

Attributes
Following is the list of important attributes of <select> tag −

[Link] Attribute & Description

1
name
Used to give a name to the control which is sent to the server to be
recognized and get the value.

2
size
This can be used to present a scrolling list box.
3
multiple
If set to "multiple" then allows a user to select multiple items from the
menu.

Following is the list of important attributes of <option> tag −

[Link] Attribute & Description

1
value
The value that will be used if an option in the select box box is selected.

2
selected
Specifies that this option should be the initially selected value when the
page loads.

3
label
An alternative way of labeling options

File Upload Box


If you want to allow a user to upload a file to your web site, you will need to use a
file upload box, also known as a file select box. This is also created using the <input>
element but type attribute is set to file.

Example
Here is example HTML code for a form with one file upload box −

<!DOCTYPE html>
<html>

<head>
<title>File Upload Box</title>
</head>

<body>
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>

</html>

This will produce the following result −


Attributes
Following is the list of important attributes of file upload box −

[Link] Attribute & Description

1
name
Used to give a name to the control which is sent to the server to be
recognized and get the value.

2
accept
Specifies the types of files that the server accepts.

Button Controls
There are various ways in HTML to create clickable buttons. You can also create a
clickable button using <input>tag by setting its type attribute to button. The type
attribute can take the following values −

[Link] Type & Description

1
submit
This creates a button that automatically submits a form.

2
reset
This creates a button that automatically resets form controls to their initial
values.

3
button
This creates a button that is used to trigger a client-side script when the
user clicks that button.

4
image
This creates a clickable button but we can use an image as background of
the button.

Example
Here is example HTML code for a form with three types of buttons −
<!DOCTYPE html>
<html>

<head>
<title>File Upload Box</title>
</head>

<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "/html/images/[Link]" />
</form>
</body>

</html>

This will produce the following result −

Hidden Form Controls


Hidden form controls are used to hide data inside the page which later on can be
pushed to the server. This control hides inside the code and does not appear on the
actual page. For example, following hidden form is being used to keep current page
number. When a user will click next page then the value of hidden control will be
sent to the web server and there it will decide which page will be displayed next
based on the passed current page.

Example
Here is example HTML code to show the usage of hidden control −

<!DOCTYPE html>
<html>

<head>
<title>File Upload Box</title>
</head>

<body>
<form>
<p>This is page 10</p>
<input type = "hidden" name = "pagename" value = "10" />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>
</body>

</html>

You might also like