HTML HTML Tutorial HTML Forms HTML Graphics HTML Media HTML APIs HTML Tags



HTML Formatting

HTML Formatting is the process of applying styles and layouts to the content of a web page. It is an essential aspect of web development as it helps to make the content more readable, visually appealing, and user-friendly. HTML Formatting involves the use of various tags and attributes to define the structure and appearance of the content.

Brief Explanation of HTML Formatting

HTML Formatting is achieved by using various tags and attributes that define the structure and appearance of the content. These tags and attributes can be used to change the font size, color, style, alignment, and other properties of the text. HTML Formatting can be applied to headings, paragraphs, lists, tables, images, and other elements of a web page.

Some of the commonly used HTML Formatting tags and attributes are:

  • <b> - Bold text
  • <i> - Italic text
  • <u> - Underlined text
  • <strike> - Strikethrough text
  • <sup> - Superscript text
  • <sub> - Subscript text
  • <font> - Font properties
  • <h1> to <h6> - Headings
  • <p> - Paragraphs
  • <ul> and <ol> - Unordered and ordered lists
  • <li> - List items
  • <table> - Tables
  • <tr> - Table rows
  • <td> - Table cells
  • <img> - Images

Here are some examples of HTML Formatting:

Bold Text

To make text bold, use the <b> tag:

  <p>This is <b>bold text</b>.</p>

This is bold text.

Italic Text

To make text italic, use the <i> tag:

  <p>This is <i>italic text</i>.</p>

This is italic text.

Underlined Text

To make text underlined, use the <u> tag:

  <p>This is <u>underlined text</u>.</p>

This is underlined text.

Strikethrough Text

To make text strikethrough, use the <strike> tag:

  <p>This is <strike>strikethrough text</strike>.</p>

This is strikethrough text.

Superscript Text

To make text superscript, use the <sup> tag:

  <p>This is <sup>superscript text</sup>.</p>

This is superscript text.

Subscript Text

To make text subscript, use the <sub> tag:

  <p>This is <sub>subscript text</sub>.</p>

This is subscript text.

Font Properties

To change the font properties of text, use the <font> tag:

  <p>This is <font color="red" size="4">font text</font>.</p>

This is font text.

Headings

To create headings, use the <h1> to <h6> tags:

  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraphs

To create paragraphs, use the <p> tag:

  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>

This is a paragraph.

This is another paragraph.

Lists

To create lists, use the <ul> and <ol> tags for unordered and ordered lists respectively, and the <li> tag for list items:

  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

  <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ol>
  • Item 1
  • Item 2
  • Item 3
  1. Item 1
  2. Item 2
  3. Item 3

Tables

To create tables, use the <table>, <tr>, and <td> tags for the table, table rows, and table cells respectively:

  <table>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
    <tr>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
  </table>
Cell 1 Cell 2
Cell 3 Cell 4

Images

To display images, use the <img> tag:

  <img src="image.jpg" alt="Image">
Image

Conclusion

HTML Formatting is an essential aspect of web development that helps to make the content more readable, visually appealing, and user-friendly. By using various tags and attributes, developers can define the structure and appearance of the content, and create a better user experience for their audience.

References

Activity