Abstract:

HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. HTML is a combination of Hypertext and Markup language. Hypertext defines the link between web pages. A markup language is used to define the text document within the tag which defines the structure of web pages. This language is used to annotate (make notes for the computer) text so that a machine can understand it and manipulate text accordingly. Most markup languages (e.g. HTML) are human-readable. The language uses tags to define what manipulation has to be done on the text.

Keywords:

HTML, Hypertext, Markup, Language, Manipulation, Editor, <HTML>, <!DOCTYPEhtml>

Learning Outcomes

After undergoing this article you will be able to understand the following:

1. What's exactly HTML?

2. What is an HTML Element?

3. What's the history of HTML?

4. Why HTML is so important?

5. How many properties functions and values are there in HTML?

6. What are the different types of HTML tags?

7. Where HTML has extensive applications?

8. What are its advantages?

9. What are its disadvantages?

10. Tips and Tricks to use HTML?

11. Conclusions

12. FAQs

References

1. What's exactly 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

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

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

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

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:

<html>

<head>

<title>Page title</title>

</head>

<body>

<h1>This is a heading</h1>

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

<p>This is another paragraph.</p>

</body>

</html>

3. What's the history of HTML?

HTML History

Since the early days of the World Wide Web, there have been many versions of HTML:

Year	Version
1989	Tim Berners-Lee invented www
1991	Tim Berners-Lee invented HTML
1993	Dave Raggett drafted HTML+
1995	HTML Working Group defined HTML 2.0
1997	W3C Recommendation: HTML 3.2
1999	W3C Recommendation: HTML 4.01
2000	W3C Recommendation: XHTML 1.0
2008	WHATWG HTML5 First Public Draft
2012	WHATWG HTML5 Living Standard
2014	W3C Recommendation: HTML5
2016	W3C Candidate Recommendation: HTML 5.1
2017	W3C Recommendation: HTML5.1 2nd Edition
2017	W3C Recommendation: HTML5.2

This tutorial follows the latest HTML5 standard.

4. Why HTML is so important?

Every website you open in a web browser uses HTML from social networks to music services. Each student needs to understand the importance of HTML because it helps to create web pages. HTML describes the structure of a website description and sign for presentation, making it a markup language comparatively a programming language. It’s a form of computer language used to create web pages on the internet viewable. It is the fundamental technology behind everything you see in a web browser, and it is used to build everything from simple web pages to complicated web applications and services.

The importance of HTML can be enumerated as follows:

Website accessibility:

Accessibility supports social inclusion and also benefits people without disabilities. HTML code helps to pinpoint areas of potential blockage that could prevent search engine spiders or visitors from accessing your website. This is the first importance of HTML.

Search engine-friendly page:

Clear and simple code enables search engines to quickly and thoroughly spider your page. Scoring high in search engine results is complex because millions of sites for the top spots and search engines use complicated formulas to regulate which website should match any given keyword search. This is the second importance of HTML.

Faster loading:

If your web page contains HTML errors, it will take longer for the search engine to spider it, slowing the loading time. Developing page load performance is not just for the content viewed by broadband dial-up or mobile device visitors. This is the third importance of HTML.

Less load on servers:

Clean and easy code will not tax you as much as a site that has a complicated code or contains many nested tables. Cascading style sheets will extensively use code within your web pages. This is the fourth importance of HTML.

Easier to update and maintain the website:

With no mistakes in your HTML code, it is easier and quicker to make changes to your web pages. This means you will save time and money when maintaining clients’ sites. This is the fifth importance of HTML.

Browser compatibility:

Validated code ensures your site is compatible with current and future browsers. Current browsers to update their rules and future browsers will ensure they are Html compliant. This is the sixth importance of HTML.

In sum and substance, today, HTML knowledge is necessary for anyone who wants to build, manage or improve websites — from professional developers to marketers and small-time business owners.

5. What are the features and functions of HTML?

HTML editors.

However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).

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

<!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").

Example

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>This is a Heading</h1>

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

</body>

</html>

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

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>

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

Example

The link's destination is specified in the href attribute.

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

The source file (src), alternative text (alt), width, and height are provided as attributes:

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:

Click CTRL + U in an HTML page, or right-click on the page and select "View Page Source". This will open a new tab containing the HTML source code of the page.

Inspect an HTML Element:

Right-click on an element (or a blank area), and choose "Inspect" 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

Note: Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!

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

Never Skip the End Tag

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

