Text format#
There is a set of HTML tags that allows you to format text on a page to look in the particular way or apply special properties to the specific sections of the text.
Paragraph (<p>)#
In HTML, if you indent the text, it will still be displayed on one line. To move text to the next line, you have to use the <p> tag.
The following cell shows how it will appear in HTML, even with two indents between lines.
%%HTML
Paragraph1
Paragraph2
Paragraph3
Use the <p> tag to indent between lines.
%%HTML
<p>Paragraph 1</p><p>Paragraph 2</p><p>...</p><p>Paragraph n</p>
Paragraph 1
Paragraph 2
...
Paragraph n
Emphasis#
For each emphasis type there is a special kind of the HTML tag:
<b>: for bold text.<i>: for italic text.<u>: for underlined text.
The following cell uses all the tags for text emphasis.
%%HTML
<b>Bold text</b><br>
<i>Italic text</i><br>
<u>Underlined text</u>
Italic text
Underlined text
Style section (<span>)#
<span> is a generic inline HTML tag used to apply styles or attributes to a portion of text or a group of inline elements without affecting the document layout.
However, it is a relly common issue to add some specific settings to a subset of the symbols in text. It is not really obvious that you need to use the <span> tag to perform such an opeartion. That’s why the <span> tag is represented in this section.
In the following cell <div> and <span> tags are used to apply a red color to a section of the text.
%%HTML
This <span style="color:red">Text</span> surrounded by snap.<p>
This <div style="color:red">Text</div> surrounded by div.
This
As the result:
<div>tag sets the text in a separate paragraph.<span>tag just apply font style to text.
Thematic break (<hr>)#
It will be displayed as horizontal line by page width.
%%HTML
Text with sence 1
<hr>
Text with sence 2
Text with sence 2
Preformatted text (<pre>)#
The <pre> tag in HTML is used to define preformatted text, which preserves both spaces and line breaks. It is commonly used to display code snippets or other types of text that require a fixed-width font and exact formatting.
The following example, shows the same poem displayed both as raw text and as text surrounded by the <pre></pre> tag.
%%HTML
In the realm of dreams we wander,
Where reality is torn asunder.
Whispers of love and tales untold,
A symphony of emotions, bold.
Stars dance upon a velvet sky,
As moonbeams paint a lullaby.
Nature's canvas, a masterpiece,
Where hearts find solace and peace.
<pre>
Through winding paths we tread,
Seeking answers that lie ahead.
Life's tapestry, a vibrant hue,
Each moment, a story to pursue.
So let us cherish this fleeting rhyme,
Embrace the beauty in every chime.
For in these words, a glimpse we find,
Of the magic that dwells in mankind.
</pre>
Through winding paths we tread, Seeking answers that lie ahead. Life's tapestry, a vibrant hue, Each moment, a story to pursue. So let us cherish this fleeting rhyme, Embrace the beauty in every chime. For in these words, a glimpse we find, Of the magic that dwells in mankind.
The text surrounded by the <pre></pre> tag is displayed exactly as it was written in the HTML code.
Important (<em>, <strong>)#
<em></em> and <strong></strong> tags are used to highlight important information. Some tools that process HTML use this information for their own purposes. Text surrounded by the <em></em> or <strong></strong> tags is usually displayed in italics or bold by browsers.
The following cell contains text surrounded by the tags <em> and <strong>.
%%HTML
<em>Some emphasized text</em><br>
<strong>Some strong text</strong>
Some strong text
Quotes#
A quote is information taken from another source. There are tags that must be used in such cases:
<q></q>for inline quotations.<blockquote></blockquote>for multiline quotations placed in a separate paragraph.
The following cell contains text surronded by the <q></q> tag.
%%HTML
Friedrich Nietzsche: <q>That which does not kill us makes us stronger.</q>
That which does not kill us makes us stronger.
The same code that uses the <blockquote></blockquote>.
%%HTML
Freidrich Nietzsche: <blockquote>That which does not kill us makes us stronger.</blockquote>
That which does not kill us makes us stronger.
Definition (<dfn>)#
If you want to define smt. you should use this tag. By default it is displayed in italics.
%%HTML
<dfn>Definition</dfn>
Smaller (<small>)#
Text enclosed in the <small></small> tag will be one size smaller than the parent font.
%%HTML
<p>Parent font1 <small>small font</small> parent font2</p>
Parent font1 small font parent font2
Deleted (<del>)#
The <del></del> tag is used to mark outdated information that should be deleted from a document. The text will appear as a cross out.
%%HTML
<del> outdated information</del>
Inserted (<ins>)#
The <ins></ins> tag surrounds text that was inserted later on a document. The text is displaed as underlined by the browser.
%%HTML
<ins> new information</ins>