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

<!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 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:

<tagname> Content goes here… </tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

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?

Below is a visualization of an HTML page structure:

A simple text editor is all you need to learn HTML.

[code]

}

.size{
background-color:#ffffff;
margin-top: 100px;
margin-left:500px;
margin-right:500px;
border-radius: 15px;

}
h2{
text-align: center;

}
table.center{
margin-bottom:auto;
margin-top:auto;
margin-right:auto;
margin-left:auto;
}
input[type=submit]{
background-color: #0000ff;
color: ffffff;
margin-left: 20px;
padding-left: 30px;
padding-right: 30px;
cursor: pointer;
}

input[type=submit]:hover{
background-color: #c0c0c0;
color: #ff0000;

}
</style>
</head>

<body>

<form class=”size”>
<h2>ICT STUDENTS FORM</h2>
<table class=”center”>
<tr>
<td>FIRST NAME: </td>

</tr>

<tr>
<td> GENDER: </td>
<td><input type=”radio” name=”Gender”>Male
<input type=”radio” name=”Gender”>Female
<input type=”radio” name=”Gender”>Others</td>
</tr>

<tr>
<td>ADDRESS: </td>
<td>
<input type =”text” name=”Add” placeholder=”Eg: 34D Main Motor Road.”>
</td>

</tr>
<tr>
<td>CITY: </td>
<td><input type=”text” placeholder=”Eg: City” />
</td>
<tr>
<td>E-MAIL:</td>
<td><input type=”text” name=”E-mail” placeholder=”info@kugbahost.com” required /></td>

</tr>
<tr><td></td></tr>
<tr>

<td>PHONE NO.:</td>
<td>
<select>

</select>

</table>

</div>
</form>

</body>

</html>

[/code]

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

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

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</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 Headings

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 tag:<a>

Example

<a href=”https://www.w3schools.com”>This is a link</a>.

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:srcaltwidthheight

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:

<tagname>Content goes here…</tagname>

Examples of some HTML elements:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

Start tag	Element content	End tag
<h1>	My First Heading	</h1>
<p>	My first paragraph.	</p>
<br>	none	none

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:

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

I am message box. Click edit button to change this text.

Never Skip the End Tag

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

Example

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

Example

<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

HTML Attributes

HTML attributes provide additional information about HTML elements.

HTML Attributes

. All HTML elements can have attributes
. Attributes provide additional information about elements
. Attributes are always specified in the start tag
. Attributes usually come in name/value pairs like: name=”value”

The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:

Example

<a href=”https://www.w3schools.com”>Visit W3Schools</a>

You will learn more about links in our HTML Links chapter.

The src Attribute

The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed:

Example

You will learn more about links in our HTML Links chapter.

The src Attribute

The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed:

Example

There are two ways to specify the URL in the src attribute:

1. Absolute URL – Links to an external image that is hosted on another website. Example: src=”https://www.w3schools.com/images/img_girl.jpg”.

Notes: External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; it can suddenly be removed or changed.

2. Relative URL – Links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page. Example: src=”img_girl.jpg”. If the URL begins with a slash, it will be relative to the domain. Example: src=”/images/img_girl.jpg”.

Tip: It is almost always best to use relative URLs. They will not break if you change domain.

The width and height Attributes

The <img> tag should also contain the width and height attributes, which specify the width and height of the image (in pixels):

Example

The alt Attribute

The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to a slow connection, or an error in the src attribute, or if the user uses a screen reader.

Example

The style Attribute

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

Example

<p style=”color:red;”>This is a red paragraph.</p>

You will learn more about styles in our HTML Styles chapter.

The lang Attribute

You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.

The following example specifies English as the language:

<!DOCTYPE html>
<html lang=”en”>
<body>
…
</body>
</html>

Country codes can also be added to the language code in the lang attribute. So, the first two characters define the language of the HTML page, and the last two characters define the country.

The following example specifies English as the language and United States as the country:

<!DOCTYPE html>
<html lang=”en-US”>
<body>
…
</body>
</html>

You can see all the language codes in our HTML Language Code Reference.

The title Attribute

The title attribute defines some extra information about an element.

The value of the title attribute will be displayed as a tooltip when you mouse over the element:

Example

<p title=”I’m a tooltip”>This is a paragraph.</p>

We Suggest: Always Use Lowercase Attributes

The HTML standard does not require lowercase attribute names.