Example

<html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>

However, never rely on this! Unexpected results and errors may occur if you forget the end tag!

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.

Reference

W3Schools' tag reference contains additional information about these tags and their attributes.

Tag	Description
<html>	Defines the root of an HTML document
<body>	Defines the document's body
<h1> to <h6>	Defines HTML headings

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

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

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

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

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.

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>

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>

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.

At W3Schools we always use lowercase attribute names.

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:

Example

At W3Schools we always use quotes around attribute values.

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:

Or vice versa:

Summary of attributes

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 headings

HTML headings are titles or subtitles that you want to display on a webpage.

Example

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

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>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Note: Browsers automatically add some white space (a margin) before and after a heading.

Headings Are Important

Search engines use the headings to index the structure and content of your web pages.

Users often skim a page by its headings. It is important to use headings to show the document structure.

<h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.

Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold.

Bigger Headings

Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property:

Example

<h1 style="font-size:60px;">Heading 1</h1>

W3Schools' tag reference contains additional information about these tags and their attributes.

Tag	Description
<html>	Defines the root of an HTML document
<body>	Defines the document's body
<h1> to <h6>	Defines HTML headings

HTML Paragraph

A paragraph always starts on a new line, and is usually a block of text.

HTML Paragraphs

The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.

Example

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Display

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 display by adding extra spaces or extra lines in your HTML code.

The browser will automatically remove any extra spaces and 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 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>

The <hr> tag is an empty tag, which means that it has no end tag.

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 <br> tag is an empty tag, which means that it has no end tag.

The Poem Problem

This poem will display on a single line:

Example

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

Solution - 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 Tag Reference

W3Schools' tag reference contains additional information about HTML elements and their attributes.

Tag	Description
<p>	Defines a paragraph
<hr>	Defines a thematic change in the content
<br>	Inserts a single line break
<pre>	Defines pre-formatted text

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

The property is a CSS property. The value is a CSS value.

You will learn more about CSS later in this tutorial.

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 style="background-color:powderblue;">

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

</body>

Example

Set background color for two different elements:

<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="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

The CSS font-family property defines the font to be used 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>

Text Size

The CSS font-size property defines the text size for an HTML element:

Example

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">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 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

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

<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>This text is italic</i>

The HTML <em> element defines emphasized text. The content inside is typically displayed in italic.

Tip: A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.

Example

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

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 Text Formatting Elements

Tag	Description
<b>	Defines bold text
<em>	Defines emphasized text
<i>	Defines a part of text in an alternate voice or mood
<small>	Defines smaller text
<strong>	Defines important text
<sub>	Defines subscripted text
<sup>	Defines superscripted text
<ins>	Defines inserted text
<del>	Defines deleted text
<mark>	Defines marked/highlighted text

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:

“Whatever the job you are asked to do at whatever level, do a good job because your reputation is your resume.” – Madeleine Albright.

<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">
“Whatever the job you are asked to do at whatever level, do a good job because your reputation is your resume.” – Madeleine Albright.
</blockquote>

HTML <q> for Short Quotations

The HTML <q> tag defines a short quotation.

Browsers normally insert quotation marks around the quotation.

Example

<p>job's goal is to: <q>Build a future where people earn for livelihood .</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 Quotation and Citation Elements

Tag	Description
<abbr>	Defines an abbreviation or acronym
<address>	Defines contact information for the author/owner of a document
<bdo>	Defines the text direction
<blockquote>	Defines a section that is quoted from another source
<cite>	Defines the title of a work
<q>	Defines a short inline quotation

HTML Comments

HTML comments are not displayed in the browser, but they can help document your HTML source code.

HTML Comment Tag

You can add comments to your HTML source by using the following syntax:

Notice that there is an exclamation point (!) in the start tag, but not in the end tag.

Note: Comments are not displayed by the browser, but they can help document your HTML source code.

Add Comments

With comments you can place notifications and reminders in your HTML code:

Example

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

Hide Content

Comments can be used to hide content.

This can be helpful if you hide content temporarily:

Example

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



<p>This is a paragraph too.</p>

You can also hide more than one line. Everything between the  will be hidden from the display.

Example

Hide a section of HTML code:

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

<p>This is a paragraph too.</p>

Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors

Hide Inline Content

Comments can be used to hide parts in the middle of the HTML code.

Example

Hide a part of a paragraph:

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

HTML Colors

HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.

Color Names

