HTML offers a variety of tags that allow you to modify the appearance of text on your web pages. For instance, you can utilize the <b> tag to make text bold, the <i> tag to make it italic, the <mark> tag to highlight it, the <code> tag to display a fragment of computer code, and the <ins> and <del> tags to indicate editorial insertions and deletions, among others.
The following example showcases the most commonly used formatting tags in action. Now, let's give it a try to grasp the basic functionality of these tags:
<p>This is <b>bold text</b>.</p>
<p>This is <strong>strongly important text</strong>.</p>
<p>This is <i>italic text</i>.</p>
<p>This is <em>emphasized text</em>.</p>
<p>This is <mark>highlighted text</mark>.</p>
<p>This is <code>computer code</code>.</p>
<p>This is <small>smaller text</small>.</p>
<p>This is <sub>subscript</sub> and <sup>superscript</sup> text.</p>
<p>This is <del>deleted text</del>.</p>
<p>This is <ins>inserted text</ins>.</p>In web browsers, the <strong> tag is typically presented as <b>, whereas the <em> tag is displayed as <i>. However, it is crucial to understand that these tags have different implications.
By default, both the <strong> and <b> tags make the enclosed text appear in a bold typeface. Nevertheless, the <strong> tag signifies that its contents possess strong importance, whereas the <b> tag is merely utilized to attract the reader's attention without conveying any specific importance.
<p><strong>WARNING!</strong> Please proceed with caution.</p>
<p>The concert will be held at <b>Hyde Park</b> in London.</p>In the same manner, the <em> and <i> tags both display the enclosed text in italic style as a default. However, the <em> tag signifies that its contents are emphasized and carry more importance compared to the surrounding text. On the other hand, the <i> tag is utilized to format text that is distinct from the regular content for the sake of readability. This may include technical terms, idiomatic phrases from other languages, thoughts, and more.
<p>Cats are <em>cute</em> animals.</p>
<p>The <i>Royal Cruise</i> sailed last night.</p>Note: The <em> and <strong> tags should be utilized when specific words or phrases in your webpage need to be emphasized or given importance. It is important to note that in HTML5, the <b> and <i> tags have been redefined and no longer hold any semantic meaning.
The HTML <blockquote> tag allows for effortless formatting of quotation blocks from external sources.
Blockquotes are typically presented with indented left and right margins, accompanied by a slight additional space above and below. Let's attempt an illustration to observe its functionality:
<blockquote>
<p>Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.</p>
<cite>— Albert Einstein</cite>
</blockquote>Tip: The cite element is utilized to provide information about a citation to a piece of art or literature. It is essential to include either the title of the work, the name of the author (individual or organization), or a URL reference.
The HTML <q> tag can be utilized for brief inline quotations. Inline quotes are typically displayed by most browsers by enclosing the text within quotation marks. Here is an illustration:
<p>According to the World Health Organization (WHO): <q>Health is a state of complete physical, mental, and social well-being.</q></p>An abbreviation is a condensed version of a word, phrase, or name.
The <abbr> tag can be utilized to indicate an abbreviation. Within this tag, the title attribute is employed to present the complete expansion of the abbreviation. When the mouse cursor is placed over the element, browsers display this expansion as a tooltip. Let's experiment with an illustration:
<p>The <abbr title="World Wide Web Consortium">W3C</abbr> is the main international standards organization for the <abbr title="World Wide Web">WWW or W3</abbr>. It was was founded by Tim Berners-Lee.</p>Web pages frequently contain street or postal addresses. HTML offers a specific tag, <address>, to present contact details (both physical and digital) for individuals, groups, or organizations.
It is recommended to utilize this tag to showcase contact information associated with the document, such as the author of an article. When rendered, most browsers display the address block in italic format. For instance:
<address>
Mozilla Foundation<br>
331 E. Evelyn Avenue<br>
Mountain View, CA 94041, USA
</address>Check out the HTML reference for a complete list of HTML formatting tags.