HTML Tutorials

HTML - Formatting

HTML Formatting

1. Introduction to HTML Formatting

HTML provides a variety of tags and attributes for formatting text. These tags are used to modify the appearance of text, including font styles, size, alignment, and other properties. The purpose of HTML formatting is to make content more readable, visually appealing, and structured on a webpage.

2. Text Formatting Tags

Here are the most commonly used HTML tags for formatting text:

2.1. Bold Text

The <b> tag is used to bold text. It makes the text appear darker and thicker.

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

This is bold text.

2.2. Italic Text

The <i> tag is used to italicize text, which tilts the letters to the right.

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

This is italic text.

2.3. Underlined Text

The <:u> tag is used to underline text.

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

This text is underlined.

2.4. Strikethrough Text

The <s> tag is used to strike through text, indicating that the text is no longer valid or relevant.

    <s>This text is struck through.</s>

This text is struck through.

2.5. Superscript Text

The <sup> tag is used to display text as superscript, typically used for footnotes or mathematical exponents.

    <sup>2</sup>

This is an example of a superscript: 2nd.

2.6. Subscript Text

The <sub> tag is used to display text as subscript, typically used in chemical formulas or mathematical expressions.

    <sub>2</sub>

This is an example of a subscript: H2O.

3. Text Alignment

You can change the alignment of text within an element using the text-align CSS property. The default alignment is left, but it can be modified to center or right-align text.

3.1. Left Alignment (Default)

Text is left-aligned by default, meaning it will start from the left edge of the container.

3.2. Center Alignment

You can center-align text by using the text-align CSS property:

    <p style="text-align: center;">This paragraph is centered.</p>

This paragraph is centered.

3.3. Right Alignment

Similarly, you can right-align text:

    <p style="text-align: right;">This paragraph is right-aligned.</p>

This paragraph is right-aligned.

4. Text Indentation

To create an indentation at the beginning of a paragraph, use the text-indent CSS property. Here’s an example:

    <p style="text-indent: 30px;">This paragraph has an indentation at the start.</p>

This paragraph has an indentation at the start.

5. Changing Text Color and Size

HTML allows you to change the color and size of the text using inline styles or external CSS.

5.1. Text Color

The color CSS property allows you to change the color of text. You can use color names, RGB values, or hex codes.

    <p style="color: blue;">This text is blue.</p>

This text is blue.

5.2. Text Size

The font-size CSS property controls the size of the text. You can specify the size in pixels, ems, or percentages.

    <p style="font-size: 20px;">This text is 20 pixels in size.</p>

This text is 20 pixels in size.

6. Font Style and Weight

You can also modify the style and weight of text using CSS properties like font-family, font-weight, and font-style:

6.1. Font Family

The font-family property allows you to specify the font type. If the font is not available, the browser will use a fallback font.

    <p style="font-family: Arial, sans-serif;">This text uses Arial font.</p>

This text uses Arial font.

6.2. Font Weight

The font-weight property controls the thickness of the text. You can use values like normal, bold, bolder, or numeric values.

    <p style="font-weight: bold;">This text is bold.</p>

This text is bold.

6.3. Font Style

The font-style property can be used to italicize text:

    <p style="font-style: italic;">This text is italicized.</p>

This text is italicized.

7. Text Decoration

Text decoration allows you to add decorations like underlines, overlines, and line-throughs using CSS. The text-decoration property is used for this purpose.

    <p style="text-decoration: underline;">This text is underlined.</p>

This text is underlined.

In summary, HTML offers a wide variety of tags and CSS properties to format text. You can modify the text's appearance using properties like font-style, font-size, color, and text-align. These formatting techniques help create visually appealing and readable content on webpages. Mastering these tools is essential for web development and design.

logo

HTML

Beginner 5 Hours

HTML Formatting

1. Introduction to HTML Formatting

HTML provides a variety of tags and attributes for formatting text. These tags are used to modify the appearance of text, including font styles, size, alignment, and other properties. The purpose of HTML formatting is to make content more readable, visually appealing, and structured on a webpage.

2. Text Formatting Tags

Here are the most commonly used HTML tags for formatting text:

2.1. Bold Text

The

<b> tag is used to bold text. It makes the text appear darker and thicker.

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

This is bold text.

2.2. Italic Text

The

<i> tag is used to italicize text, which tilts the letters to the right.

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

This is italic text.

2.3. Underlined Text

The

<:u> tag is used to underline text.

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

This text is underlined.

