Chapter 5: Working with Text in HTML
Text is one of the most fundamental elements on any webpage. HTML provides a variety of tags that allow you to structure, format, and style text effectively. This chapter will cover basic text elements, formatting options, and semantic tags used for text.
1. Headings
HTML headings are used to structure content and give it a hierarchy. They range from <h1> to <h6>, with <h1> being the highest level of heading and <h6> the lowest.
Example:
<h1>This is a Level 1 Heading</h1>
<h2>This is a Level 2 Heading</h2>
<h3>This is a Level 3 Heading</h3>
Use headings appropriately to create a logical structure, which improves accessibility and SEO.
2. Paragraphs
Paragraphs are created using the <p> tag and are the primary way to group sentences and phrases.
Example:
<p>This is a paragraph of text.</p>
<p>This is another paragraph of text.</p>
3. Line Breaks
The <br> tag is used to create a line break within text, which is useful for poems, addresses, or any content where you need to control line breaks manually.
Example:
<p>This is a line of text.<br>This is another line, right below it.</p>
4. Text Formatting Tags
HTML provides several tags to apply basic text formatting:
<b>: Bold text
<i>: Italic text
<u>: Underlined text
<strong>: Strong emphasis (bolded and semantically important)
<em>: Emphasis (italicized and semantically important)
<mark>: Highlighted text
<small>: Smaller text
<sup>: Superscript text
<sub>: Subscript text
Example:
<p>This is <b>bold</b> text and this is <i>italic</i> text.</p>
<p>This is <strong>important</strong> text and this is <em>emphasized</em> text.</p>
5. Semantic Text Tags
Semantic tags give meaning to the content, helping search engines and assistive technologies understand the purpose of the text.
<strong>: Indicates strong importance.
<em>: Emphasizes text.
<blockquote>: Used for block quotations.
<q>: Inline quotation.
<cite>: Indicates a citation.
Example:
<p><strong>Important:</strong> Always sanitize user input in forms.</p>
<blockquote cite="https://example.com">
"This is a blockquote, representing a large quoted text section."
</blockquote>
<p>The book <cite>HTML and CSS: Design and Build Websites</cite> is very informative.</p>
6. Lists
HTML supports both ordered and unordered lists:
Ordered List (<ol>): Creates a numbered list.
Unordered List (<ul>): Creates a bullet-point list.
List Item (<li>): Represents an individual item within a list.
Example:
<h3>Unordered List:</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h3>Ordered List:</h3>
<ol>
<li>Learn HTML</li>
<li>Learn CSS</li>
<li>Learn JavaScript</li>
</ol>
7. Preformatted Text
The <pre> tag preserves both spaces and line breaks, making it useful for displaying code or other text where exact formatting is important.
Example:
<pre>
Line 1 of text
Line 2 of text with indentation
Line 3 of text
</pre>
8. Inline Quotes and Citations
For shorter quotes and citations, use the <q> and <cite> tags respectively:
Example:
<p><q>The journey of a thousand miles begins with a single step.</q></p>
<p>The article was referenced from <cite>The Programming Journal</cite>.</p>
Summary
In this chapter, you learned about various HTML tags for structuring and formatting text, including headings, paragraphs, line breaks, and formatting options. You also explored semantic text tags that p
rovide context and meaning. In the next chapter, we’ll discuss how to use images and multimedia elements to enhance your web content.
0 Comments