Hello again! We're amping up our HTML game! Having seen the basic HTML structure, we'll now add flair with headers, paragraphs, and styles. We're delving into HTML text formatting!
You've encountered text formatting in books or articles: chapter titles, subheadings, or emphasized quotes that aid understanding. Similarly, HTML text formatting adds structure and expressiveness to your webpage.
HTML provides headings from <h1> to <h6>. The rule is simple: The lower the number, the larger the size the heading has. Hence, <h1> is the largest, and <h6> is the smallest heading.
HTML, XML1<h1>This is a Heading 1</h1> 2... 3<h6>This is a Heading 6</h6>
Just as in a book, HTML headers can structure your webpage and guide the reader.
The <p> tag is used for paragraphs in HTML. Like in a book or letter, paragraphs make your content easier to read.
HTML, XML1<p>This is the first sentence.</p> 2<p>This is another sentence.</p>
The <div> element in HTML is a block-level container that is used to group together and format sections of a document. It does not have a semantic meaning and is used to structure the content on the Web page. Check out the example below:
HTML, XML1<div> 2 <h2>Welcome!</h2> 3 <p>A paragraph in the div element.</p> 4</div>
Dress up your text with HTML styles. The most common tags are <b> for bold, <i> for italic, and <u> for underline.
HTML, XML1<b>This text is bold</b> 2<i>This text is italic</i> 3<u>This text is underlined</u>
Text decorations can emphasize parts of your text and make your webpage more expressive.
Sometimes, you need to break a line or separate sections with a line. For these purposes, use the <br> tag for a line break and <hr> for a horizontal line.
HTML, XML1<p>This is a sentence.<br>And another sentence.</p> 2<hr> 3<p>This is text after the line.</p>
Nesting, the act of placing one HTML tag into another, allows many HTML tags to nest inside others, enabling more complex formatting.
HTML, XML1<p>This is a <b>bold</b> word in a paragraph.</p>
Like marking a word in a book, HTML nesting helps add structure to your content.
Great job! You've just enhanced your HTML skills with text formatting. We've reviewed HTML headers, the <p> tag for paragraphs, and <b>, <i>, and <u> tags for text styling. We've also learned about the <br> and <hr> tags for line breaks and horizontal lines, and nesting tags for structured content.
Next, we'll practice all of these with a few exercises. As the saying goes, practice makes perfect. So, let's start coding!