HTML stands for Hyper Text Markup Language,
which is the most widely used language on Web to develop web pages.
HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first
standard HTML specification which was published in 1995.
HTML 4.01 was a major version of HTML and it was published in late 1999.
Though HTML 4.01 version is widely used but currently we are having HTML-
5 version which is an extension to HTML 4.01, and this version was published
in 2012.
Why to Learn HTML?
HTML is a MUST for students and working professionals to become a great
Software Engineer specially when they are working in Web Development
Domain.
Create Web site - You can create a website or customize an existing web
template if you know HTML well.
• Become a web designer - If you want to start a carrer as a professional
web designer, HTML and CSS designing is a must skill.
• Understand web - If you want to optimize your website, to boost its
speed and performance, it is good to know HTML to yield best results.
• Learn other languages - Once you understands the basic of HTML then
other related technologies like javascript, php, or angular are become
easier to understand.
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>welcome to winways</p>
</body>
</html>
Applications of HTML
As mentioned before, HTML is one of the most widely used language over the
web.
• Web pages development - HTML is used to create pages which are
rendered over the web. Almost every page of web is having html tags in it
to render its details in browser.
• Internet Navigation - HTML provides tags which are used to navigate
from one page to another and is heavily used in internet navigation.
• Responsive UI - HTML pages now-a-days works well on all platform,
mobile, tabs, desktop or laptops owing to responsive design strategy.
• Offline support HTML pages once loaded can be made available offline
on the machine without any need of internet.
• Game development- HTML5 has native support for rich experience and
is now useful in gaming developent arena as well.
• Hypertext refers to the way in which Web pages (HTML documents) are
linked together. Thus, the link available on a webpage is called Hypertext.
• As its name suggests, HTML is a Markup Language which means you
use HTML to simply "mark-up" a text document with tags that tell a Web
browser how to structure it to display.
Originally, HTML was developed with the intent of defining the structure of
documents like headings, paragraphs, lists, and so forth to facilitate the sharing
of scientific information between researchers.
Now, HTML is being widely used to format web pages with the help of
different tags available in HTML language.
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>welcome to winways</p>
</body>
</html>
HTML Tags
HTML is a markup language and makes use of various tags to format the
content. These tags are enclosed within angle braces <Tag Name>. Except few
tags, most of the tags have their corresponding closing tags. For example,
<html> has its closing tag </html> and <body> tag has its closing tag </body>
tag etc.
Above example of HTML document uses the following tags −
Sr.N
Tag & Description
o
<!DOCTYPE...>
1
This tag defines the document type and HTML version.
<html>
This tag encloses the complete HTML document and mainly comprises of
2
document header which is represented by <head>...</head> and
document body which is represented by <body>...</body> tags.
<head>
3 This tag represents the document's header which can keep other HTML
tags like <title>, <link> etc.
<title>
4 The <title> tag is used inside the <head> tag to mention the document
title.
<body>
5 This tag represents the document's body which keeps other HTML tags
like <h1>,<p> etc.
<h1>
6
This tag represents the heading.
<p>
7
This tag represents a paragraph.
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration tag is used by the web browser to understand
the version of the HTML used in the document. Current version of HTML is 5
and it makes use of the following declaration −
<!DOCTYPE html>
Tags
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
LINE BREAK
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<center>hai winways<center>
<p>Hello<br >
You delivered your assignment ontime.<br >
Thanks<br >
Mahnaz</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>
Nonbreaking Spaces
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie
"12 Angry Men."</p>
</body>
</html>
An HTML element is defined by a starting tag. If the element contains other
content, it ends with a closing tag, where the element name is preceded by a
forward slash as shown below with few tags −
Start End
Content
Tag Tag
This is paragraph
<p> </p>
content.
This is heading
<h1> </h1>
content.
This is division
<div> </div>
content.
<br />
So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML
element. There are some HTML elements which don't need to be closed, such
as <img.../>, <hr /> and <br /> elements. These are known as void elements.
HTML documents consists of a tree of these elements and they specify how
HTML documents should be built, and what kind of content should be placed in
what part of an HTML document.
HTML Tag vs. Element
An HTML element is defined by a starting tag. If the element contains other
content, it ends with a closing tag.
For example, <p> is starting tag of a paragraph and </p> is closing tag of the
same paragraph but <p>This is paragraph</p> is a paragraph element.
Nested HTML Elements
It is very much allowed to keep one HTML element inside another HTML
element −
Example
<!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>
</html>
HTML - Attributes
We have seen few HTML tags and their usage like heading tags <h1>, <h2>,
paragraph tag <p> and other tags. We used them so far in their simplest form,
but most of the HTML tags can also have attributes, which are extra bits of
information.
An attribute is used to define the characteristics of an HTML element and is
placed inside the element's opening tag. All attributes are made up of two parts
− a name and a value
• The name is the property you want to set. For example, the paragraph
<p> element in the example carries an attribute whose name is align,
which you can use to indicate the alignment of paragraph on the page.
• The value is what you want the value of the property to be set and always
put within quotations. The below example shows three possible values of
align attribute: left, center and right.
Attribute names and attribute values are case-insensitive. However, the World
Wide Web Consortium (W3C) recommends lowercase attributes/attribute
values in their HTML 4 recommendation.
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align = "left">This is left aligned</p>
<p align = "center">This is center aligned</p>
<p align = "right">This is right aligned</p>
</body>
</html>
Core Attributes
The four core attributes that can be used on the majority of HTML elements
(although not all) are −
• Id
• Title
• Class
• Style
The Id Attribute
The id attribute of an HTML tag can be used to uniquely identify any element
within an HTML page. There are two primary reasons that you might want to
use an id attribute on an element −
• If an element carries an id attribute as a unique identifier, it is possible to
identify just that element and its content.
• If you have two elements of the same name within a Web page (or style
sheet), you can use the id attribute to distinguish between elements that
have the same name.
let's use the id attribute to distinguish between two paragraph elements as
shown below.
<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading
Style Sheet</p>
The title Attribute
The title attribute gives a suggested title for the element. They syntax for the
title attribute is similar as explained for id attribute −
The behavior of this attribute will depend upon the element that carries it,
although it is often displayed as a tooltip when cursor comes over the element
or while the element is loading.
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title = "Hello HTML!">Titled Heading Tag
Example</h3>
</body>
</html>
Internationalization Attributes
There are three internationalization attributes, which are available for most
(although not all) XHTML elements.
• dir
• lang
• xml:lang
The dir Attribute
The dir attribute allows you to indicate to the browser about the direction in
which the text should flow. The dir attribute can take one of two values, as you
can see in the table that follows −
Value Meaning
ltr Left to right (the default value)
Right to left (for languages such as Hebrew or Arabic that
rtl
are read right to left)
<!DOCTYPE html>
<html dir = "rtl">
<head>
<title>Display Directions</title>
</head>
<body>
0 This is how IE 5 renders right-to-left
directed text.
</body>
</html>
When dir attribute is used within the <html> tag, it determines how text will be
presented within the entire document. When used within another tag, it controls
the text's direction for just the content of that tag.
The lang Attribute
The lang attribute allows you to indicate the main language used in a document,
but this attribute was kept in HTML only for backwards compatibility with
earlier versions of HTML. This attribute has been replaced by the xml:lang
attribute in new XHTML documents.
The values of the lang attribute are ISO-639 standard two-character language
codes. Check HTML Language Codes: ISO 639 for a complete list of
language codes.
<html lang = "en">
<head>
<title>English Language Page</title>
</head>
<body>
This page is using English Language
</body>
</html>
The xml:lang Attribute
The xml:lang attribute is the XHTML replacement for the lang attribute. The
value of the xml:lang attribute should be an ISO-639 country code as mentioned
in previous section.
Generic Attributes
Here's a table of some other attributes that are readily usable with many of the
HTML tags.
Attribute Options Function
align right, left, center Horizontally aligns tags
Vertically aligns tags within an HTML
valign top, middle, bottom
element.
numeric, hexidecimal, Places a background color behind an
bgcolor
RGB values element
Places a background image behind an
background URL
element
Names an element for use with Cascading
id User Defined
Style Sheets.
Classifies an element for use with
class User Defined
Cascading Style Sheets.
Specifies the width of tables, images, or
width Numeric Value
table cells.
Specifies the height of tables, images, or
height Numeric Value
table cells.
title User Defined "Pop-up" title of the elements.
HTML - Formatting
if you use a word processor, you must be familiar with the
ability to make text bold, italicized, or underlined; these are
just three of the ten options available to indicate how text can
appear in HTML and XHTML.
Bold Text
Anything that appears within <b>...</b> element, is displayed in bold as shown
below −
HTML - Phrase Tags
Emphasized Text
Anything that appears within <em>...</em> element is displayed as
emphasized text.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>The following word uses an
<em>emphasized</em> typeface.</p>
</body>
</html>
Marked Text
Anything that appears with-in <mark>...</mark> element, is displayed as
marked with yellow ink.
<!DOCTYPE html>
<html>
<head>
<title>Marked Text Example</title>
</head>
<body>
<p>The following word has been
<mark>marked</mark> with yellow</p>
</body>
</html>
Strong Text
Anything that appears within <strong>...</strong> element is displayed as
important text.
<!DOCTYPE html>
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
<p>The following word uses a
<strong>strong</strong> typeface.</p>
</body>
</html>
Text Direction
The <bdo>...</bdo> element stands for Bi-Directional Override and it is used
to override the current text direction.
<!DOCTYPE html>
<html>
<head>
<title>Text Direction Example</title>
</head>
<body>
<p>This text will go left to right.</p>
<p><bdo dir = "rtl">This text will go right to
left.</bdo></p>
</body>
</html>
Computer Code
Any programming code to appear on a Web page should be placed inside
<code>...</code> tags. Usually the content of the <code> element is presented
in a monospaced font, just like the code in most programming books.
<!DOCTYPE html>
<html>
<head>
<title>Computer Code Example</title>
</head>
<body>
<p>Regular text. <code>This is code.</code>
Regular text.</p>
</body>
</html>