The title attribute (and all other attributes) can be written with uppercase or lowercase like title or TITLE.

However, W3C recommends lowercase attributes in HTML, and demands lowercase attributes for stricter document types like XHTML.

We Suggest: Always Quote Attribute Values

The HTML standard does not require quotes around attribute values.

However, W3C recommends quotes in HTML, and demands quotes for stricter document types like XHTML.

Good:

<a href=”https://www.w3schools.com/html/”>Visit our HTML tutorial</a>

Bad:

<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>

Sometimes you have to use quotes. This example will not display the title attribute correctly, because it contains a space:

<p style=”color:red;”>This is a red paragraph.</p>

You will learn more about styles in our HTML Styles chapter.

The lang Attribute

You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.

The following example specifies English as the language:

<a href=”https://www.w3schools.com/html/”>Visit our HTML tutorial</a>

Example

Single or Double Quotes?

Double quotes around attribute values are the most common in HTML, but single quotes can also be used.

In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:

Chapter Summary

. All HTML elements can have attributes
. The href attribute of <a> specifies the URL of the page the link goes to
. The src attribute of <img> specifies the path to the image to be displayed
. The width and height attributes of <img> provide size information for images
. The alt attribute of <img> provides an alternate text for an image
. The style attribute is used to add styles to an element, such as color, font, size, and more
. The lang attribute of the <html> tag declares the language of the Web page
.The title attribute defines some extra information about an element

HTML Exercises

Exercise:

Add a “tooltip” to the paragraph below with the text “About W3Schools”.

<p =”About W3Schools”>W3Schools is a web developer’s site.</p>

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;“>

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>

<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=”font-family:verdana;”>This is a heading</h1>
<p style=”font-family:courier;”>This is a paragraph.</p>

Fonts

The CSS font-family property defines the font to be used for an HTML element:

<h1 style=”font-family:verdana;”>This is a heading</h1>
<p style=”font-family:courier;”>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>

Chapter 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 Exercises

Exercise:

Use the correct HTML attribute, and CSS, to set the color of the paragraph to “blue”

<p =”;”>This is a paragraph.</p>

HTML Formatting

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

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:

<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

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.

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

<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 <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 H₂O:

Example

<p>This is <sub>subscripted</sub> text.</p>

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

<p>This is <sup>superscripted</sup> text.</p>

HTML Quotation

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=”http://www.worldwildlife.org/who/index.html”>
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>
Example.com<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 Colors

HTML Links

Links are found in nearly all web pages. Links allow users to click their way from page to page.

HTML Links – Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

HTML Links – Syntax

The HTML <a> tag defines a hyperlink. It has the following syntax:

The most important attribute of the <a> element is the href attribute, which indicates the link’s destination.

The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the specified URL address.

Example

This example shows how to create a link to W3Schools.com:

<a href=”https://www.w3schools.com/”>Visit W3Schools.com!</a>

By default, links will appear as follows in all browsers:

. An unvisited link is underlined and blue
. A visited link is underlined and purple
. An active link is underlined and red

HTML Links – The target Attribute

By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

. _self – Default. Opens the document in the same window/tab as it was clicked
. _blank – Opens the document in a new window or tab
. _parent – Opens the document in the parent frame
. _top – Opens the document in the full body of the window

Example

Use target=”_blank” to open the linked document in a new browser window or tab:

<a href=”https://www.w3schools.com/” target=”_blank”>Visit W3Schools!</a>

Absolute URLs vs. Relative URLs

Both examples above are using an absolute URL (a full web address) in the href attribute.