In HTML, a color can be specified by using a color name:

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

HTML supports 140 standard color names.

Background Color

You can set the background color for HTML elements:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

Text Color

You can set the color of text:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

HTML Colors

HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.

Color Names

In HTML, a color can be specified by using a color name:

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

HTML supports 140 standard color names.

Background Color

You can set the background color for HTML elements:

Hello World

Example

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

Text Color

You can set the color of text:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Border Color

You can set the color of borders:

Hello World

Example

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

Color Values

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.

The following three <div> elements have their background color set with RGB, HEX, and HSL values:

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

The following two <div> elements have their background color set with RGBA and HSLA values, which add an Alpha channel to the color (here we have 50% transparency):

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)

Example

HTML RGB and RGBA Colors

An RGB color value represents RED, GREEN, and BLUE light sources.

An RGBA color value is an extension of RGB with an Alpha channel (opacity).

RGB Color Values

In HTML, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color with a value between 0 and 255.

This means that there are 256 x 256 x 256 = 16777216 possible colors!

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255), and the other two (green and blue) are set to 0.

Another example, rgb(0, 255, 0) is displayed as green, because green is set to its highest value (255), and the other two (red and blue) are set to 0.

To display black, set all color parameters to 0, like this: rgb(0, 0, 0).

To display white, set all color parameters to 255, like this: rgb(255, 255, 255).

Experiment by mixing the RGB values below:

rgb(255, 99, 71)

RED

255

GREEN

BLUE

Example

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

HTML RGB and RGBA Colors

An RGB color value represents RED, GREEN, and BLUE light sources.

An RGBA color value is an extension of RGB with an Alpha channel (opacity).

RGB Color Values

In HTML, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color with a value between 0 and 255.

This means that there are 256 x 256 x 256 = 16777216 possible colors!

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255), and the other two (green and blue) are set to 0.

Another example, rgb(0, 255, 0) is displayed as green, because green is set to its highest value (255), and the other two (red and blue) are set to 0.

To display black, set all color parameters to 0, like this: rgb(0, 0, 0).

To display white, set all color parameters to 255, like this: rgb(255, 255, 255).

Experiment by mixing the RGB values below:

rgb(255, 99, 71)

RED

255

GREEN

BLUE

Example

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

Shades of Gray

Shades of gray are often defined using equal values for all three parameters:

Example

rgb(60, 60, 60)

rgb(100, 100, 100)

rgb(140, 140, 140)

rgb(180, 180, 180)

rgb(200, 200, 200)

rgb(240, 240, 240)

RGBA Color Values

RGBA color values are an extension of RGB color values with an Alpha channel - which specifies the opacity for a color.

An RGBA color value is specified with:

rgba(red, green, blue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

Experiment by mixing the RGBA values below:

rgba(255, 99, 71, 0.5)

RED

255

GREEN

BLUE

ALPHA

0.5

Example

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.6)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)

HTML HEX Colors

A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color.

HEX Color Values

In HTML, a color can be specified using a hexadecimal value in the form:

#rrggbb

Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).

For example, #ff0000 is displayed as red, because red is set to its highest value (ff), and the other two (green and blue) are set to 00.

Another example, #00ff00 is displayed as green, because green is set to its highest value (ff), and the other two (red and blue) are set to 00.

To display black, set all color parameters to 00, like this: #000000.

To display white, set all color parameters to ff, like this: #ffffff.

Experiment by mixing the HEX values below:

#ff6347

RED

GREEN

BLUE

Example

#ff0000

#0000ff

#3cb371

#ee82ee

#ffa500

Shades of Gray

Shades of gray are often defined using equal values for all three parameters:

Example

#404040

#686868

#a0a0a0

#bebebe

#dcdcdc

#f8f8f8

HTML HSL and HSLA Colors

HSL stands for hue, saturation, and lightness.

HSLA color values are an extension of HSL with an Alpha channel (opacity).

HSL Color Values

In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the form:

hsl(hue, saturation, lightness)

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.

Saturation is a percentage value. 0% means a shade of gray, and 100% is the full color.

Lightness is also a percentage value. 0% is black, and 100% is white.

Experiment by mixing the HSL values below:

hsl(0, 100%, 50%)

HUE

SATURATION

100%

LIGHTNESS

50%

Example

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

Saturation

Saturation can be described as the intensity of a color.

100% is pure color, no shades of gray.

50% is 50% gray, but you can still see the color.

