HTML NOTES
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 have clicked
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 apply layout 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 Web page 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 HTML document is
made of many HTML tags and each HTML tag contains different content.
Example:
<!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 appears at 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.
ThinkWorks Infotech Page 1
, HTML NOTES
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 description of HTML was a
document called "HTML Tags" proposed by Tim in late 1991. The latest version of HTML is HTML5,
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 along with 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.
Building blocks of HTML
An HTML document consist of its basic building blocks which are:
Tags: An HTML tag surrounds the content and apply meaning to it. It is written between < and > brackets.
Attribute: An attribute in HTML provides extra information about the element, and it is applied within the
start tag. An HTML attribute contains two fields: name & value.
Syntax
<tag name attribute_name= " attr_value"> content </ tag name>
Elements: An HTML element is an individual component of an HTML file. In an HTML file, everything
written within tags are termed as HTML elements.
HTML Building blocks
Example:
ThinkWorks Infotech Page 2
, HTML NOTES
<!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>
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 your code requirement.
All HTML tags must enclosed within < > these brackets.
Every tag in HTML perform different tasks.
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
<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.
ThinkWorks Infotech Page 3
, HTML NOTES
<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>
HTML Table Tags
table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption
HTML Form Tags
form, input, textarea, select, option, optgroup, button, label, fieldset and legend
HTML Scripting Tags
script and noscript
Tag name Description
<!-- --> This tag is used to apply comment in an HTML document.
<!DOCTYPE> This tag is used to specify the version of HTML
<a>-----It is termed as anchor tag and it creates a hyperlink or link.
<abbr> -----It defines an abbreviation for a phrase or longer word.
<acronym>----It defines acronym for a word. (Not supported in HTML5)
<address>------It defines the author's contact information of the HTML article
<applet>------It defines an embedded Java applet. (Not supported in HTML5)
<area>------It defines the area of an image map.
<article>------It defines the self-contained content.
<aside>------It defines content aside from main content. Mainly represented as sidebar.
<audio>------It is used to embed sound content in HTML document.
<b>-----It is used to make a text bold.
<base> -----This tag defines the base URL for all relative URL within the document.
<basefont>------This tag is used to set default font, size and color for all elements of document. (Not
supported in HTML5)
<bdi>-----This tag is used to provide isolation for that part of text which may be formatted in different
directions from its surrounding text.
ThinkWorks Infotech Page 4
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 have clicked
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 apply layout 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 Web page 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 HTML document is
made of many HTML tags and each HTML tag contains different content.
Example:
<!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 appears at 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.
ThinkWorks Infotech Page 1
, HTML NOTES
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 description of HTML was a
document called "HTML Tags" proposed by Tim in late 1991. The latest version of HTML is HTML5,
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 along with 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.
Building blocks of HTML
An HTML document consist of its basic building blocks which are:
Tags: An HTML tag surrounds the content and apply meaning to it. It is written between < and > brackets.
Attribute: An attribute in HTML provides extra information about the element, and it is applied within the
start tag. An HTML attribute contains two fields: name & value.
Syntax
<tag name attribute_name= " attr_value"> content </ tag name>
Elements: An HTML element is an individual component of an HTML file. In an HTML file, everything
written within tags are termed as HTML elements.
HTML Building blocks
Example:
ThinkWorks Infotech Page 2
, HTML NOTES
<!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>
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 your code requirement.
All HTML tags must enclosed within < > these brackets.
Every tag in HTML perform different tasks.
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
<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.
ThinkWorks Infotech Page 3
, HTML NOTES
<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>
HTML Table Tags
table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption
HTML Form Tags
form, input, textarea, select, option, optgroup, button, label, fieldset and legend
HTML Scripting Tags
script and noscript
Tag name Description
<!-- --> This tag is used to apply comment in an HTML document.
<!DOCTYPE> This tag is used to specify the version of HTML
<a>-----It is termed as anchor tag and it creates a hyperlink or link.
<abbr> -----It defines an abbreviation for a phrase or longer word.
<acronym>----It defines acronym for a word. (Not supported in HTML5)
<address>------It defines the author's contact information of the HTML article
<applet>------It defines an embedded Java applet. (Not supported in HTML5)
<area>------It defines the area of an image map.
<article>------It defines the self-contained content.
<aside>------It defines content aside from main content. Mainly represented as sidebar.
<audio>------It is used to embed sound content in HTML document.
<b>-----It is used to make a text bold.
<base> -----This tag defines the base URL for all relative URL within the document.
<basefont>------This tag is used to set default font, size and color for all elements of document. (Not
supported in HTML5)
<bdi>-----This tag is used to provide isolation for that part of text which may be formatted in different
directions from its surrounding text.
ThinkWorks Infotech Page 4