A local link (a link to a page within the same website) is specified with a relative URL (without the “https://www” part):

Example

<h2>Absolute URLs</h2>
<p><a href=”https://www.w3.org/”>W3C</a></p>
<p><a href=”https://www.google.com/”>Google</a></p>

<h2>Relative URLs</h2>
<p><a href=”html_images.asp”>HTML Images</a></p>
<p><a href=”/css/default.asp”>CSS Tutorial</a></p>

HTML Links – Use an Image as a Link

To use an image as a link, just put the <img> tag inside the <a> tag:

Example

Button as a Link

To use an HTML button as a link, you have to add some JavaScript code.

JavaScript allows you to specify what happens at certain events, such as a click of a button:

Example

<button onclick=”document.location=’default.asp'”>HTML Tutorial</button>

Link Titles

The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.

Example

<a href=”https://www.w3schools.com/html/” title=”Go to W3Schools HTML section”>Visit our HTML Tutorial</a>

Chapter Summary

. Use the <a> element to define a link
. Use the href attribute to define the link address
. Use the target attribute to define where to open the linked document
. Use the <img> element (inside <a>) to use an image as a link
. Use the mailto: scheme inside the href attribute to create a link that opens the user’s email program

HTML Link Tags

Tag	Description
<a>	Defines a hyperlink

Links Colors

HTML Links - Different Colors

An HTML link is displayed in a different color depending on whether it has been visited, is unvisited, or is active.

HTML Link Colors

By default, a link will appear like this (in all browsers):

. An unvisited link is underlined and blue
. A visited link is underlined and purple
. An active link is underlined and red

You can change the link state colors, by using CSS:

Example

Here, an unvisited link will be green with no underline. A visited link will be pink with no underline. An active link will be yellow and underlined. In addition, when mousing over a link (a:hover) it will become red and underlined:

a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}

a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}

a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style

Link Buttons

A link can also be styled as a button, by using CSS:

Example

a:hover, a:active {
background-color: red;
}
</style>

HTML Link Tags

Tag	Description
<a>	Defines a hyperlink

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

I am message box. Click edit button to change this text.

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

<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>

</body>
</html>

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

<img src=”https://www.w3schools.com/images/w3schools_green.jpg” alt=”W3Schools.com”>.

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

<p><img src=”smiley.gif” alt=”Smiley face” style=”float:right;width:42px;height:42px;”>
The image will float to the right of the text.</p>

<p><img src=”smiley.gif” alt=”Smiley face” style=”float:left;width:42px;height:42px;”>
The image will float to the left of the text.</p>

Common Image Formats

Here are the most common image file types, which are supported in all browsers (Chrome, Edge, Firefox, Safari, Opera):

Abbreviation	File Format	File Extension
APNG	Animated Portable Network Graphics	.apng
GIF	Graphics Interchange Format	.gif
ICO	Microsoft Icon	.ico, .cur
JPEG	Joint Photographic Expert Group image	.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG	Portable Network Graphics	.png
SVG	Scalable Vector Graphics	.svg

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 and height attributes or the CSS width and height 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

Tag	Description
<img>	Defines an image
<map>	Defines an image map
<area>	Defines a clickable area inside an image map
<picture>	Defines a container for multiple image resources

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 region
circle – defines a circular region
poly – defines a polygonal region
default – 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:

Workplace

The coordinates 270,350 is located 270 pixels from the left margin and 350 pixels from the top:

Workplace

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”:

Workplace

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?

French Food

We have to find the x and y coordinates for all edges of the croissant:

French Food

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”:

French Food

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

Tag	Description
<img>	Defines an image
<map>	Defines an image map
<area>	Defines a clickable area inside an image map
<picture>	Defines a container for multiple image resources

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:

Example of favicon

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

<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel=”icon” type=”image/x-icon” href=”/images/favicon.ico”>
</head>
<body>

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

</body>
</html>

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:

Browser	ICO	PNG	GIF	JPEG	SVG
Edge	Yes	Yes	Yes	Yes	Yes
Chrome	Yes	Yes	Yes	Yes	Yes
Firefox	Yes	Yes	Yes	Yes	Yes
Opera	Yes	Yes	Yes	Yes	Yes
Safari	Yes	Yes	Yes	Yes	Yes

Chapter Summary

. Use the HTML <link> element to insert a favicon

HTML Link Tag

I am message box. Click edit button to change this text.

Tag	Description
<link>	Defines the relationship between a document and an external resource

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.

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>

Table Rows

Each table row starts with a <tr> and ends with a </tr> tag.

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>

Table Headers

Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the <td> tag:

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 Exercises

Exercise:

Add a table row with two table headers.

The two table headers should have the value “Name” and “Age”.

<table>

<tr>
<td>Jill Smith</td>
<td>50</td>
</tr>
</table>

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 Table Borders

HTML tables can have borders of different styles and shapes.

How To Add a Border

When you add a border to a table, you also add borders around each table cell:

To add a border, use the CSS border property on table, th, and td elements:

Example

table, th, td {
border: 1px solid black;
}

HTML Table Padding & Spacing

HTML tables can adjust the padding inside the cells, and also the space between the cells.

With Padding
hello	hello	hello
hello	hello	hello
hello	hello	hello

With Spacing
hello	hello	hello
hello	hello	hello
hello	hello	hello

