Introduction: HTML Text Formatting

 

To modify the appearance and structure of text on a webpage.

HTML text formatting can be divided into two main categories: Logical Tags and Physical Tags.

1. Logical Tags

Logical tags convey the meaning or importance of the text without necessarily altering its visual appearance. These tags help browsers, search engines, and assistive technologies understand the purpose of the text.

<em>: Emphasizes text, typically rendered in italics. It implies that the text carries special importance or requires emphasis.

<strong>: Marks text as important, often displayed in bold. It implies the content is of strong importance.

2. Physical Tags

Physical tags directly affect how text looks on the webpage by changing the font, size, or style.

<b>: Displays text in bold without implying importance.

<i>: Italicizes text without any implied emphasis.

HTML Formatting Elements

1. <i> – To display text in italics without implying emphasis.

<i>This is italic text.</i>

2. <small> –  Renders text in a smaller font than the surrounding text.

<small>This text is smaller than the rest.</small>

3. <ins> – Marks text as newly added or inserted, often displayed with an underline.

<ins>This is inserted text.</ins>

4. <sub> – For subscripted text, often used in chemical formulas or footnotes.

H₂O

5. <strong> – Emphasizes important text, often rendered in bold

The <strong> tag is semantically meaningful and indicates that the text is of high importance.

<strong>This text is bold and important.</strong>

6. <b> – Makes the text bold but does not imply any special significance.

<b>This is bold text.</b>

7. <mark> – Highlights text with a background color, similar to using a highlighter on paper.

<mark>This text is highlighted.</mark>

8. <del> – Strikes through text

The <del> tag is used to show that text has been deleted or is no longer relevant.

<del>This text is crossed out.</del>

9. <em> – Emphasizes text, typically italicized

The <em> tag is used for emphasized text and is usually rendered in italics to highlight importance.

<em>This text is emphasized.</em>

10. <sup> – Displays the superscripted text, commonly used in exponents or footnotes.

E = mc²

 

Basic text formatting elements : 

 Heading: <h1> , <h2> , <h3> , <h4> , <h5> , <h6>

Paragraph: <p> , 

Line Break: < br / > , 

<pre> 

White Space and Flow 

 If we put several consecutive spaces between two words, by default, only one space will be displayed. This is known as white space collapsing . 

Similarly, if you start a new line in your source document, or you have consecutive empty lines, these will be ignored and simply treated as one space, as will tab characters. 

 < p > This paragraph shows how multiple spaces between words are treated as a single space. This is known as white space collapsing, and the big spaces between some of the words will not appear in the browser.

 It also demonstrates how the browser will treat multiple carriage returns (new lines) as a single space, too. < /p > 

 As the browser treats the multiple spaces and several carriage returns (where text appears on a new line) as if there were only one single space. It also allows the line to take up the full width of the browser window. 

 Structuring Documents for the Web

 Creating Headings Using <hn>Elements 

 Heading indicate titles and subtitles within webpages to help structure and organize content, which can help search engines and readers understand and navigate the page.

These tags range from <h1> to <h6> (< h1 > , < h2 > , < h3 > , < h4 > , < h5 > , and < h6 >). 

The <h1> should be the page title that reflects the main topic, 

<h2> should be the most important subtopics, and so on.

Browsers display the <h1> element as the largest of the six and <h6> as the smallest.

Most browsers display the contents of the < h1 > , < h2 > , and < h3 > elements larger than the default size of text in the document. 

The content of the < h4 > element would be the same size as the default text, and the content of the < h5 > and < h6 >elements would be smaller unless you instruct them otherwise using CSS.

Creating Paragraphs Using the <p>Element 

 The < p > element offers another way to structure your text. 

Each paragraph of text should go in between an opening < p > and closing < /p > tag -

 < p > Here is a paragraph of text. < /p > 

 < p > Here is a second paragraph of text. < /p > 

 < p > Here is a third paragraph of text. < /p > 

 When a browser displays a paragraph, it usually inserts a new line before the next paragraph and adds a little bit of extra vertical space.

 Creating Line Breaks Using the <br/> Element 

 It starts on the next line. 

The <br/> element is an example of an empty element ; you don ’ t need opening and closing tags, because there is nothing to go in between them. 

 Note that the < br / > element has a space between the characters br and the forward slash. 

 You will often see these written like so: < br > , which is the way it was written in earlier versions of HTML, but in XHTML the characters < br are followed by a space and a forward slash before the closing angled bracket. 

 < p > When you want to start a new line you can use the line break element.

So, the next < br / > word will appear on a new line. < /p > 

 Creating Preformatted Text Using the < pre >Element 

 The HTML <pre> tag defines preformatted text.

Browsers naturally collapse multiple spaces or line breaks into a single space, but text inside a <pre> element is displayed exactly as it is written in the HTML source code. 

It preserves all spaces, tabs, and line breaks automatically. 

Content defaults to a fixed-width (monospaced) font, like Courier.

 The most common uses of the < pre > element are to represent computer source code. For example, 

 < pre > 

function testFunction(strText){

 alert (strText)

}

 < /pre > 

 The < hr / > Element 

 The < hr / > element creates a horizontal rule across the page. It is an empty element. 

 This is frequently used to separate distinct sections of a page where a new heading is not appropriate.