HTML Headings | html tags

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Try it Yourself »

HTML Headings

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>
Try it Yourself »
Note: Browser add some white spaces (a margin) before and after a heading.

Headings Are Important

Search engines use the headings to index the structure and contents of your web pages.
Users skim your pages by its headings. It is important to use headings to show your document structure.
<h1> headings should be used for the main headings, followed by <h2> headings, then the less important <h3>, and so on.
Note: Use HTML headings for headings only. Do not use headings to make text BIG or bolds.

Bigger Headings

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

Example

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

HTML Horizontal Rules

The tag<hr> defines a thematic break in your  HTML page and is most often displayed as a horizontal rule.
The <hr> element is used to separate contents (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>
Try it Yourself »

The HTML <head> Element

The HTML <head> element has nothing to do with HTML heading.
The <head> element is a container for metadata. HTML metadata is data about the HTML document. Metadata is not displayed.
The <head> element is placed between the <html> tag and the <body> tag:

Example

<!DOCTYPE html>
<html>

<head>
  <title>My First HTML</title>
  <meta charset="UTF-8">
</head>

<body>
.
.
.
Try it Yourself »
Note: Metadata typically defines the document title, character set, styles, links, scripts, and other meta information.

How to View HTML Source?

Have you ever seen a Web page and wondered, How did they are doing that?"

View HTML Source Code:

Right-click in an HTML page and select the "View Page Source" (in Chrome browser) or "View Source" (in IE), or similar in other browsers. This will open a single window containing the HTML source code of the page.

Inspect an HTML Element:

Right-click on any HTML element (or any blank area), and choose "Inspect Element" or "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 is open.

HTML Exercises

Test Yourself With Exercises

Exercise:

Use the correct HTML tag to add heading with the text "London".
 

<p>London is the capital city of England. It's the most popular city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>


HTML Tag Reference

W3Schools' tag reference contains additional pieces of information about these tags and their attributes.
You will learn more about HTML tags and attributes in the next chapter of this tutorial.
TagDescription
<html>Defines the root of an HTML document
<body>Defines the document's body
<head>A container for all the head elements (title, scripts, styles, meta information, and more)
<h1> to <h6>Defines HTML headings
<hr>Defines a thematic change in the content
For a complete list of all available HTML tags, visit  HTML Tag Reference.

No comments:

Post a Comment