HTML Table – Cell Padding

Cell padding is the space between the cell edges and the cell content.

By default the padding is set to 0.

To add padding on table cells, use the CSS padding property:

Example

th, td {
padding: 15px;
}

To add padding only above the content, use the padding-top property.

And the others sides with the padding-bottom, padding-left, and padding-right properties:

Example

th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}

HTML Table – Cell Spacing

Cell spacing is the space between each cell.

By default the space is set to 2 pixels.

To change the space between table cells, use the CSS border-spacing property on the table element:

Example

table {
border-spacing: 30px;
}

HTML Table Colspan & amp; Rowspan

HTML Table Colspan & Rowspan

HTML tables can have cells that span over multiple rows and/or columns.

NAME

APRIL

2022

FIESTA
FIESTA

HTML Table – Colspan

To make a cell span over multiple columns, use the colspan attribute:

Example

<table>
<tr>
<th colspan=”2″>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>

HTML Table – Rowspan

To make a cell span over multiple rows, use the rowspan attribute:

Example

<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan=”2″>Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>

HTML Exercises

<table>
<tr>
<th >Name</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 Styling

Use CSS to make your tables look better.

HTML Table – Zebra Stripes

If you add a background color on every other table row, you will get a nice zebra stripes effect.

1	2	3	4
5	6	7	8
9	10	11	12
13	14	15	16
17	18	19	20

To style every other table row element, use the :nth-child(even) selector like this:

Example

tr:nth-child(even) {
background-color: #D6EEEE;
}

HTML Table – Vertical Zebra Stripes

To make vertical zebra stripes, style every other column, instead of every other row.

1	2	3	4
5	6	7	8
9	10	11	12
13	14	15	16
17	18	19	20

Set the :nth-child(even) for table data elements like this:

Example

td:nth-child(even), th:nth-child(even) {
background-color: #D6EEEE;
}

Combine Vertical and Horizontal Zebra Stripes

You can combine the styling from the two examples above and you will have stripes on every other row and every other column.

If you use a transparent color you will get an overlapping effect.

Use an rgba() color to specify the transparency of the color:

Example

tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}

th:nth-child(even),td:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}

Horizontal Dividers

First Name	Last Name	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

If you specify borders only at the bottom of each table row, you will have a table with horizontal dividers.

Add the border-bottom property to all tr elements to get horizontal dividers:

Example

tr {
border-bottom: 1px solid #ddd;
}

Hoverable Table

Use the :hover selector on tr to highlight table rows on mouse over:

First Name	Last Name	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

Example

tr:hover {background-color: #D6EEEE;}

HTML Table Colgroup

If you want to style the two first columns of a table, use the <colgroup> and <col> elements.

MON	TUE	WED	THU	FRI	SAT	SUN
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28

The <colgroup> element should be used as a container for the column specifications.

Each group is specified with a <col> element.

The span attribute specifies how many columns that get the style.

The style attribute specifies the style to give the columns.

Example

Legal CSS Properties

There is only a very limited selection of CSS properties that are allowed to be used in the colgroup:

width property
visibility property
background properties
border properties

All other CSS properties will have no effect on your tables.

Multiple Col Elements

If you want to style more columns with different styles, use more <col> elements inside the <colgroup>:

Example

Empty Colgroups

If you want to style columns in the middle of a table, insert a “empty” <col> element (with no styles) for the columns before:

Example

Hide Columns

You can hide columns with the visibility: collapse property:

Example

HTML Responsive Web Design

Responsive web design is about creating web pages that look good on all devices!

A responsive web design will automatically adjust for different screen sizes and viewports.

What is Responsive Web Design?

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones):

Setting The Viewport

To create a responsive website, add the following <meta> tag to all your web pages:

Example

This will set the viewport of your page, which will give the browser instructions on how to control the page’s dimensions and scaling.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

Without the viewport meta tag:

With the viewport meta tag:

Responsive Images

Responsive images are images that scale nicely to fit any browser size.

Using the width Property

If the CSS width property is set to 100%, the image will be responsive and scale up and down:

Example

Notice that in the example above, the image can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead.

Using the max-width Property

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:

Example

Show Different Images Depending on Browser Width

The HTML <picture> element allows you to define different images for different browser window sizes.

Resize the browser window to see how the image below changes depending on the width:

Example

Try it Yourself »

I am message box. Click edit button to change this text.

