Pages

Monday, May 5, 2014

HTML Headings

Headings are important in HTML documents. A heading in HTML is just what you might expect, a title or subtitle. By placing text inside of <h1> (heading) tags, the text displays bold and the size of the text depends on the number of heading (1-6). Headings are numbered 1-6, with 1 being the largest heading and 6 being the smallest.

HTML Headings:

Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.

Example

<body>
<h1>This is heading one</h1>
<h2>This is heading two</h2>
<h3>This is heading three</h3>
<h4>This is heading four</h4>
<h5>This is heading five</h5>
<h6>This is heading six</h6>
</body>
Place these lines into your HTML file and you should get what is displayed below.

Headings 1-6 Result

This is heading one

This is heading two

This is heading three

This is heading four

This is heading five
This is heading six
Note: Browsers automatically add some empty space (a margin) before and after each heading. Notice that each heading has a line break before and after each heading display. This is a built in attribute so to speak associated with the heading tag. Each time you place a heading tag, your web browser automatically places a line break in front of your beginning tag and after your ending tag exactly the same as with <p> tags.
                           

Headings Are Important:

Use HTML headings for headings only. Don't use headings to make text BIG or bold.
Search engines use your headings to index the structure and content of your web pages.
Since users may skim your pages by its headings, it is important to use headings to show the document structure.
H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on.

HTML Lines:

The <hr> tag creates a horizontal line in an HTML page.
The hr element can be used to separate content:

Example

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

HTML Comments:

Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed.
Comments are written like this:

Example

<!-- This is a comment -->
Note: There is an exclamation point after the opening bracket, but not before the closing bracket.


HTML Tip - How to View HTML Source:

Have you ever seen a Web page and wondered "Hey! How did they do that?"
To find out, right-click in the page and select "View Source" (IE) or "View Page Source" (Firefox), or similar for other browsers. This will open a window containing the HTML code of the page.


essay walkthrough: 

Let's tie together headings and paragraphs to form an essay. Copy(Highlight, then Ctrl C) or code the following in the body of your page or a new page. Or make your own essay paragraphs.

HTML Code:

<h1 align="center">Essay Example</h1>

<p>Avoid losing floppy disks with important school/work

projects on them. Use the web to keep

your content so you can access it from anywhere in the world.

It's also a quick way to write

reminders or notes to yourself. With simple html skills, (the

ones you have gained so far by

now) it is easy.</p>

<p>For instance, let's say you had a HUGE school or work

project to complete. Off hand, the easiest

way to transfer the documents from your house could be a 3.5"

floppy disk. However, there is an

alternative. Place your documents, photos, essays, or videos

onto your web server and access

them from anywhere in the world.

</p>

Result:

Essay Example

Avoid losing floppy disks with important school/work projects on them. Use the web to keep your content so you can access it from anywhere in the world. It's also a quick way to write reminders or notes to yourself. With simple html skills, (the ones you have gained so far by now) it is easy.
For instance, let's say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5" floppy disk. However, there is an alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world.

No comments:

Post a Comment