HTML - Formatting

Text Formatting

Bold Text

In HTML, you can make text bold using either the <b> or <strong> tag. The <b> tag is used to draw attention to text without giving it extra importance, while the <strong> tag indicates that the text is important or urgent.

Example: Bold Text

<p>This is <b>bold text</b> using the b tag.</p>
<p>This is <strong>bold text</strong> using the strong tag.</p>

Italic Text

To make text italic, you can use either the <i> or <em> tag. The <i> tag is used to indicate a different tone or quality of text, such as a technical term or a phrase in another language. The <em> tag is used to stress or emphasize the text.

Example: Italic Text

<p>This is <i>italic text</i> using the i tag.</p>
<p>This is <em>italic text</em> using the em tag.</p>

Underlined Text

To underline text, use the <u> tag.

Example: Underlined Text

<p>This is <u>underlined text</u> using the u tag.</p>

Strikethrough Text

To create strikethrough text, you can use either the <s> or <del> tag. The <s> tag indicates text that is no longer correct or relevant, while the <del> tag represents text that has been deleted.

Example: Strikethrough Text

<p>This is <s>strikethrough text</s> using the s tag.</p>
<p>This is <del>strikethrough text</del> using the del tag.</p>

Subscript and Superscript

For subscript text, use the <sub> tag. For superscript text, use the <sup> tag.

Example: Subscript and Superscript

<p>This is <sub>subscript text</sub> using the sub tag.</p>
<p>This is <sup>superscript text</sup> using the sup tag.</p>

Highlighted Text

To highlight text, use the <mark> tag. This is useful for marking keywords or important phrases.

Example: Highlighted Text

<p>This is <mark>highlighted text</mark> using the mark tag.</p>

Small Text

To make text smaller, use the <small> tag. This tag is used for side comments, small print, or disclaimers.

Example: Small Text

<p>This is <small>small text</small> using the small tag.</p>

Text Alignment

In HTML, you can align text using the align attribute. This attribute can be added to various tags, such as <p>, <h1> to <h6>, <div>, and others. The align attribute accepts three values: "left", "center", and "right".

To align text to the left, use align="left". This is the default alignment for most elements.

Example: Left-aligned Text

<p align="left">This text is left-aligned.</p>

To center-align text, use align="center". This will display the text in the middle of the containing element.

Example: Center-aligned Heading

<h2 align="center">This heading is center-aligned.</h2>

To align text to the right, use align="right". This will display the text on the right side of the containing element.

Example: Right-aligned Text

<div align="right">This text is right-aligned.</div>

It's important to note that while the align attribute is still supported in HTML5, it is recommended to use CSS for text alignment and other styling purposes. CSS provides more flexibility and control over the layout and appearance of your web page.

Font Formatting

Font Size

In HTML, you can change the font size using the size attribute within the <font> tag. The size attribute accepts values from 1 to 7, with 1 being the smallest and 7 being the largest. The default size is 3.

Example: HTML code for font size

<p>This is <font size="1">size 1</font> text.</p>
<p>This is <font size="3">size 3</font> text.</p>
<p>This is <font size="7">size 7</font> text.</p>

However, it's important to note that the <font> tag is deprecated in HTML5 and should be avoided. Instead, use CSS to control font sizes for more flexibility and better design practices.

Example: CSS styles for font size

<p style="font-size: 12px;">This text has a font size of 12 pixels.</p>
<p style="font-size: 1.2em;">This text has a font size of 1.2em.</p>

Font Color

To change the color of the text in HTML, you can use the color attribute within the <font> tag. The color attribute accepts color names, hexadecimal values, or RGB values.

Example: HTML code for font color

<p>This is <font color="red">red</font> text.</p>
<p>This is <font color="#0000FF">blue</font> text.</p>
<p>This is <font color="rgb(0, 128, 0)">green</font> text.</p>

As with font size, the <font> tag is deprecated, and it's recommended to use CSS for controlling font colors.

Example: CSS styles for font color

<p style="color: red;">This text is red.</p>
<p style="color: #0000FF;">This text is blue.</p>
<p style="color: rgb(0, 128, 0);">This text is green.</p>

Font Face

To specify the font face or family in HTML, you can use the face attribute within the <font> tag. The face attribute accepts the name of the font you want to use.

Example: HTML code for font face

<p>This is <font face="Arial">Arial</font> text.</p>
<p>This is <font face="Verdana">Verdana</font> text.</p>
<p>This is <font face="Courier New">Courier New</font> text.</p>