0% is completely gray; you can no longer see the color.

Example

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

Lightness

The lightness of a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light), and 100% means full lightness (white).

Example

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)

Shades of Gray

Shades of gray are often defined by setting the hue and saturation to 0, and adjusting the lightness from 0% to 100% to get darker/lighter shades:

Example

hsl(0, 0%, 20%)

hsl(0, 0%, 30%)

hsl(0, 0%, 40%)

hsl(0, 0%, 60%)

hsl(0, 0%, 70%)

hsl(0, 0%, 90%)

HSLA Color Values

HSLA color values are an extension of HSL color values, with an Alpha channel - which specifies the opacity for a color.

An HSLA color value is specified with:

hsla(hue, saturation, lightness, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

Experiment by mixing the HSLA values below:

hsla(0, 100%, 50%, 0.5)

HUE

SATURATION

100%

LIGHTNESS

50%

ALPHA

0.5

Example

hsla(9, 100%, 64%, 0)

hsla(9, 100%, 64%, 0.2)

hsla(9, 100%, 64%, 0.4)

hsla(9, 100%, 64%, 0.6)

hsla(9, 100%, 64%, 0.8)

hsla(9, 100%, 64%, 1)

6. What are the different types of HTML tags?

There are two kinds of HTML tags: paired and unpaired.

Paired tags require an opening tag that turns a formatting feature on and a closing tag that turns the feature off. Paired tags must surround the text you want formatted with that feature.

For example, <u> and </u> will underline text.

The Types of tags used in HTML are as follows:

TAG

HTML tags

Div

DOCTYPE

Formatting tags

Metadata

HTML

HTML elements

I'm G

Italic tag

List tags

Table tags

Body

Bold tag

Empty tag

Form tags

Head

Head tag

Image Tags

Input

Link Tags

7. Where HTML has extensive applications?

HTML is a widely used markup language and serves versatile programming needs. When used with JavaScript and CSS, the heavily utilized languages become an incomparable match for web page design and web applications.

The following are some striking uses of HTML:

Creation of web document
Development of web pages
Internet navigation
Responsive images on web pages
Offline capabilities usage
Storage at the client side
Game development
Data entry support
Native APIs usage to enhance the website

8. What are HTML advantages?

The advantages of HTML are following

HTML helps to build structure of a website and is a widely used Markup language.
It is easy to learn.
Every browser supports HTML Language.
HTML is light weighted and fast to load.
Storage of big files are allowed because of the application cache feature.
Do not get to purchase any extra software because it’s by default in every window.
Loose syntax (although, being too flexible won’t suit standards).
HTML is simple to edit as being a plain text.
It integrates easily with other languages such as JavaScript, CSS etc.
HTML is that it is easy to code even for novice programmers.
HTML also allows the utilization of templates, which makes designing a webpage easy.
It is fast to download as the text is compressible.
Very useful for beginners in the web designing field.
HTML can be supported to each and every browser, if not supported to all the browsers.
HTML is built on almost every website, if not all websites.
HTML is increasingly used for data storage as like XML syntax.
HTML has many tag and attributes which can short your line of code.

9. What are HTML disadvantages?

It cannot produce dynamic output alone, since it’s a static language.
Making the structure of HTML documents becomes tough to understand.
Errors can be costly.
It is the time consuming as the time it consume to maintain on the color scheme of a page and to make lists, tables and forms.
We need to write a lot of code for just creating a simple webpage.
We have to check up the deprecated tags and confirm not to use them to appear because another language that works with HTML has replaced the first work of the tag, and hence the opposite language needs to be understood and learned.
Security features offered by HTML are limited.
If we need to write down long code for creating a webpage then it produces some complexity.
HTML can create only static and plain pages so if we’d like dynamic pages then HTML isn’t useful.
Editing of web page need to be done separately , they are not centralized.

10. Tips and Tricks to use HTML

If you’re just starting out with building your Web pages, these techniques should be very useful to you!

1. Always close your HTML tags

When you type an opening HTML tag (e.g. <b>, <p>), always place the corresponding closing tag at the end. For example:

<b>My favourite animals are horses and elephants.</b>
<p>My favourite animals are horses and elephants.</p>
<h2>My favourite animals are horses and elephants.</h2>

This will ensure that your HTML pages work properly on all browsers, and will help to prevent any strange problems occurring in your pages! This is especially important with tags such as <div>, <span>, <table>, <tr> and <td>.

Some tags don’t have a corresponding closing tag – just use these tags on their own. Examples include:

The <br> tag, for creating line breaks
The <img> tag, for inserting images

With XHTML markup, you even have to close tags like br and img. You can do this in a short-hand way by placing a "/" before the closing angle bracket (">") – for example, <br/> and <img ... />.

2. Style HTML using style sheets wherever possible

Style sheets will make your HTML coding life so much easier. No more <font> tags everywhere! You also get much finer control over the way your pages look, and you can change their appearance just by editing one style sheet file.

3. Use an HTML validator

It’s a great idea to run your Web pages through an HTML validator before you publish them on your Web site. These programs will pick up potential problems such as missing closing tags on tables, and using tags that won’t work properly on all browsers. Don’t forget – just because your page looks great in the browser you’re viewing it with doesn’t mean it will work on other browsers!

HTML validators are also a good way to learn about the correct way to use HTML tags – you can learn from your mistakes!

4. Use HTML comments wisely

To make your HTML code clearer for you (and for others), you can add comments to your code. These are snippets of code that are ignored by Web browsers, so they’re useful for adding short notes and reminders within the code:


<!-- Navigation area: Highlight a menu item with the "hi" class -->

<div id="nav">
  <ul>
    <li><a href="/">Home</a></li>
    <li class="hi"><a href="/about/">About</a></li>
  </ul>
</div>

5. Embedding images in HTML

Pointing correctly to images using the <img> tag is a common stumbling block for beginners. Often your Web page will look great on your desktop PC, but when you upload the page to your site, all the images are broken!

The problem isn’t helped by some web page editors, which incorrectly place “file://” image URLs instead of using relative URLs!

Follow these simple rules to make sure your HTML images appear correctly every time.

A) If possible, use relative URLs

