HTML Tutorial - Basic HTML Tags and Elements Guide

Basic HTML Structure

Tag	Description
<!DOCTYPE>	Defines the document type
<html>	Defines an HTML document
<head>	Contains metadata/information for the document
<title>	Defines a title for the document
<body>	Defines the document's body
<h1> to <h6>	Defines HTML headings
<p>	Defines a paragraph
<br>	Inserts a single line break
<hr>	Defines a thematic change in the content
<!--...-->	Defines a comment

HTML <body> Tag

Example

                            <html>

                            <head>

                              <title>Title of the document</title>

                            </head>

                            <body>

                              <h1>This is a heading</h1>

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

                            </body>

                            </html>

Definition and Usage

The <body> tag defines the document's body.

The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

Note: There can only be one <body> element in an HTML document.

More Examples

Background Image Example:

                            <html>

                            <head>

                              <style>

                                body {

                                  background-image: url(w3s.png);

                                }

                              </style>

                            </head>

                            <body>

                              <h1>Hello world!</h1>

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

                            </body>

Background Color Example:

                            <html>

                            <head>

                              <style>

                                body {

                                  background-color: #E6E6FA;

                                }

                              </style>

                            </head>

                            <body>

                              <h1>Hello world!</h1>

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

                            </body>

Link Styling Examples:

Unvisited Links:

a:link { color: #0000FF; }

Active Links:

a:active { color: #00FF00; }

Visited Links:

a:visited { color: #FF0000; }

HTML <!DOCTYPE> Declaration

<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>

Definition and Usage

All HTML documents must start with a <!DOCTYPE> declaration.

The declaration is not an HTML tag. It is an "information" to the browser about what document type to expect.

In HTML 5, the declaration is simple:

<!DOCTYPE html>

Older HTML Documents

In older documents (HTML 4 or XHTML), the declaration is more complicated because the declaration must refer to a DTD (Document Type Definition).

HTML 4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Tips and Notes

Tip: The <!DOCTYPE> declaration is NOT case sensitive.

Examples

<!DOCTYPE html>

<!DocType html>

<!Doctype html>

<!doctype html>

HTML <html> Tag

A simple HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>

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

</body>
</html>

Definition and Usage

The <html> tag represents the root of an HTML document.

The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).

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

Attributes

Attribute	Value	Description
xmlns	http://www.w3.org/1999/xhtml	Specifies the XML namespace attribute (If you need your content to conform to XHTML)

HTML <head> Tag

Example

                            <!DOCTYPE html>

                            <html lang="en">

                            <head>

                              <title>Title of the document</title>

                            </head>

                            <body>

                              <h1>This is a heading</h1>

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

                            </body>

                            </html>

Definition and Usage

The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.

Metadata is data about the HTML document. Metadata is not displayed.

Metadata typically define the document title, character set, styles, scripts, and other meta information.

Elements inside <head>:

<title> (required in every HTML document)
<style>
<base>
<link>
<meta>
<script>
<noscript>

More Examples

Base Tag Example:

                            <html>

                            <head>

                              <base href="https://www.w3schools.com/" target="_blank">

                            </head>

                            <body>

                              <img src="images/stickman.gif" width="24" height="39" alt="Stickman">

                              <a href="tags/tag_base.asp">HTML base Tag</a>

                            </body>

                            </html>

Style Tag Example:

                            <html>

                            <head>

                              <style>

                                h1 {color:red;}

                                p {color:blue;}

                              </style>

                            </head>

                            <body>

                              <h1>A heading</h1>

                              <p>A paragraph.</p>

                            </body>

                            </html>

Link Tag Example:

                            <html>

                            <head>

                              <link rel="stylesheet" type="text/css" href="styles.css">

                            </head>

                            <body>

                              <h1>I am formatted with a linked style sheet</h1>

                              <p>Me too!</p>

                            </body>

                            </html>

Note: Most browsers will display the <head> element with: display: none;

HTML <title> Tag

Example

                            <!DOCTYPE html>

                            <html>

                            <head>

                              <title>HTML Elements Reference</title>

                            </head>

                            <body>

                              <h1>This is a heading</h1>

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

                            </body>

                            </html>

Definition and Usage

The <title> tag defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.

Important: The <title> tag is required in HTML documents!

The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.

The <title> element:

defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search-engine results

Tips for creating good titles:

Go for a longer, descriptive title (avoid one- or two-word titles)
Search engines will display about 50-60 characters of the title, so try not to have titles longer than that
Do not use just a list of words as the title (this may reduce the page's position in search results)

So, try to make the title as accurate and meaningful as possible!

Note: You can NOT have more than one <title> element in an HTML document.

HTML <h1> to <h6> Tags

Example

The six different HTML headings:

                            <h1>This is heading 1</h1>

                            <h2>This is heading 2</h2>

                            <h3>This is heading 3</h3>

                            <h4>This is heading 4</h4>

                            <h5>This is heading 5</h5>

                            <h6>This is heading 6</h6>

Definition and Usage

The <h1> to <h6> tags are used to define HTML headings.

<h1> defines the most important heading. <h6> defines the least important heading.

Note: Only use one <h1> per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with <h1>, then use <h2>, and so on.

Styling Examples

Background and Text Color:

                            <h1 style="background-color:DodgerBlue;">Hello World</h1>

                            <h2 style="color:Tomato;">Hello World</h2>

Text Alignment:

                            <h1 style="text-align:center">This is heading 1</h1>

                            <h2 style="text-align:left">This is heading 2</h2>

                            <h3 style="text-align:right">This is heading 3</h3>

                            <h4 style="text-align:justify">This is heading 4</h4>

Default CSS Settings

h1 Default Style:

                                    h1 {
                                        display: block;
                                        font-size: 2em;
                                        margin: 0.67em 0;
                                        font-weight: bold;
                                    }
                                

h2 Default Style:

                                    h2 {
                                        display: block;
                                        font-size: 1.5em;
                                        margin: 0.83em 0;
                                        font-weight: bold;
                                    }
                                

h3 Default Style:

                                    h3 {
                                        display: block;
                                        font-size: 1.17em;
                                        margin: 1em 0;
                                        font-weight: bold;
                                    }
                                

h4-h6 Default Styles:

                                    h4 { font-size: 1em; margin: 1.33em 0; }
                                    h5 { font-size: .83em; margin: 1.67em 0; }
                                    h6 { font-size: .67em; margin: 2.33em 0; }
                                

HTML <p> Tag

Example

A paragraph is marked up as follows:

<p>This is some text in a paragraph.</p>

Definition and Usage

The <p> tag defines a paragraph.

Browsers automatically add a single blank line before and after each <p> element.

Styling Examples

Text Alignment:

<p style="text-align:right">This is some text in a paragraph.</p>

CSS Styling:

                            <html>
                            <head>
                              <style>
                                p {
                                  color: navy;
                                  text-indent: 30px;
                                  text-transform: uppercase;
                                }
                              </style>
                            </head>
                            <body>
                              <p>Lorem ipsum dolor sit amet...</p>
                            </body>
                            </html>
                        

Line Breaks in Source Code:

                            <p>
                            This paragraph
                            contains a lot of lines
                            in the source code,
                            but the browser
                            ignores it.
                            </p>
                        

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

Default CSS Settings

                            p {
                                display: block;
                                margin-top: 1em;
                                margin-bottom: 1em;
                                margin-left: 0;
                                margin-right: 0;
                            }
                        

HTML <br> Tag

Example

Insert single line breaks in a text:

<p>To force<br> line breaks<br> in a text,<br> use the br<br> element.</p>

Definition and Usage

The <br> tag inserts a single line break.

The <br> tag is useful for writing addresses or poems.

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

Note: Use the <br> tag to enter line breaks, not to add space between paragraphs.

Example

Using <br> in a poem:

                            <p>
                            Be not afraid of greatness.<br>
                            Some are born great,<br>
                            some achieve greatness,<br>
                            and others have greatness thrust upon them.
                            </p>
                            
                            <p><em>-William Shakespeare</em></p>
                        

HTML <hr> Tag

Example

Use the <hr> tag to define thematic changes in the content:

                            <h1>The Main Languages of the Web</h1>

                            <p>HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web page, and consists of a series of elements. HTML elements tell the browser how to display the content.</p>

                            <hr>

                            <p>CSS is a language that describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work, because it can control the layout of multiple web pages all at once.</p>

                            <hr>

                            <p>JavaScript is the programming language of HTML and the Web. JavaScript can change HTML content and attribute values. JavaScript can change CSS. JavaScript can hide and show HTML elements, and more.</p>

Definition and Usage

The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).

The <hr> element is most often displayed as a horizontal rule that is used to separate content (or define a change) in an HTML page.

Styling Examples

Align a <hr> element:

A noshaded <hr>:

Set the height:

Set the width:

Default CSS Settings

                            hr {
                                display: block;
                                margin-top: 0.5em;
                                margin-bottom: 0.5em;
                                margin-left: auto;
                                margin-right: auto;
                                border-style: inset;
                                border-width: 1px;
                            }
                        

HTML Comments

Example

Here is how you add comments in HTML:

                            <!-- Write your comments here -->
                            
                            <!-- This is a comment -->
                            
                            <p>This is a paragraph.</p>
                            
                            <!-- Remember to add more information here -->

Definition and Usage

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

Note: Comments are used to explain the code and can help when you edit the source code later.

Examples

Hide Content:

                            <p>This is a paragraph.</p>
                            
                            <!-- <p>This is another paragraph</p> -->
                            
                            <p>This is a paragraph too.</p>

Hide Inline Content:

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

Multi-line Comments:

                            <!--
                            <div class="menu">
                                <a href="/html/">HTML</a>
                                <a href="/css/">CSS</a>
                                <a href="/js/">JavaScript</a>
                            </div>
                            -->
                        

Warning: You cannot nest HTML comments (put one comment inside another).

HTML Formatting Tags

Tag	Description
<acronym>	Not supported in HTML5. Use <abbr> instead. Defines an acronym
<abbr>	Defines an abbreviation or an acronym
<b>	Defines bold text
<bdi>	Isolates a part of text that might be formatted differently from the rest of the document
<bdo>	Overrides the current text direction
<big>	Not supported in HTML5. Use CSS instead. Defines big text
<i>	Defines italic text
<ksup>	Not supported in HTML5. Use CSS instead. Defines text that should be displayed as superscripted
<ksub>	Not supported in HTML5. Use CSS instead. Defines text that should be displayed as subscripted
<mark>	Defines marked/highlighted text
<small>	Defines smaller text
<strong>	Defines important text
<sub>	Defines subscripted text
<sup>	Defines superscripted text
<time>	Defines a specific time (or datetime)
<u>	Defines text that should be underlined
<wbr>	Defines a possible line-break

Note: Some tags like <font>, <center>, and <strike> are not supported in HTML5. Use CSS for styling instead.

HTML <abbr> Tag

Example

An abbreviation is marked up as follows:

The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.

Definition and Usage

The <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".

Tip: Use the global title attribute to show the description for the abbreviation/acronym when you mouse over the element.

More Examples

                            <p>The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.</p>
                        

HTML <address> Tag

Example

Contact information for Example.com:

<address> Written by <a href="mailto:[email protected]">Jon Doe</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address>

Definition and Usage

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

Note: The text in the <address> element usually renders in italic, and browsers will always add a line break before and after the element.

HTML <b> Tag

Example

Make some text bold (without marking it as important):

<p>This is normal text - <b>and this is bold text</b>.</p>

Definition and Usage

The <b> tag specifies bold text without any extra importance.

Tips and Notes

Note: According to the HTML5 specification, the <b> tag should be used as a LAST resort when no other tag is more appropriate.

The specification states that:

Headings should use <h1> to <h6> tags
Emphasized text should use <em> tag
Important text should use <strong> tag
Marked/highlighted text should use <mark> tag

Tip: You can also use CSS to set bold text: font-weight: bold;

HTML <bdi> Tag

Example

Isolate the usernames from the surrounding text-direction settings:

                            <ul>

                              <li>User <bdi>hrefs</bdi>: 60 points</li>

                              <li>User <bdi>jdoe</bdi>: 80 points</li>

                              <li>User <bdi>إيان</bdi>: 90 points</li>

                            </ul>

Definition and Usage

BDI stands for Bi-Directional Isolation.

The <bdi> tag isolates a part of text that might be formatted in a different direction from other text outside it.

This element is useful when embedding user-generated content with an unknown text direction.

HTML <bdo> Tag

Example

Specify the text direction:

                            <bdo dir="rtl">

                              This text will go right-to-left.

                            </bdo>

HTML <blockquote> Tag

Example

A section that is quoted from another source:

                            <blockquote cite="http://www.worldwildlife.org/who/index.html">

                              For 50 years, WWF has been protecting the future of nature.

                              The world's leading conservation organization, WWF works in 100 countries

                              and is supported by 1.2 million members in the United States and close to 5 million globally.

                            </blockquote>

Definition and Usage

The <blockquote> tag specifies a section that is quoted from another source.

Browsers usually indent <blockquote> elements.

Tips and Notes

Tip: Use <q> for inline (short) quotations.

HTML <cite> Tag

Example

Define the title of a work with the <cite> tag:

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

Definition and Usage

The <cite> tag defines the title of a creative work (e.g., a book, a poem, a song, a movie, a painting, etc.).

Note: A person's name is not the title of a work.

The text in the <cite> element usually renders in italic.

HTML <code> Tag

Example

Define some text as computer code in a document:

                            <p>The HTML <code>button</code> tag defines a clickable button.</p>

                            <p>The CSS <code>background-color</code> property defines the background color of an element.</p>

Definition and Usage

The <code> tag is used to define a piece of computer code. The content inside is displayed in the browser's default monospace font.

Related Tags

Tag	Description
<samp>	Defines sample output from a computer program
<kbd>	Defines keyboard input
<var>	Defines a variable
<pre>	Defines preformatted text

HTML <del> Tag

Example

A text with a deleted part, and a new, inserted part:

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

Definition and Usage

The <del> tag defines text that has been deleted from a document. Browsers will usually strike a line through deleted text.

Attributes

Attribute	Value	Description
cite	URL	Specifies a URL to a document that explains the reason why the text was deleted/changed
datetime	YYYY-MM-DDThh:mm:ssTZD	Specifies the date and time of when the text was deleted/changed

HTML <dfn> Tag

Example

Mark up a term with <dfn>:

<p><dfn>HTML</dfn> is the standard markup language for creating web pages.</p>

Definition and Usage

The <dfn> tag stands for "definition element", and it specifies a term that is going to be defined within the content.

The nearest parent of the <dfn> tag must also contain the definition/explanation for the term.

Usage Examples

1. Basic Usage:

<p><dfn>HTML</dfn> is the standard markup language for creating web pages.</p>

2. With title attribute:

                            <p><dfn title="HyperText Markup Language">HTML</dfn> is the standard markup language for creating web pages.</p>
                        

3. With abbr tag:

                            <p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> is the standard markup language for creating web pages.</p>
                        

4. With id reference:

                            <p><dfn id="html-def">HTML</dfn> is the standard markup language for creating web pages.</p>
                            <p>Learn <a href="#html-def">HTML</a> now.</p>
                        

HTML <em> Tag

Example

Mark up emphasized text in a document:

                            <p>You <em>have</em> to hurry up!</p>
                            <p>We <em>cannot</em> live like this.</p>
                        

HTML <i> Tag

Example

Mark up text that is set off from the normal prose in a document:

                            <p><i>Lorem ipsum</i> is the most popular filler text in history.</p>
                            <p>The <i>RMS Titanic</i>, a luxury steamship, sank on April 15, 1912 after striking an iceberg.</p>
                        

Definition and Usage

The <i> tag defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.

The <i> tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.

Note: Use the <i> element only when there is not a more appropriate semantic element.

Alternative Tags

<em> - for emphasized text
<strong> - for important text
<mark> - for marked/highlighted text
<cite> - for titles of works
<dfn> - for definition terms

HTML <ins> Tag

Example

A text with a deleted part, and a new, inserted part:

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

Definition and Usage

The <ins> tag defines text that has been inserted into a document. Browsers will usually underline inserted text.

Tip: Use with the <del> tag to show both deleted and inserted text.

Attributes

Attribute	Value	Description
cite	URL	Specifies a URL to a document that explains the reason why the text was inserted/changed
datetime	YYYY-MM-DDThh:mm:ssTZD	Specifies the date and time when the text was inserted/changed

HTML <kbd> Tag

Example

Define some text as keyboard input in a document:

                            <p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).</p>
                            <p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac OS).</p>
                        