Responsive Text Size

The text size can be set with a “vw” unit, which means the “viewport width”.

That way the text size will follow the size of the browser window:

Hello World

Resize the browser window to see how the text size scales.

Example

<h1 style=”font-size:10vw“>Hello World</h1>

Media Queries

In addition to resize text and images, it is also common to use media queries in responsive web pages.

With media queries you can define completely different styles for different browser sizes.

Example: resize the browser window to see that the three div elements below will display horizontally on large screens and stack vertically on small screens:

Main Content

Right Content

Example

.main {
float: left;
width: 60%; /* The width is 60%, by default */
}

/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
</style>

I am message box. Click edit button to change this text.

Responsive Web Page – Full Example

A responsive web page should look good on large desktop screens and on small mobile phones.

Responsive Web Design – Frameworks

All popular CSS Frameworks offer responsive design.

They are free, and easy to use.

W3.CSS

W3.CSS is a modern CSS framework with support for desktop, tablet, and mobile design by default.

W3.CSS is smaller and faster than similar CSS frameworks.

W3.CSS is designed to be independent of jQuery or any other JavaScript library.

W3.CSS Demo

Resize the page to see the responsiveness!

London

London is the capital city of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Paris

Paris is the capital of France.

The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.

Tokyo

Tokyo is the capital of Japan.

It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

Example

<!DOCTYPE html>
<html>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<body>

<div class=”w3-container w3-green”>
<h1>W3Schools Demo</h1>
<p>Resize this responsive page!</p>
</div>

<div class=”w3-row-padding”>
<div class=”w3-third”>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class=”w3-third”>
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.</p>
</div>

<div class=”w3-third”>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</div>

</body>
</html>

I am message box. Click edit button to change this text.

Bootstrap

Another popular CSS framework is Bootstrap. Bootstrap uses HTML, CSS and jQuery to make responsive web pages.

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js”></script>
</head>
<body>

<div class=”container”>
<div class=”jumbotron”>
<h1>My First Bootstrap Page</h1>
</div>
<div class=”row”>
<div class=”col-sm-4″>
…
</div>
<div class=”col-sm-4″>
…
</div>
<div class=”col-sm-4″>
…
</div>
</div>
</div>

</body>
</html>

HTML Layout Elements

HTML Layout Elements and Techniques

Websites often display content in multiple columns (like a magazine or a newspaper).

Example

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

HTML Layout Elements

HTML has several semantic elements that define the different parts of a web page:

<header> – Defines a header for a document or a section
<nav> – Defines a set of navigation links
<section> – Defines a section in a document
<article> – Defines an independent, self-contained content
<aside> – Defines content aside from the content (like a sidebar)
<footer> – Defines a footer for a document or a section
<details> – Defines additional details that the user can open and close on demand
<summary> – Defines a heading for the <details> element

You can read more about semantic elements in our HTML Semantics chapter.

HTML Layout Techniques

There are four different techniques to create multicolumn layouts. Each technique has its pros and cons:

CSS framework
CSS float property
CSS flexbox
CSS grid

CSS Frameworks

If you want to create your layout fast, you can use a CSS framework, like W3.CSS or Bootstrap.

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

CSS Flexbox Layout

Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

Learn more about flexbox in our CSS Flexbox chapter.

ExaMPLE

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

HTML Layout Elements

HTML has several semantic elements that define the different parts of a web page:

<header> – Defines a header for a document or a section
<nav> – Defines a set of navigation links
<section> – Defines a section in a document
<article> – Defines an independent, self-contained content
<aside> – Defines content aside from the content (like a sidebar)
<footer> – Defines a footer for a document or a section
<details> – Defines additional details that the user can open and close on demand
<summary> – Defines a heading for the <details> element

You can read more about semantic elements in our HTML Semantics chapter.

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

I am message box. Click edit button to change this text.

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

CSS Flexbox Layout

Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

Learn more about flexbox in our CSS Flexbox chapter.

Example

CSS Grid Layout

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

Learn more about CSS grids in our CSS Grid Intro chapter.

HTML Entities

Reserved characters in HTML must be replaced with character entities.

HTML Entities

Some characters are reserved in HTML.

If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags.

Character entities are used to display reserved characters in HTML.

A character entity looks like this:

&entity_name;

&#entity_number;

To display a less than sign (<) we must write: < or <

Non-breaking Space

A commonly used entity in HTML is the non-breaking space:  