Relative URLs are usually the best to use because they will work wherever the page and images are located, provided they’re always in the same place relative to each other. For example, if the image is in the same folder as the Web page, use:


<img src="myphoto.jpg">

If the image is in an images folder at the same level as the Web page, use:


<img src="images/myphoto.jpg">

If the image is in an images folder at a level above the Web page, use:


<img src="../images/myphoto.jpg">

B) Alternatively, use URLs relative to the document root

If you have all your images in an images folder in the top level of your site (the document root or web root), you can reference images like this:


<img src="/images/myphoto.jpg">

This has the advantage that you can move your Web page anywhere within your site, and the images will still display, provided you keep the images in this global images folder.

The disadvantage of this approach is that it will only work when your Web pages are being displayed via a Web server (using http://), not when viewed directly from your hard drive (using file://).

C) Do not use absolute URLs!

If at all possible, avoid using absolute URLs within your site. An absolute URL is a URL that begins with http:// or file://. In particular, if the Web page on your hard drive contains an image URL like this:


<img src="file:///C:|/mywebsite/images/myphoto.jpg">

it will not work when you upload it to your Web server, as the img tag is directly referencing the file on your hard drive! Change the link to a relative link such as:


<img src="myphoto.jpg">

or maybe:


<img src="../images/myphoto.jpg">

as described in Rule A above.

6. Use widths and heights with HTML images

It’s a good idea to specify the width and height of an image when using an <img> tag. For example:


<img src="myphoto.jpg" width="234" height="123">

The advantage of doing this is that the Web browser can format the page more quickly as it is loaded, as it knows how to lay out the images before they’ve been downloaded. This means that your visitors can start surfing your page without having to wait for all the images to display!

Most graphics packages (Photoshop, Paint Shop Pro, etc) allow you to view the width and height of an image (in pixels) so that you can slot the values into the <img> tag. You can also right-click on the image and select Properties (in Internet Explorer) or view the image in a window on its own and read the width and height in the title bar (in most other browsers).

7. Non-breaking spaces in HTML

Sometimes you want to keep certain words together so that they’re not split over two lines. The way to do this is with a non-breaking space. In HTML the markup for a non-breaking space looks like this:


&nbsp;

For example, the following words will wrap if they fall at the end of a line:


<p>The quick brown fox</p>

while this example, which uses a non-breaking space, will keep the words “brown” and “fox” together even if they fall at the end of a line:


<p>The quick brown&nbsp;fox</p>

8. Use tables for tabular data, CSS for layout

Tables have traditionally been used to lay out content on the page; however this was never their intended use. They’re really meant to be used for displaying tabular data (such as data from a spreadsheet, for example).

