HTML text formatting

In HTML, there are tags for changing the appearance of the text, such as <b> and <i>. They are used to select text in bold or italic, such tags in HTML are called tags for formatting.

Text formatting

This example demonstrates how you can edit text in an HTML document using special tags:

<p><b>Text</b></p>
<p><strong>Text</strong></p>
<p><em>Text</em></p>
<p><i>Text</i></p>
<p><small>Text</small></p>
<p>This is the <sub>subscript</sub> and the <sup>superscript</sup></p>
Try it »

Tag <pre>

The <pre> tag allows you to select a part of the source text that should be displayed by the browser in its original form, that is, the same characters and with the same number of spaces and line breaks. All text between the opening <pre> tag and the closing </pre> tag will be displayed in monospaced font:

<pre>
It saves the author's text formatting
(leaves unchanged)
and makes the font monospaced
</pre>
Try it »

Tags for code

The example shown below demonstrates the difference in output of the contents of the tags to the screen:

<p><code>Source code</code>
  <br>
  <kbd>Keyboard input</kbd>
  <br>
  <samp>Sample code</samp>
  <br>
  <var>Selecting a variable</var>
</p>
<p>These tags are usually used to show the program code on the page.</p>
Try it »

Tag <address>

The address is a common element of many HTML documents, to allocate an address on the page, there is a special <address> tag separating the text enclosed in it from all other content.

Most often it is used to highlight contact information, for example, an e-mail address or a method of communication with the author/owner of the document, article or site:

<p>You can find me on my website</p>
<address>
  <a href="www.puzzleweb.ru">My website for communication</a>
</address>
Try it »

Abbreviations

The example shows how you can write an abbreviation:

<p><abbr title="Unknown flying object">UFO</abbr><br><br><br>
  The title attribute is needed for the tooltip, it appears
  when you move the cursor over the abbreviation.
</p>
Try it »

Text direction

The example shows how you can change the direction of the text:

<p>
  The bdo tag specifies the direction of the text - from left to right and vice versa.<br><br>
  <bdo dir="rtl">
    This is our text
  </bdo>
</p>
Try it »

Quotations

In HTML, there are two tags for highlighting quotes in the text - <q> and <blockquote>. The <q> tag is a inline element and is intended to highlight short citations directly in the paragraph text. Text placed inside the <q> element is displayed by default in double quotes by most browsers.

Unlike the <q> tag, the <blockquote> tag is a block element, it is intended to highlight long quotes that are more similar in volume to whole paragraphs. In most browsers, the text of the <blockquote> element will be displayed with a small indent to the right and have line breaks before and after itself:

<p>A long quote:</p>
<blockquote>
  This is a very long quote.This is a very long quote.This is a very long quote.
  This is a very long quote.This is a very long quote.This is a very long quote.
</blockquote>
<p><b>For long quotes, the browser inserts indents from all sides.</b>
  <br><br>
  Short quote: 
  <q>This is a short quote.</q><br>
  <b>Short quotes are enclosed in double quotes.</b>
</p>
Try it »

Removed and inserted text

The example demonstrates how you can mark text in a document that has been deleted (marked as a crossed outline) or inserted (marked as underlined):

<p>
  The contents of the del tag, most browsers display <del>strikethrough</del>, and
  the content of the ins tag - <ins>underlined</ins>
</p>
Try it »

Note: you can also specify a strikethrough and an underscore using the CSS property of text-decoration.

Copying materials from this site is possible only with the permission of the site administration and
when you specify a direct active link to the source.
2011 - 2021 © puzzleweb.ru

puzinfo@puzzleweb.ru | ru ↔ en