Comments, Questions, Suggestions, or Opinions












Tutorials
Lesson:

  1. What is HTML?

  2. HTML Editors
  3. HTML Elements and Attributes

  4. HTML Headings and Paragraphs

  5. HTML Formatting

  6. HTML Links

  7. HTML Images

  8. HTML Tables

  9. HTML Lists

  10. HTML Forms

Exercises
For every lesson:

  1. Hyper Text Markup Language

  2. Notepad

  3. Start tag to End tag and name="value"

  4. <h1> and <p>

  5. <b> and <i>

  6. <a href=>

  7. <img src=>

  8. <th> <tr> and <td>

  9. <OL> and <UL>

  10. <form>



My accounts:







Lesson 4: Headings and Paragraphs


Headings are important in HTML documents.

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>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

Try it yourself »

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


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>

Try it yourself »


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.


HTML Tag Reference

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

You will learn more about HTML tags and attributes in the next chapters of this tutorial.

Tag Description
<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
<hr> Defines a horizontal line
<!--> Defines a comment









HTML documents are divided into paragraphs.


HTML Paragraphs

Paragraphs are defined with the <p> tag.

Example

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

Try it yourself »

Note: Browsers automatically add an empty line before and after a paragraph.


Don't Forget the End Tag

Most browsers will display HTML correctly even if you forget the end tag:

Example

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

Try it yourself »

The example above will work in most browsers, but don't rely on it. Forgetting the end tag can produce unexpected results or errors.

Note: Future version of HTML will not allow you to skip end tags.


HTML Line Breaks

Use the <br> tag if you want a line break (a new line) without starting a new paragraph:

Example

<p>This is<br>a para<br>graph with line breaks</p>

Try it yourself »

The <br> element is an empty HTML element. It has no end tag.


HTML Output - Useful Tips

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

The browser will remove extra spaces and extra lines when the page is displayed. Any number of lines count as one line, and any number of spaces count as one space.

Try it yourself

(The example demonstrates some HTML formatting problems)


HTML Tag Reference

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

Tag Description
<p> Defines a paragraph
<br> Inserts a single line break





Click here to take the exercises of this lesson -->