A non-breaking space is a space that will not break into a new line.

Two words separated by a non-breaking space will stick together (not break into a new line). This is handy when breaking the words might be disruptive.

Examples:

. § 10
. 10 km/h
.10 PM

Another common use of the non-breaking space is to prevent browsers from truncating spaces in HTML pages.

If you write 10 spaces in your text, the browser will remove 9 of them. To add real spaces to your text, you can use the   character entity.

Some Useful HTML Character Entities

Result	Description	Entity Name	Entity Number	Try it
	non-breaking space			Try it »
<	less than	<	<	Try it »
>	greater than	>	>	Try it »
&	ampersand	&	&	Try it »
“	double quotation mark	"	"	Try it »
‘	single quotation mark (apostrophe)	'	'	Try it »
¢	cent	¢	¢	Try it »
£	pound	£	£	Try it »
¥	yen	¥	¥	Try it »
€	euro	€	€	Try it »
©	copyright	©	©	Try it »
®	registered trademark	®	®

Using Emojis in HTML

Emojis are characters from the UTF-8 character set: ? ? ?

What are Emojis?

Emojis look like images, or icons, but they are not.

They are letters (characters) from the UTF-8 (Unicode) character set.

Emojis are characters from the UTF-8 character set: ? ? ?

What are Emojis?

Emojis look like images, or icons, but they are not.

They are letters (characters) from the UTF-8 (Unicode) character set.

The HTML charset Attribute

To display an HTML page correctly, a web browser must know the character set used in the page.

This is specified in the <meta> tag:

UTF-8 Characters

Many UTF-8 characters cannot be typed on a keyboard, but they can always be displayed using numbers (called entity numbers):

A is 65
B is 66
C is 67

Example

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
</head>
<body>

<p>I will display A B C</p>
<p>I will display A B C</p>

</body>
</html>

Example Explained

The <meta charset="UTF-8"> element defines the character set.

The characters A, B, and C, are displayed by the numbers 65, 66, and 67.

To let the browser understand that you are displaying a character, you must start the entity number with &# and end it with ; (semicolon).

Emoji Characters

Emojis are also characters from the UTF-8 alphabet:

? is 128516
? is 128525
? is 128151

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
</head>
<body>

<h1>My First Emoji</h1>

</body>
</html>

Since Emojis are characters, they can be copied, displayed, and sized just like any other character in HTML.

Example

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
</head>
<body>

<h1>Sized Emojis</h1>

</body>
</html>

Some Emoji Symbols in UTF-8

Emoji	Value	Try it
?	🗻	Try it »
?	🗼	Try it »
?	🗽	Try it »
?	🗾	Try it »
?	🗿	Try it »
?	😀	Try it »
?	😁	Try it »
?	😂	Try it »
?	😃	Try it »
?	😄	Try it »
?	😅

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

HTML Tutorial - Web Hosting

HTML Introduction

What is HTML?

A Simple HTML Document

Example

Example Explained

What is an HTML Element?

Web Browsers?

HTML Page Structure?

HTML Editors

A simple text editor is all you need to learn HTML.

Learn HTML Using Notepad or TextEdit

Step 1: Open Notepad (PC)

Step 1: Open TextEdit (Mac)

Step 2: Write Some HTML

Step 3: Save the HTML Page

Step 4: View the HTML Page in Your Browser

HTML Basic Examples

HTML Documents

Example

The '!DOCTYPE' Declaration

HTML Headings

Example

HTML Paragraphs

Example

HTML Links

Example

HTML Images

Example

How to View HTML Source

View HTML Source Code:

Inspect an HTML Element:

HTML Elements

HTML Elements

Nested HTML Elements

HTML Elements

Example

Example Explained

Never Skip the End Tag

Example

Empty HTML Elements

Example

HTML is Not Case Sensitive

HTML Tag Reference

HTML Attributes

HTML Attributes

The href Attribute

Example

The src Attribute

Example

The src Attribute

Example

The width and height Attributes

Example

The alt Attribute

Example

The style Attribute

Example

The lang Attribute

The title Attribute

Example

We Suggest: Always Use Lowercase Attributes

We Suggest: Always Quote Attribute Values

Good:

Bad:

The lang Attribute

Example

Single or Double Quotes?

Chapter Summary

HTML Exercises

Exercise:

HTML Styles

Example

The HTML Style Attribute

Background Color

Example

Text Color

Example

Fonts

Text Size