Once again, the <font> tag is deprecated, and it's better to use CSS for setting font faces.

Example: CSS styles for font face

<p style="font-family: Arial;">This text uses Arial font.</p>
<p style="font-family: Verdana;">This text uses Verdana font.</p>
<p style="font-family: 'Courier New';">This text uses Courier New font.</p>

When using CSS, you can specify multiple font faces in the font-family property, separated by commas. This allows the browser to use the first available font from the list.

Preformatted Text

In HTML, you can show preformatted text using the <pre> tag. The <pre> tag keeps spaces, line breaks, and other formatting within its content. This is helpful when you want to show text exactly as it is written, such as code snippets, ASCII art, or poetry.

Example: Using the <pre> Tag

<pre>
  This is an example
    of preformatted text.
  It keeps     spaces,
         line breaks,
    and other formatting.
</pre>

In the above example, the text within the <pre> tag will be shown with its original formatting, including multiple spaces and line breaks.

By default, text inside the <pre> tag is shown using a monospace font, which gives it a similar look to code or plain text. The text also has a fixed width, meaning that it does not change to the size of the browser window.

It's important to note that because the <pre> tag keeps formatting, any HTML tags within its content will be shown as plain text rather than being read as HTML. If you want to include HTML tags within preformatted text, you need to use HTML entities to represent the special characters, such as &lt; for < and &gt; for >.

Example: HTML Entities in Preformatted Text

<pre>
  &lt;p&gt;This is an example of preformatted text with HTML entities.&lt;/p&gt;
</pre>

In the above example, the HTML tags <p> and </p> are shown as plain text by using their matching HTML entities.

Using the <pre> tag is a simple way to show preformatted text while keeping its original formatting, making it a useful tool for presenting code snippets, ASCII art, or any other content that relies on specific spacing and line breaks.

Code Formatting

In HTML, you can format code using the <code> tag for inline code and a combination of the <pre> and <code> tags for code blocks.

To show inline code, wrap the code snippet with the <code> tag. This tag is used to represent a part of computer code within a sentence or paragraph.

Inline Code Example

To create a new paragraph in HTML, use the <p> tag.

In the above example, the <p> tag is wrapped with <code> tags to show it as inline code. Notice that the < and > characters are replaced with their HTML entities (&lt; and &gt;) to prevent them from being read as HTML.

For code blocks or multiple lines of code, use the <pre> tag with the <code> tag. The <pre> tag keeps formatting, while the <code> tag inside it shows that the content is code.

Code Block Example

<pre><code>
  function greet(name) {
    console.log("Hello, " + name + "!");
  }

  greet("John");
</code></pre>

Using the <code> tag for inline code and the <pre> and <code> tags together for code blocks helps separate code from regular text, making your HTML document easier to read. It also allows you to style the code differently using CSS if desired.

When showing code in HTML, it's important to use HTML entities for special characters like <, >, and & to prevent them from being read as HTML. You can also consider using a library or syntax highlighter to automatically format and style your code blocks for better presentation.

Blockquotes

In HTML, you can create blockquotes using the <blockquote> tag. Blockquotes are used to indicate that the enclosed text is an extended quotation from another source. Browsers usually display blockquotes with indented margins on both sides to separate them from the surrounding content.

Example: Create a blockquote

<blockquote>
  "The only way to do great work is to love what you do." - Steve Jobs
</blockquote>

In the above example, the quoted text is enclosed within the <blockquote> tag, which will render it with indented margins.

You can also include the source of the quote using the cite attribute within the <blockquote> tag. The cite attribute should contain a URL that points to the source of the quote.

Example: Blockquote with cite attribute

<blockquote cite="https://www.example.com/quotes">
  "Innovation distinguishes between a leader and a follower." - Steve Jobs
</blockquote>

To further style blockquotes, you can use CSS. Some common styling options include changing the font style, size, or color, adjusting the indentation, or adding a background color or border.

Example: Style blockquotes with CSS

<style>
  blockquote {
    font-style: italic;
    font-size: 1.2em;
    color: #333;
    margin-left: 30px;
    padding: 10px;
    border-left: 5px solid #ccc;
    background-color: #f9f9f9;
  }
</style>

<blockquote>
  "Design is not just what it looks like and feels like. Design is how it works." - Steve Jobs
</blockquote>

Using blockquotes with proper formatting and styling can help you present quotes in a clear and appealing way within your HTML documents. They provide a way to indicate extended quotations and can be customized to match your website's design.