Definition and Usage

The <kbd> tag is used to define keyboard input. The content inside is displayed in the browser's default monospace font.

Related Tags

Tag	Description
<code>	Defines a piece of computer code
<samp>	Defines sample output from a computer program
<var>	Defines a variable
<pre>	Defines preformatted text

HTML <mark> Tag

Example

Highlight parts of a text:

<p>Do not forget to buy <mark>milk</mark> today.</p>

Definition and Usage

The <mark> tag defines text that should be marked or highlighted.

HTML <meter> Tag

Example

Use the meter element to display a scalar value within a given range (a gauge):

                            <label for="disk_c">Disk usage C:</label>
                            <meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter><br>
                            <label for="disk_d">Disk usage D:</label>
                            <meter id="disk_d" value="0.6">60%</meter>
                        

Definition and Usage

The <meter> tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge.

Examples: Disk usage, the relevance of a query result, etc.

Note: The <meter> tag should not be used to indicate progress (as in a progress bar). For progress bars, use the <progress> tag.

Tip: Always add the <label> tag for best accessibility practices!

Attributes

Attribute	Value	Description
form	form_id	Specifies which form the <meter> element belongs to
high	number	Specifies the range that is considered to be a high value
low	number	Specifies the range that is considered to be a low value
max	number	Specifies the maximum value of the range
min	number	Specifies the minimum value of the range. Default value is 0
optimum	number	Specifies what value is the optimal value for the gauge
value	number	Required. Specifies the current value of the gauge

HTML <pre> Tag

Example

Preformatted text:

<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks
</pre>
                        

Definition and Usage

The <pre> tag defines preformatted text.

Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.

Related Tags

Tag	Description
<code>	Defines a piece of computer code
<samp>	Defines sample output from a computer program
<kbd>	Defines keyboard input
<var>	Defines a variable