Curriculum
Course: HTML Basic
Login

Curriculum

HTML Basic

HTML Introduction

0/1

HTML Editors

0/1

HTML Elements

0/1

HTML Attributes

0/1

HTML Headings

0/1

HTML Paragraphs

0/1

HTML Styles

0/1

HTML Formatting

0/1

HTML Quotation

0/1

HTML Comments

0/1

HTML Colors

0/1

HTML Favicon

0/1

HTML Page Title

0/1

HTML Block and Inline

0/1

HTML Iframes

0/1

HTML Java Script

0/1

HTML File Paths

0/1

HTML - The Head Element

0/1

HTML Style Guide

0/1

HTML Entities

0/1

HTML Symbols

0/1
Text lesson

HTML Paragraphs

The <p> tag in HTML is used to delineate a paragraph, which inherently begins on a new line. Additionally, web browsers instinctively insert a margin both before and after a paragraph to create some white space.

Example

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

HTML Display

The way HTML is displayed can vary.

Different screen sizes and window resizing can produce varying results.

In HTML, adding extra spaces or lines in your code will not change the display.

The browser will automatically remove any additional spaces and lines when rendering the page.

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>

 

Click to Learn

 

HTML Horizontal Rules

The <hr> tag represents a thematic break in an HTML page and is typically displayed as a horizontal line.

The <hr> element is used to separate content or indicate 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>

 

Click to Learn

 

HTML Line Breaks

The <br> tag in HTML is utilized to create a line break, allowing for a new line without the initiation of a new paragraph.

Example

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

 

Click to Learn

 

Always remember a <br> tag is an empty tag and has no end tag.

The Poem Problem

This poem will be displayed 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 <pre> tag in HTML is used to indicate preformatted text, which is shown using a monospace font (typically Courier) and maintains the original spacing 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>