home bytes tutorials html text formatting tags in html5

Course Outline

Heading and Paragraph Tags in HTML

HTML Text Formatting

HyperLink and Anchor Tag in HTML

Lists in HTML5

HTML Text Formatting

Last Updated: 29th February, 2024

Text formatting in HTML refers to the way text is displayed on a web page. It is the process of applying various styles, colors, fonts, sizes, and other visual enhancements to text content within an HTML document. HTML offers a range of tags that can be used to format text, including:

Bold text: or
Italicized text: or
Underlined text:
Strike-through text: <del> or <s>
Superscript and subscript text: or

Text formatting is important in HTML for several reasons:

Emphasis: Text formatting can be used to emphasize important words or phrases in a document, making it easier for readers to quickly identify key points.
Readability: Proper text formatting can enhance the readability of a document by breaking up large blocks of text and making it easier for readers to scan and understand the content.
Aesthetics: Text formatting can be used to make a document more visually appealing, which can help to engage and retain readers.
Accessibility: Text formatting can be used to improve the accessibility of a document for users with visual impairments, such as using larger font sizes or high contrast colors.

Difference between Structural and Formatting Elements

Structural elements define the layout and hierarchy of a web page's content, and they are used to organize the different sections of the page. Examples of structural elements include the <html>, <head>, <body>, <header>, <footer>, <nav>, <article>, and <section> tags. These tags help to define the overall structure of the page and provide a clear hierarchy of content.

On the other hand, formatting elements are used to apply visual styles to specific elements or sections of a web page. Examples of formatting elements include the , , , , , <s>, , and tags. These tags can be used to change the font style, size, color, and other visual properties of the text.

The key difference between structural and formatting elements is that structural elements define the overall layout and structure of the page, while formatting elements are used to apply visual styles to specific sections or elements of the page.

Text Formatting Tags

Bold text

Bold text is used to highlight important text or headings. HTML5 provides two tags to make text bold: and . Both tags have the same effect of making the enclosed text bold, but is preferred because it indicates that the text is important for semantic purposes, such as indicating a heading or key point.

For example, the following code will make the text "Hello, world!" bold using the tag:

<p><strong>Hello, world!</strong></p>

Italicized Text

Italicized text is used to emphasize a word or phrase or to indicate a different tone or meaning. HTML5 provides two tags to make text italic: and . Both tags have the same effect of making the enclosed text italic, but is preferred because it indicates that the text has emphasis for semantic purposes.

For example, the following code will make the text "This is italicized text" italic using the tag:

<p><em>This is italicized text</em></p>

Underlined Text

Underlined text is used to indicate a hyperlink or to emphasize a word or phrase. HTML5 provides the tag to make text underlined.

For example, the following code will make the text "This is underlined text" underlined using the tag:

<p><u>This is underlined text</u></p>

Strike-Through Text

Strike-through text is used to indicate that the text has been deleted or is no longer valid. HTML5 provides two tags to make text strike-through: <s> and <del>. Both tags have the same effect of making the enclosed text strike-through, but <del> is preferred because it indicates that the text has been deleted for semantic purposes.

For example, the following code will make the text "This text is strike-through" strike-through using the <del> tag:

<p><del>This text is strike-through</del></p>

Superscript and Subscript Text

Superscript and subscript text are used to display text in a smaller size above or below the normal text line. HTML5 provides two tags to make text superscript and subscript: and , respectively.

For example, the following code will make the text "2" superscript and the text "nd" subscript:

<p>x<sup>2</sup> + y<sub>nd</sub></p>

Font Formatting

The tag is a non-semantic tag that was introduced in HTML 3.2. The tag has three attributes: size, color, and face. The size attribute is used to specify the size of the font, which can range from 1 to 7. The color attribute is used to specify the color of the font, and the face attribute is used to specify the font family.

For example, the following code will set the font size to 4, the font color to red, and the font family to Arial:

<font size="4" color="red" face="Arial">Hello World!</font>

However, this tag has been deprecated in HTML5, which means it's no longer recommended for use in modern web development. Instead, it's recommended to use CSS to style the text.

Limitations of

The tag has several limitations and drawbacks. First, the tag is a non-semantic tag, which means that it does not convey any meaning about the content it encloses. This can make it difficult for screen readers and other assistive technologies to interpret the content of a web page correctly.

Second, the tag encourages the use of inline styles, which can make the code harder to maintain and update. In addition, inline styles can make it harder for search engines to index the content of a web page correctly.

Third, the tag is limited in the number of attributes it offers. While the tag allows developers to specify the font size, color, and family, it does not offer any other formatting options, such as bold or italic.

Given these limitations and drawbacks, it is recommended that web developers use alternative approaches for font formatting in HTML5. Two commonly used approaches are cascading style sheets (CSS) and semantic markup.

Cascading Style Sheets (CSS) provide a more robust and flexible way to format text and other content on a web page. With CSS, developers can apply styles to multiple elements at once, and they can separate the presentation of the content from the content itself, making the code easier to maintain and update.

Semantic markup is another alternative approach that can be used to format text in HTML5. Semantic markup involves using HTML tags that convey meaning about the content they enclose. For example, instead of using the tag to make text bold, developers can use the tag, which conveys the meaning that the enclosed text is important or emphasized.

Conclusion

In conclusion, text formatting is an essential aspect of creating web pages. It enables web developers to apply various styles and visual enhancements to text content, making it more accessible, readable, and visually appealing to users. HTML offers a range of tags to format text, including bold, italicized, underlined, strike-through, superscript, and subscript.

Module 3: HTML5 Basic Tags

HTML Text Formatting

Difference between Structural and Formatting Elements

Text Formatting Tags

Bold text

Italicized Text

Underlined Text

Strike-Through Text

Superscript and Subscript Text

Font Formatting

Limitations of <font>

Conclusion