FB Youtube Twitter

HTML5 Tutorials Part 5

Ashraf Ali S

HTML Headings

Headings are defined with the <h1> to <h6> tags.

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

<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

Headings Are Important

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

Users skim your pages 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.

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:

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

Try It

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:

<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

The HTML <head> Element

The HTML <head> element has nothing to do with HTML headings.

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:

<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8"> </head>
<body>
. . . . .

Try It

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 IE), 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.

Categories: HTML+CSS

1 Comment

ergfirnolikz · 10th January 2019 at 5:04 pm

Howdy very nice blog!! Man .. Excellent .. Wonderful .. I’ll bookmark your website and take the feeds additionallyKI’m satisfied to search out numerous helpful information here within the publish, we need work out more strategies on this regard, thank you for sharing. . . . . .

Leave a Reply

Your email address will not be published. Required fields are marked *