What is HTML?
HTML is the standard markup language for creating Web pages. HTML is the language of
the web, used by billions of websites to create the pages that we see every day.
HTML stands for HyperText Markup Language. It is the standard language used to create
and design web pages on the internet. It was introduced by Tim Berners-
Lee in 1991 at CERN as a simple markup language. Since then, it has evolved through
versions from HTML 2.0 to HTML5 (the latest 2024 version).
HTML is a combination of Hypertext and Markup language. Hypertext defines the link
between the web pages and Markup language defines the text document within the tag.
HTML stands for Hyper Text Markup Language
HTML describes the structure of Web pages using markup
HTML elements are the building blocks of HTML pages
HTML elements are represented by tags
HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
Browsers do not display the HTML tags, but use them to render the content of the
page
A Simple HTML Document
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph
HTML Tags
HTML tags are the building blocks of web pages. By understanding and using HTML tags
effectively, you can create well-structured and informative webpages. Tags are element
names surrounded by angle brackets:
<tagname>content goes here...</tagname>
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, but with a forward slash inserted before the
tag name
Empty tag: The tags that do not have an end tag, is known as an empty tag. Eg. <hr>, <br>,
<img>. These tags have no effect on the subsequent portion of the document and hence do
not need an ending tag. HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line break).
Empty elements can be "closed" in the opening tag like this: <br />.
HTML5 does not require empty elements to be closed. But if you want stricter validation, or
if you need to make your document readable by XML parsers, you must close all HTML
elements properly.
Attributes
Some elements may include attributes, which are the additional information that are included
inside the starting tag (eg. Size, color). An attribute typically consists of an attribute name, an
equal sign and a value. White space is allowed around the equal sign. The value of the
attribute may be either delimited by single quotes or double quotes.
All HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
Use Lowercase Tags
HTML tags are not case sensitive: <P> means the same as <p>.
HTML Page Structure
Below is a visualization of an HTML page structure:
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
</body>
</html>
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>
HTML Versions
Since the early days of the web, there have been many versions of HTML:
Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
Head tag
The <head> tag serves to encapsulate the other header tags. It is placed below the <html> and
above the <body> tag in a document. It may contain some other tags that help to define and
manage the document’s content, such as <tittle> tag.
Tittle tag
Whatever we write inside this tag appears at the top of the browser document window. It is
also used by search engines and for book marks.
Body tag
This tag is used to place all other tags inside it.
The background-color property defines the background color for an HTML element.
This example sets the background color for a page to blue:
Example
<body bgcolor=”blue”>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
HTML Editors
Write HTML Using Notepad or TextEdit
Web pages can be created and modified by using professional HTML editors.
However, for learning HTML we recommend a simple text editor like Notepad (PC) or
TextEdit (Mac).
We believe using a simple text editor is a good way to learn HTML.
Follow the four steps below to create your first web page with Notepad or TextEdit.
Step 1: Open Notepad (PC)
Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen). Type
Notepad.
Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad
Step 2: Write Some HTML
Write some HTML into Notepad.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Step 3: Save the HTML Page
Save the file on your computer. Select File > Save as in the Notepad menu.
Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding
for HTML files).
Step 4: View the HTML Page in Your Browser
Open the saved HTML file in your favorite browser (double click on the file, or right-click -
and choose "Open with").
HTML Formatting tags
HTML offers tags and attributes to style a website’s text, images, and more. This improves
visual appeal, helps users navigate the content, and signals important information to users.
HTML <i> Tag
The <i> tag in HTML is used to display the content in italic style. This tag is generally used
to display the technical term, phrase, the important word in a different language. The <i>
tag is a container tag that contains the opening tag, content & closing tag.
Syntax
<i> Now content is Italic </i>
HTML <b> Tag
The <b> tag in HTML makes text bold without adding importance, unlike <strong>, which
signifies importance. It has opening and closing tags and purely changes text appearance.
Syntax
<b> Contents... </b>
HTML <u> Tag
The <u> tag in HTML is used to underline text. It has opening and closing tags and purely
changes text appearance.
Syntax
<u> Contents... </u>
HTML <small> Tag
The <small> tag in HTML is used to define smaller text, reducing font size. It decreases the
font size by one size (from medium to small, from x-large to large
Syntax:
<small> Contents... </small>
HTML <ins> Tag
HTML <ins> tag is used to specify a block of inserted text. The <ins> tag is typically used to
mark a range of text that has been added to the document. The inserted text is rendered as
underlined text by the web browsers. The <ins> tag requires a starting and ending tag.
Syntax:
<ins> Contents... </ins>
HTML <sub> Tag
This <sub> tag in HTML is used to write text below the baseline of the text in a smaller font.
This tag can be used in many ways like we can denote some mathematical variables in the
form of subscript text.
Syntax:
<sub> Contents. . . </sub>
HTML sup Tag
The <sup> tag in HTML describes the text as a superscript text. Here the text is above the
baseline of the text and that text appears in a smaller font.
Syntax:
<sup> Content... </sup>
HTML <strong> Tag
The HTML <strong> Tag is the parsed tag and is used to show the importance of the text.
The content inside it is generally in bold format. The primary purpose of <strong> tag is to
provide semantic meaning to the content, indicating its importance to both browsers and
developers.
<strong> Contents... </strong>
HTML <mark> Tag
The <mark> tag in HTML is used to define the marked text. It is used to highlight the part
of the text in a paragraph. The <mark> tag is new in HTML 5.
Syntax:
<mark> Contents... </mark>
HTML <del> Tag
HTML <del> Tag is used to mark a portion of text that has been deleted from the document.
The deleted text is rendered as strike-through text by the web browsers. The <del> tag
requires a starting and ending tag.
Syntax
<del> Contents... </del>
HTML <em> Tag
HTML <em> tag is used to emphasize text, typically rendering it in italics. It conveys
importance or stress semantically and is widely employed for emphasis within paragraphs or
sentences.
Syntax:
<em> Contents... </em>
HTML Basic Examples
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>
<h4>This is heading 3</h4>
<h5>This is heading 3</h5>
<h6>This is heading 3</h6>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
You cannot be sure how HTML will be displayed.
Large or small screens, and resized windows will create different results.
With HTML, you cannot change the output by adding extra spaces or extra lines in your
HTML code.
The browser will remove any extra spaces and extra lines when the page is displayed:
Example
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
HTML Links (anchor tag)
HTML links are defined with the <a> tag:
Example
<a href="abc.html">This is a link</a>
The href Attribute
HTML links are defined with the <a> tag. The link address is specified in the href attribute:
Example
<a href="abc.html ">This is a link</a>
The src Attribute
HTML images are defined with the <img> tag.
The filename of the image source is specified in the src attribute:
Example
<img src="img_girl.jpg">
The width and height Attributes
Images in HTML have a set of size attributes, which specifies the width and height of the
image:
Example
<img src="img_girl.jpg" width="500" height="600">
The alt Attribute
The alt attribute specifies an alternative text to be used, when an image cannot be displayed.
The value of the attribute can be read by screen readers. This way, someone "listening" to the
webpage, e.g. a blind person, can "hear" the element.
Example
<img src="img_girl.jpg" alt="Girl with a jacket">
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="schools.jpg" alt="School pics.com" width="104" height="142">
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a
horizontal rule.
The <hr> element is used to separate content (or define a change) in an HTML page:
Example
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph:
Example
<p>This is<br>a paragraph<br>with line breaks.</p>
The HTML <pre> Element
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it
preserves both spaces and line breaks:
Example
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
HTML Fonts
Example
<font face="verdana">This is a heading</font>
< font face ="courier">This is a paragraph.</font>
HTML Text Size
The font-size property defines the text size for an HTML element:
Example
< font size=30>This is a heading</ font >
<font face="verdana" size=30>This is a heading</font>
Text Formatting
This text is bold
This text is italic
This is subscript and superscript
HTML Formatting Elements
In the previous chapter, you learned about the HTML style attribute.
HTML also defines special elements for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
Formatting elements were designed to display special types of text:
<b> - Bold text
<strong> - Important text
<i> - Italic text
<u> - underline
<em> - Emphasized text
<mark> - Marked text
<small> - Small text
<big> - big 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 strong text, with added semantic "strong" importance.
Example
<strong>This text is strong</strong>
HTML <i> and <em> Elements
The HTML <i> element defines italic text, without any extra importance.
Example
<i>This text is italic</i>
HTML <small> Element
The HTML <small> element defines smaller text:
Example
<h2>HTML <small>Small</small> Formatting</h2>
HTML <mark> Element
The HTML <mark> element defines marked or highlighted text:
Example
<h2>HTML <mark>Marked</mark> Formatting</h2>
HTML <del> Element
The HTML <del> element defines deleted (removed) text.
Example
<p>My favorite color is <del>blue</del> red.</p>
HTML <ins> Element
The HTML <ins> element defines inserted (added) text.
Example
<p>My favorite <ins>color</ins> is red.</p>
HTML <sub> Element
The HTML <sub> element defines subscripted text.
Example
<p>This is <sub>subscripted</sub> text.</p>
HTML <sup> Element
The HTML <sup> element defines superscripted text.
Example
<p>This is <sup>superscripted</sup> text.</p>
Defining an HTML Table
An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By
default, table headings are bold and centered. A table data/cell is defined with the <td> tag.
Example
<table border=”2” align="centre" cellpadding=”10” cellspacing=”10”>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
HTML Table - Cells that Span Many Columns
To make a cell span more than one column, use the colspan attribute:
Example
<table border=”2” align="centre" cellpadding=”10” cellspacing=”10”>
<tr>
<th>Name</th>
<th >Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
</tr>
</table>
HTML Table - Cells that Span Many Rows
To make a cell span more than one row, use the rowspan attribute:
Example
<table border=”2” align="centre" cellpadding=”10” cellspacing=”10”>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
HTML Table - Adding a Caption
To add a caption to a table, use the <caption> tag:
Example
<table border=”2” align="centre" cellpadding=”10” cellspacing=”10”>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
HTML List Example
An Unordered List:
Item
Item
Item
Item
An Ordered 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>
Unordered HTML List - Choose List Item Marker
The CSS list-style-type property is used to define the style of the list item marker:
Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
Example - Disc
<ul type=disc>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Example - Circle
<ul type=circle>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Example - Square
<ul type=square>
<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>
Ordered HTML List - The Type Attribute
The type attribute of the <ol> tag, defines the type of the list item marker:
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
Numbers:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Uppercase Letters:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Lowercase Letters:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Uppercase Roman Numbers:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Lowercase Roman Numbers:
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Nested HTML Lists
List can be nested (lists inside lists):
Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
HTML - <marquee> Tag
The HTML <marquee> tag is used for scrolling piece of text or image
displayed either horizontally across or vertically down your web site page
depending on the settings.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
<marquee direction = "up">The direction of text will be from bottom
to top.</marquee>
</body>
</html>
Attributes
The HTML <marquee> tag supports the following attributes −
Attribute Value Description
behavior scroll Defines the type of scrolling.
slide
alternate
bgcolor rgb(x,x,x) Deprecated − Defines the direction of scrolling
#xxxxxx the content.
colorname
direction up Defines the direction of scrolling the content.
down
left
right
height pixels or % Defines the height of marquee.
hspace pixels Specifies horizontal space around the marquee.
loop number Specifies how many times to loop. The default
value is INFINITE, which means that the marquee
loops endlessly.
scrolldelay seconds Defines how long to delay between each jump.
scrollamount number Defines how how far to jump.
width pixels or % Defines the width of marquee.
vspace pixels Specifies vertical space around the marquee.