With the positioning capabilities of CSS, you can build HTML pages that just contain the page content, and use a separate style sheet to lay the content out. Although it has a steeper learning curve than tables-based layouts, CSS positioning is well worth learning as your resulting sites will be faster-loading, easier to maintain and more accessible.

9. Creating empty table cells

Sometimes you’ll want to create table cells (<td>s) with nothing in them; for example, when a particular row doesn’t have any data for one of its columns. Usually, the best way to create an empty table cell is with a non-breaking space, as follows:


<td>&nbsp;</td>

Don’t just use <td></td> as this will cause your tables to appear rather strange on some browsers!

10. The spacer GIF trick

For really precise control over page layout, and if you haven’t yet got the hang of CSS positioning, you can’t beat the old spacer GIF trick. This involves using a 1 pixel x 1 pixel transparent GIF, which will be invisible in your Web pages, and using the width and height attributes to control the precise padding between page elements such as images, text and table cells. For example, the code:


<img src="one.gif" width="20" height="20" border="0">
<img src="space.gif" width="10" height="1" border="0">
<img src="two.gif" width="20" height="20" border="0">

will create a 10-pixel horizontal gap between the two images, one.gif and two.gif.

You can use spacer GIFs in table cells to “pad out” the table cell and make sure it doesn’t shrink below a certain width or height. In this code example:


<td><img src="space.gif" width="1" height="20" border="0"></t

11. Conclusions

In HTML, a closing tag is an instructional piece of code that ends a section of page content. It's nearly the same as an opening tag (e.g., "<p>") but it has a forward slash (e.g., "</p>") to let browsers know where to start and end different elements.

The practice is the key. Learning the concepts in the first half of the journey which you can easily get with these books. Applying the concepts to design beautiful web designs and applications would be the path changer. Go ahead, experiment, learn and enjoy the developer journey.

12. FAQs

Do I need to know the frameworks if I am new to coding?

It is not a necessity to know frameworks from the very beginning. If you are a complete newbie, you should focus on your basics such as HTML, CSS, problem-solving using vanilla JavaScript. Vanilla JavaScript is nothing fancy just the plain Javascript programming language. Frameworks are based on the programming languages so once you are proficient in the language, acquiring skills with the frameworks can be a cakewalk but the opposite can be frustrating and time-consuming.

How can I strengthen my CSS skills?

Most of the developers struggle with CSS. You should not worry because of CSS. The more you build with CSS the better you become. There isn’t everything you can learn by reading but CSS is more like math, the better you practice, the stronger it gets.

References

1. W3Schools

https://www.w3schools.com

W3Schools

2. Learning web design

3. Site Structure And Responsive Design

4. HTML and CSS QuickStart Guide

5. Head First HTML and CSS

6. HTML5 and CSS3 For Dummies

7. CSS pocket reference

8. HTML examples

9. Introducing HTML5

10. CSS

11. Web Design Playground: HTML & CSS The Interactive Way

12. Learn JavaScript visually with Interactive Exercises

13. The Truth About Html5

14. Brief Introduction To Javascript

15. HTML5 canvas

16. HTML 5 the missing manual

Why HTML is Technology Revolution for Website Design? How Does it Works? Know it's Types, Applications, Advantages Tips and Tricks + Much More...? Try It Yourself !

A Simple HTML Document

Example

Example Explained

HTML Basic Examples

Example

The <!DOCTYPE> Declaration

Example

HTML Paragraphs

Example

Example

Example

View HTML Source Code:

Inspect an HTML Element:

HTML Elements

Example

Example Explained

Example

Example

The alt Attribute

Example

Example

Good:

Bad:

Example

Summary of attributes

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Example

Example

HTML Paragraphs

Example

Example

HTML Horizontal Rules

Example

Example

Example

Solution - The HTML <pre> Element

Example

HTML Tag Reference

HTML Styles

Example

Example

Text Color

Example

Example

Example

Text Alignment

Example

HTML Text Formatting

Example

Example

HTML <i> and <em> Elements

Example

Example

HTML <small> Element

Example

HTML <mark> Element

Example

HTML <del> Element

Example

HTML <ins> Element

Example

HTML <sub> Element

Example

HTML <sup> Element

Example

HTML Text Formatting Elements

HTML Quotation and Citation Elements

<blockquote> for Quotations

Example

Example

Example

Example

HTML <cite> for Work Title

Example