HTML Formatting: A Detailed Guide
Welcome to this comprehensive guide on HTML formatting. HTML offers a wide range of formatting tags that allow developers to alter the appearance of text for better content structure and readability. Let's take a deep dive into understanding these HTML formatting elements.
Introduction to HTML Formatting
HTML formatting is a process of formatting text for better look and feel. It offers several tags to make text bold, italicized, underlined, and more. These tags are used to enhance the user experience by making the webpage content more organized and easily readable.
HTML Formatting Tags
Below are some commonly used HTML formatting tags:
Bold Text
The <b> tag is used to create bold text without any extra importance. Similarly, the <strong> tag is used to denote text with strong importance.
<b>This is a bold text.</b> <strong>This is a strong text.</strong> Italic Text
The <i> tag is used to make the text italic without any extra emphasis. The <em> tag is used for text that has stress emphasis.
<i>This is an italic text.</i> <em>This is an emphasized text.</em> Underlined Text
The <u> tag is used to underline the text. This tag is used to denote misspelled words or proper names in Chinese text.
<u>This is an underlined text.</u> Marked/Highlighted Text
The <mark> tag is used to highlight or mark the text.
<mark>This is a marked text.</mark> Small Text
The <small> tag is used to display text in a smaller size. This is generally used for disclaimers or side comments.
<small>This is a small text.</small> Deleted Text
The <del> tag is used to display text that has been deleted from a document. Browsers usually strike a line through deleted text.
<del>This is a deleted text.</del> Inserted Text
The <ins> tag is used to denote text that has been added to a document. Browsers usually underline inserted text.
<ins>This is an inserted text.</ins> Superscript and Subscript Text
The <sup> tag is used to specify superscript text, while the <sub> tag is used for subscript text.
<p>This is <sup>superscript</sup> text.</p> <p>This is <sub>subscript</sub> text.</p> Preformatted Text
The <pre> tag is used to preserve both spaces and line breaks as written in the HTML document.
<pre> Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks. </pre> Computer Code
HTML uses the <code> tag to define a piece of computer code.
<p>The following HTML elements: <code><mark></code>, <code><del></code>, <code><ins></code> are used to format text.</p> Keyboard Input
The <kbd> tag is used to define keyboard input.
<p>To save the document, press <kbd>Ctrl + S</kbd></p> Line Breaks and Horizontal Rules
The <br> tag is used to insert a line break or a new line in the text. This is a single tag, and it does not require a closing tag.
<p>This is a line of text.<br>This is a new line of text.</p> The <hr> tag is used to define a thematic break in an HTML page, typically in the form of a horizontal rule. This can be used to separate content sections.
<p>This is some text.</p> <hr> <p>This is some other text.</p> Block Quotes
The <blockquote> tag is used to specify a section that is quoted from another source. Browsers usually indent <blockquote> elements.
<blockquote cite="http://example.com/facts"> <p>This is a quote taken from an example site.</p> </blockquote> Quotation
The <q> tag is used for short quotations that do not require new paragraphs. Browsers automatically add quotation marks around the <q> element.
<p>He said: <q>HTML is simple to learn.</q></p> Definition Element
The <dfn> tag represents the defining instance of a term in HTML. The nearest parent of the <dfn> tag must also contain the definition/explanation for the term inside <dfn> .
<p><dfn>HTML</dfn> (HyperText Markup Language) is the standard markup language for creating web pages.</p> Address Element
The <address> tag is used to define the contact information for the author/owner of a document or an article.
<address> Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address> Bi-directional Override
The <bdo> tag is used to override the current directionality of text. It's particularly useful when dealing with languages that are read right-to-left, like Hebrew or Arabic.
<bdo dir="rtl">This text will be written from right to left.</bdo> Conclusion
HTML formatting plays a crucial role in presenting and organizing your web content. By harnessing these various tags effectively, you can significantly enhance the readability and aesthetic appeal of your website. Understanding these tags and their proper usage is a fundamental part of web development. Happy learning and coding!