Class 3  >  HTML for Junior Classes  >  HTML Headings & Paragraphs

HTML Headings & Paragraphs - Notes | Study HTML for Junior Classes - Class 3

1 Crore+ students have signed up on EduRev. Have you?

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

Example

HTML Headings & Paragraphs - Notes | Study HTML for Junior Classes - Class 3

HTML Headings

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

Example

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

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:

Example

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

HTML Paragraphs

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.

Example

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

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

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:

Example

<p>

This paragraph

contains a lot of lines

in the source code,

but the browser

ignores it.

</p>


<p>

This paragraph

contains         a lot of spaces

in the source         code,

but the        browser

ignores it.

</p>

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

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

The <hr> tag is an empty tag, which means that it has no end tag.

HTML Line Breaks

The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph:

Example

<p>This is<br>a paragraph<br>with line breaks.</p>

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:

Example

<p>

  My Bonnie lies over the ocean.


  My Bonnie lies over the sea.


  My Bonnie lies over the ocean.


  Oh, bring back my Bonnie to me.

</p>

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:

Example

<pre>

  My Bonnie lies over the ocean.


  My Bonnie lies over the sea.


  My Bonnie lies over the ocean.


  Oh, bring back my Bonnie to me.

</pre>

The document HTML Headings & Paragraphs - Notes | Study HTML for Junior Classes - Class 3 is a part of the Class 3 Course HTML for Junior Classes.
All you need of Class 3 at this link: Class 3
14 videos|31 docs|24 tests
Download as PDF

Download free EduRev App

Track your progress, build streaks, highlight & save important lessons and more!

Related Searches

Semester Notes

,

practice quizzes

,

shortcuts and tricks

,

past year papers

,

Exam

,

Extra Questions

,

mock tests for examination

,

Sample Paper

,

pdf

,

video lectures

,

HTML Headings & Paragraphs - Notes | Study HTML for Junior Classes - Class 3

,

Summary

,

study material

,

HTML Headings & Paragraphs - Notes | Study HTML for Junior Classes - Class 3

,

Previous Year Questions with Solutions

,

ppt

,

HTML Headings & Paragraphs - Notes | Study HTML for Junior Classes - Class 3

,

MCQs

,

Viva Questions

,

Objective type Questions

,

Free

,

Important questions

;