2.4. Strikethrough Text

The

<s> tag is used to strike through text, indicating that the text is no longer valid or relevant.

    <s>This text is struck through.</s>

This text is struck through.

2.5. Superscript Text

The <sup> tag is used to display text as superscript, typically used for footnotes or mathematical exponents.

    <sup>2</sup>

This is an example of a superscript: 2nd.

2.6. Subscript Text

The <sub> tag is used to display text as subscript, typically used in chemical formulas or mathematical expressions.

    <sub>2</sub>

This is an example of a subscript: H2O.

3. Text Alignment

You can change the alignment of text within an element using the text-align CSS property. The default alignment is left, but it can be modified to center or right-align text.

3.1. Left Alignment (Default)

Text is left-aligned by default, meaning it will start from the left edge of the container.

3.2. Center Alignment

You can center-align text by using the text-align CSS property:

    <p style="text-align: center;">This paragraph is centered.</p>

This paragraph is centered.

3.3. Right Alignment

Similarly, you can right-align text:

    <p style="text-align: right;">This paragraph is right-aligned.</p>

This paragraph is right-aligned.

4. Text Indentation

To create an indentation at the beginning of a paragraph, use the text-indent CSS property. Here’s an example:

    <p style="text-indent: 30px;">This paragraph has an indentation at the start.</p>

This paragraph has an indentation at the start.

5. Changing Text Color and Size

HTML allows you to change the color and size of the text using inline styles or external CSS.

5.1. Text Color

The color CSS property allows you to change the color of text. You can use color names, RGB values, or hex codes.

    <p style="color: blue;">This text is blue.</p>

This text is blue.

5.2. Text Size

The font-size CSS property controls the size of the text. You can specify the size in pixels, ems, or percentages.

    <p style="font-size: 20px;">This text is 20 pixels in size.</p>

This text is 20 pixels in size.

6. Font Style and Weight

You can also modify the style and weight of text using CSS properties like font-family, font-weight, and font-style:

6.1. Font Family

The font-family property allows you to specify the font type. If the font is not available, the browser will use a fallback font.

    <p style="font-family: Arial, sans-serif;">This text uses Arial font.</p>

This text uses Arial font.

6.2. Font Weight

The font-weight property controls the thickness of the text. You can use values like normal, bold, bolder, or numeric values.

    <p style="font-weight: bold;">This text is bold.</p>

This text is bold.

6.3. Font Style

The font-style property can be used to italicize text:

    <p style="font-style: italic;">This text is italicized.</p>

This text is italicized.

7. Text Decoration

Text decoration allows you to add decorations like underlines, overlines, and line-throughs using CSS. The text-decoration property is used for this purpose.

    <p style="text-decoration: underline;">This text is underlined.</p>

This text is underlined.

In summary, HTML offers a wide variety of tags and CSS properties to format text. You can modify the text's appearance using properties like font-style, font-size, color, and text-align. These formatting techniques help create visually appealing and readable content on webpages. Mastering these tools is essential for web development and design.

Related Tutorials

Frequently Asked Questions for HTML

  • HTML stands for HyperText Markup Language.
  • It is used to create the structure of web pages and web applications.
  • HTML defines elements such as headings, paragraphs, links, images, and other content.

  • Block-level elements (like <div>, <p>, <h1>) start on a new line and take full width.
  • Inline elements (like <span>, <a>, <strong>) stay within the flow of the text.
  • Understanding this helps with layout and styling.

  • A basic HTML page includes a <!DOCTYPE html> declaration, followed by <html>, <head>, and <body>.
  • The <head> section contains metadata like the title and links to stylesheets.
  • The <body> section contains all the visible content of the webpage.

  • The <meta> tag provides metadata such as page description, keywords, and author.
  • It helps browsers and search engines understand the content of the page.
  • One common use is specifying the character encoding: <meta charset="UTF-8">.

  • Forms collect user input using the <form> tag.
  • Inside a form, use <input>, <textarea>, <select>, and <button>.
  • The action attribute specifies where to send the form data.

  • The <label> tag defines a label for an input element.
  • It improves accessibility and allows users to click the label to focus the input.
    Example: <label for="email">Email:</label><input id="email">.

Comments in HTML are written between <!-- and -->.

Example:
<!-- This is a comment -->.
Comments are not displayed on the webpage and are used for documentation.

HTML entities are used to display reserved or special characters.

For example, &lt; displays < and &amp; displays &.
Use them to avoid confusion with actual HTML syntax.