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.

image.png

       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.

image.png

(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:

image.png

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.

image.png
image.png

> 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

image.png
image.png

> 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.

image.png
image.png

> 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.

image.png
image.png

> The Poem Problem:

This poem will display on a single line.

image.png
image.png

> 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.

image.png
image.png

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.

  • alt.text.label.Instagram

©2023 by dariana. 

bottom of page