- HTML Introduction
- HTML Editors
- HTML Basic
- HTML Elements
- HTML Styles
- HTML Formatting
- HTML Quotation
- HTML Colors
- HTML Links
- Links Colors
- HTML Images
- HTML Image Maps
- HTML Favicon
- HTML Tables
- HTML Table Borders
- HTML Table Padding & Spacing
- HTML Table Colspan & Rowspan
- HTML Table Styling
- HTML Table Colgroup
- HTML Responsive Web Design
- HTML Layout Elements
- HTML Entities
- Using Emojis in HTML
HTML Introduction
HTML is the standard markup language for creating Web pages.
What is HTML?
- 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
Example
Example Explained
- The
<!DOCTYPE html>
declaration defines that this document is an HTML5 document - The
<html>
element is the root element of an HTML page - The
<head>
element contains meta information about the HTML page - The
<title>
element specifies a title for the HTML page (which is shown in the browser’s title bar or in the page’s tab) - The
<body>
element defines the document’s body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. - The
<h1>
element defines a large heading - The
<p>
element defines a paragraph
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:
The HTML element is everything from the start tag to the end tag:
Web Browsers?
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.
A browser does not display the HTML tags, but uses them to determine how to display the document:

HTML Page Structure?

HTML Editors
A simple text editor is all you need to learn HTML.
Learn 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 in that using a simple text editor is a good way to learn HTML.
Follow the 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 1: Open TextEdit (Mac)
Open Finder > Applications > TextEdit
Also change some preferences to get the application to save files correctly. In Preferences > Format > choose “Plain Text”
Then under “Open and Save”, check the box that says “Display HTML files as HTML code instead of formatted text”.
Then open a new document to place the code.
Step 2: Write Some HTML
Write or copy the following HTML code into Notepad:
[code]
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
[/code]
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”).
The result will look much like this:

HTML Basic Examples
In this chapter we will show some basic HTML examples.
Don’t worry if we use tags you have not learned about yet.
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>
.
Example
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:
HTML Headings
Example
HTML Paragraphs
HTML paragraphs are defined with the <p>
tag:.
Example
HTML Links
HTML links are defined with the tag:<a>
Example
The link’s destination is specified in the attribute. href
Attributes are used to provide additional information about HTML elements.
You will learn more about attributes in a later chapter.
HTML Images
HTML images are defined with the tag.<img>
The source file (), alternative text (), , and are provided as attributes:src
alt
width
height
Example
How to View HTML Source
Have you ever seen a Web page and wondered “Hey! How did they do that?”
View HTML Source Code:
Right-click in an HTML page and select “View Page Source” (in Chrome) or “View Source” (in Edge), or similar in other browsers. This will open a window containing the HTML source code of the page.
Inspect an HTML Element:
Right-click on an element (or a blank area), and choose “Inspect” or “Inspect Element” to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.
HTML Elements
An HTML element is defined by a start tag, some content, and an end tag.
HTML Elements
The HTML element is everything from the start tag to the end tag:
Examples of some HTML elements:
Nested HTML Elements
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:
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>
:
The <h1>
element defines a heading.
It has a start tag <h1>
and an end tag </h1>
:
The <p>
element defines a paragraph.
It has a start tag <p>
and an end tag </p>
:
Never Skip the End Tag
Some HTML elements will display correctly, even if you forget the end tag:
Example
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:
Example
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
HTML Styles
The HTML style
attribute is used to add styles to an element, such as color, font, size, and more.
Example
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:
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:
Text Color
The CSS color
property defines the text color for an HTML element:
Example
Fonts
The CSS font-family
property defines the font to be used for an HTML element:
Text Size
The CSS font-size
property defines the text size for an HTML element:
Text Alignment
The CSS text-align
property defines the horizontal text alignment for an HTML element:
Example
Chapter Summary
HTML Exercises
Exercise:
Use the correct HTML attribute, and CSS, to set the color of the paragraph to “blue”.
I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
HTML Text Formatting
HTML contains several elements for defining text with a special meaning.
.
Example
I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
HTML Formatting Elements
Formatting elements were designed to display special types of text:
HTML <b> and <strong> Elements
The HTML <b>
element defines bold text, without any extra importance.
Example
The HTML <strong>
element defines text with strong importance. The content inside is typically displayed in bold.
Example
I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
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 am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
HTML <small> Element
The HTML <small>
element defines smaller text:
Example
HTML <mark> Element
The HTML <mark>
element defines text that should be marked or highlighted:
Example
HTML <mark> Element
The HTML <mark>
element defines text that should be marked or highlighted:
Example
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
HTML <ins> Element
The HTML <ins>
element defines a text that has been inserted into a document. Browsers will usually underline inserted text:
Example
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
I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
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
HTML Quotation and Citation Elements
In this chapter we will go through the <blockquote>
,<q>
, <abbr>
, <address>
, <cite>
, and <bdo>
HTML elements.
Example
HTML <blockquote> for Quotations
The HTML <blockquote>
element defines a section that is quoted from another source.
Browsers usually indent <blockquote>
elements.
Example
HTML <q> for Short Quotations
The HTML <q>
tag defines a short quotation.
Browsers normally insert quotation marks around the quotation.
Example
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
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.
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
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
HTML Images
Images can improve the design and the appearance of a web page.
Example
Example
Example
HTML Images Syntax
The HTML <img>
tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are linked to web pages. The <img>
tag creates a holding space for the referenced image.
The <img>
tag is empty, it contains attributes only, and does not have a closing tag.
The <img>
tag has two required attributes:
- src – Specifies the path to the image
- alt – Specifies an alternate text for the image
Syntax
The src Attribute
The required src
attribute specifies the path (URL) to the image.
Note: When a web page loads, it is the browser, at that moment, that gets the image from a web server and inserts it into the page. Therefore, make sure that the image actually stays in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon and the alt
text are shown if the browser cannot find the image.
Example
The alt Attribute
The required alt
attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
The value of the alt
attribute should describe the image:
Example
If a browser cannot find an image, it will display the value of the alt
attribute:
Example
Image Size – Width and Height
You can use the style
attribute to specify the width and height of an image.
Example
Alternatively, you can use the width
and height
attributes:
Example
The width
and height
attributes always define the width and height of the image in pixels.
Width and Height, or Style?
The width
, height
, and style
attributes are all valid in HTML.
However, we suggest using the style
attribute. It prevents styles sheets from changing the size of images:
Example
Images in Another Folder
If you have your images in a sub-folder, you must include the folder name in the src
attribute:
Example
Images on Another Server/Website
Some web sites point to an image on another server.
To point to an image on another server, you must specify an absolute (full) URL in the src
attribute:
Example
Animated Images
HTML allows animated GIFs:
Example
Image as a Link
To use an image as a link, put the <img>
tag inside the <a>
tag:
Example
Image Floating
Use the CSS float
property to let the image float to the right or to the left of a text:
Example
Common Image Formats
Here are the most common image file types, which are supported in all browsers (Chrome, Edge, Firefox, Safari, Opera):
Chapter Summary
- . Use the HTML
<img>
element to define an image - . Use the HTML
src
attribute to define the URL of the image - . Use the HTML
alt
attribute to define an alternate text for an image, if it cannot be displayed - . Use the HTML
width
andheight
attributes or the CSSwidth
andheight
properties to define the size of the image - Use the CSS
float
property to let the image float to the left or to the right
HTML Exercises
Exercise:
Use the HTML image attributes to set the size of the image to 250 pixels wide and 400 pixels tall.
I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
HTML Image Tags
HTML Image Maps
With HTML image maps, you can create clickable areas on an image.
Image Maps
The HTML <map>
tag defines an image map. An image map is an image with clickable areas. The areas are defined with one or more <area>
tags.
Try to click on the computer, phone, or the cup of coffee in the image below:
Example
Here is the HTML source code for the image map above:
How Does it Work?
The idea behind an image map is that you should be able to perform different actions depending on where in the image you click.
To create an image map you need an image, and some HTML code that describes the clickable areas.
The Image
The image is inserted using the <img>
tag. The only difference from other images is that you must add a usemap
attribute:
The usemap
value starts with a hash tag #
followed by the name of the image map, and is used to create a relationship between the image and the image map.
Create Image Map
Then, add a <map>
element.
The <map>
element is used to create an image map, and is linked to the image by using the required name
attribute:
The name
attribute must have the same value as the <img>
‘s usemap
attribute .
The Areas
Then, add the clickable areas.
A clickable area is defined using an <area>
element.
Shape
You must define the shape of the clickable area, and you can choose one of these values:
rect
– defines a rectangular regioncircle
– defines a circular regionpoly
– defines a polygonal regiondefault
– defines the entire region
You must also define some coordinates to be able to place the clickable area onto the image.
Shape=”rect”
The coordinates for shape="rect"
come in pairs, one for the x-axis and one for the y-axis.
So, the coordinates 34,44
is located 34 pixels from the left margin and 44 pixels from the top:
The coordinates 270,350
is located 270 pixels from the left margin and 350 pixels from the top:
Now we have enough data to create a clickable rectangular area:
Example
This is the area that becomes clickable and will send the user to the page “coffee.htm”:
Shape=”poly”
The shape="poly"
contains several coordinate points, which creates a shape formed with straight lines (a polygon).
This can be used to create any shape.
Like maybe a croissant shape!
How can we make the croissant in the image below become a clickable link?
We have to find the x and y coordinates for all edges of the croissant:
The coordinates come in pairs, one for the x-axis and one for the y-axis:
Example
This is the area that becomes clickable and will send the user to the page “croissant.htm”:
Image Map and JavaScript
A clickable area can also trigger a JavaScript function.
Add a click
event to the <area>
element to execute a JavaScript function:
Example
Here, we use the onclick attribute to execute a JavaScript function when the area is clicked:
Chapter Summary
- . Use the HTML
<map>
element to define an image map - . Use the HTML
<area>
element to define the clickable areas in the image map - . Use the HTML
usemap
attribute of the<img>
element to point to an image map
HTML Image Tags
HTML Favicon
A favicon is a small image displayed next to the page title in the browser tab.
How To Add a Favicon in HTML
You can use any image you like as your favicon. You can also create your own favicon on sites like https://www.favicon.cc.
A favicon image is displayed to the left of the page title in the browser tab, like this:
To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is “favicon.ico”.
Next, add a <link>
element to your “index.html” file, after the <title>
element, like this:
Example
Now, save the “index.html” file and reload it in your browser. Your browser tab should now display your favicon image to the left of the page title.
Favicon File Format Support
The following table shows the file format support for a favicon image:
Chapter Summary
- . Use the HTML
<link>
element to insert a favicon
HTML Link Tag
HTML Tables
HTML tables allow web developers to arrange data into rows and columns..
Example
Example
Define an HTML Table
A table in HTML consists of table cells inside rows and columns.
Example
A simple HTML table:
Table Cells
Each table cell is defined by a <td>
and a </td>
tag.
Everything between <td>
and </td>
are the content of the table cell.
Example
Table Rows
Each table row starts with a <tr>
and ends with a </tr>
tag.