**Course Title:** HTML & Web Development Fundamentals: Building Modern Websites **Section Title:** Working with Text, Links, and Lists **Topic:** Text formatting tags: `<p>`, `<h1> - <h6>`, `<strong>`, `<em>`, `<blockquote>`, `<pre>`. ### Introduction to Text Formatting Tags In the previous topics, we covered the basics of HTML structure and elements. Now, let's dive into text formatting tags, which are essential for styling and structuring text content on the web. In this topic, we'll explore the most common text formatting tags, their usage, and best practices. ### Paragraphs: `<p>` The `<p>` tag is used to define a paragraph of text. It's one of the most commonly used tags in HTML. A paragraph is a block of text that starts on a new line and is separated from other paragraphs by a blank line. **Example:** ```html <p>This is a paragraph of text.</p> <p>This is another paragraph of text.</p> ``` **Best Practice:** Use the `<p>` tag to wrap each paragraph of text, and avoid using multiple `<br>` tags to separate paragraphs. ### Headings: `<h1> - <h6>` Headings are used to define the hierarchy of content on a web page. There are six levels of headings, ranging from `<h1>` (most important) to `<h6>` (least important). **Example:** ```html <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> ``` **Best Practice:** Use headings to structure your content in a logical hierarchy. The `<h1>` tag should only be used once per page, and other headings should be used in descending order of importance. ### Emphasis: `<strong>` and `<em>` The `<strong>` and `<em>` tags are used to add emphasis to text. The `<strong>` tag is used for stronger emphasis, while the `<em>` tag is used for emphasis. **Example:** ```html <p>This text is <strong>very important</strong>.</p> <p>This text is <em>emphasized</em>.</p> ``` **Best Practice:** Use `<strong>` for stronger emphasis, such as for headings, titles, or keywords. Use `<em>` for emphasis, such as for quotes, foreign words, or variable names. ### Blockquotes: `<blockquote>` The `<blockquote>` tag is used to define a block of quoted text. **Example:** ```html <blockquote> <p>This is a block of quoted text.</p> </blockquote> ``` **Best Practice:** Use `<blockquote>` to quote text from external sources, such as books, articles, or speeches. ### Preformatted Text: `<pre>` The `<pre>` tag is used to define preformatted text, such as code or poetry. **Example:** ```html <pre> This is preformatted text. It is displayed exactly as it is written. </pre> ``` **Best Practice:** Use `<pre>` to display preformatted text, such as code or poetry, where whitespace and formatting are important. ### Conclusion In this topic, we covered the most common text formatting tags in HTML, including `<p>`, `<h1> - <h6>`, `<strong>`, `<em>`, `<blockquote>`, and `<pre>`. By following best practices and using these tags correctly, you can create well-structured and readable text content on the web. **Additional Resources:** * [W3C Recommendation: HTML 5.2 - Text-level semantics](https://www.w3.org/TR/html52/textlevel-semantics.html) * [MDN Web Docs: HTML Elements - Text](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#text) **Exercise:** Create a simple HTML document that demonstrates the use of text formatting tags. Include paragraphs, headings, emphasis, blockquotes, and preformatted text. **What's Next?** In the next topic, we'll cover creating and formatting lists: ordered (`<ol>`), unordered (`<ul>`), and description lists. **Do you have any questions or need help with this topic? Leave a comment below.**