Organizing Text in HTML

1.3 Organizing Text in HTML

HTML provides several methods for organizing text content in a meaningful and structured way. These include using paragraphs, line breaks, and horizontal rules, among others.

HTML Paragraphs

The <p> tag is used to define a paragraph. It is one of the most commonly used tags for structuring text. A paragraph always starts on a new line, and browsers automatically add some space before and after a paragraph.

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

HTML Line Breaks

The <br> tag is used to create a line break in the text, without starting a new paragraph. This tag is an empty element, meaning it does not have a closing tag.

<p>This is a paragraph with a line break<br>This is on a new line.</p>

Output:

This is a paragraph with a line break
This is on a new line.

Preformatted Text

The <pre> tag is used to display preformatted text. It preserves both spaces and line breaks. This is useful when you want to display text exactly as it is typed.

<pre>
  This is preformatted text.
  It preserves      spacing
  and line breaks.
</pre>

Output:

  This is preformatted text.
  It preserves      spacing
  and line breaks.

HTML Horizontal Rules

The <hr> tag is used to insert a horizontal rule or line to divide content on the page. This tag is also an empty element, meaning it does not have a closing tag.

<hr>

Output:

HTML Block and Inline Elements

In HTML, elements are either block-level or inline. Understanding the difference between these two types of elements is crucial for structuring your web page effectively.

Block Elements

Block-level elements take up the full width of their parent container and always start on a new line. Examples of block elements include:

  • <div> - a division or section in an HTML document
  • <h1> to <h6> - header tags
  • <p> - paragraph
  • <form> - form element
  • <table> - table
  • <ul>, <ol>, <li> - lists

Inline Elements

Inline elements take up only as much width as necessary and do not force a new line in the document. Examples of inline elements include:

  • <a> - anchor/link
  • <span> - a section of text or content
  • <img> - image
  • <strong> - bold text
  • <em> - emphasized text

1.4 Document Structure

HTML documents follow a specific structure to ensure that the content is displayed correctly by browsers. The document consists of elements such as the DOCTYPE declaration, the HTML element, the head, and the body.

DOCTYPE Declaration

The DOCTYPE declaration is used to specify the version of HTML that the document is using. In HTML5, the DOCTYPE declaration is simple:

<!DOCTYPE html>

HTML Element

The <html> element is the root element of the HTML page. All other elements are nested inside this element.

<html>
    <head>
        <!-- Head content goes here -->
    </head>
    <body>
        <!-- Body content goes here -->
    </body>
</html>

Head Element

The <head> element contains meta-information about the document, such as its title, linked stylesheets, and metadata. The contents of the head element are not visible on the webpage.

Body Element

The <body> element contains all the content of the webpage that will be displayed in the browser, including text, images, links, and other elements.

<body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
</body>

Output:

This is a Heading

This is a paragraph.