HTML - Formatting

Text Formatting

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

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

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

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

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

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

<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.

<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.

<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.

<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

<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>

<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>

<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>

<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>

<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>

<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>

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.

<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 < for < and > for >.

<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.

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 (< and >) 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.

<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.

<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.

<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.

<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.