top of page
LESSON FOUR.
HTML Headings and Paragraphs


> HTML Headings:
HTML headings are titles or subtitles that you want to display on a webpage.

Information in the Internet is displayed in different sizes to identify the hierarchy of their importance. For instance, the title is usually written bigger than the usual text. To do this in your HTML document, you have to use the heading tags.

There are six levels of headings, which mean you can use varied heading sizes to create a hierarchy of information.
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.


(Note: Browsers automatically add some white space (a margin) before and after a heading.)
HEADINGS ARE IMPORTANT!
Search engines use the headings to index the structure and content of your web pages.
Users often skim a page 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.
(Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold.)
> 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:


HTML Tag Reference

<html>
<body>
<h1> to <h6>
​Defines HTML headings
Defines the document's body.
Defines the root of an HTML document.
> HTML Paragraphs:
A paragraph always starts on a new line, and is usually a block of text.
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.


> HTML Display:
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 display by adding extra spaces or extra lines in your HTML code.
The browser will automatically remove any extra spaces and lines when the page is displayed


> 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
The <hr> tag is an empty tag, which means that it has no end tag.


> HTML Line Break:
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph.
The <br> tag is an empty tag, which means that it has no end tag.


> The Poem Problem:
This poem will display on a single line.


> Solution - The HTML <pre> Element:
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.


HTML Tag Reference

<p>
<hr>
<br>
<pre>
Defines a paragraph.
Defines a thematic change in the content.
Inserts a single line break.
Defines pre-formatted text.
bottom of page