top of page
Writer's picturecompnomics

A Guide to Basic HTML Text Formatting Techniques


Here's the HTML code to explain different text formatting options:


1. Paragraph Breaks and Line Breaks:

  • Paragraph breaks (<p> tags) create separate paragraphs with space between them.

  • Line breaks (<br> tags) insert a line break within a paragraph without starting a new one.


<p>This is a paragraph.</p>
<p>This is another paragraph, separated by a paragraph break.</p>
This sentence has a <br> line break within it.

2. Emphasizing Text: Heading Styles:

  • Headings (<h1> to <h6>) emphasize text with different sizes and styles.


<h1>This is a Heading 1, largest and bold</h1>
<h2>This is a Heading 2, slightly smaller and bold</h2>
<h3>This is a Heading 3, even smaller and bold</h3>
... (similarly for `<h4>`, `<h5>`, `<h6>`)

Here's the HTML code to explain different text formatting options:

1. Paragraph Breaks and Line Breaks:

  • Paragraph breaks (<p> tags) create separate paragraphs with space between them.

  • Line breaks (<br> tags) insert a line break within a paragraph without starting a new one.

HTML

<p>This is a paragraph.</p>
<p>This is another paragraph, separated by a paragraph break.</p>
This sentence has a <br> line break within it.

2. Emphasizing Text: Heading Styles:

  • Headings (<h1> to <h6>) emphasize text with different sizes and styles.

HTML

<h1>This is a Heading 1, largest and bold</h1>
<h2>This is a Heading 2, slightly smaller and bold</h2>
<h3>This is a Heading 3, even smaller and bold</h3>

... (similarly for `<h4>`, `<h5>`, `<h6>`)

3. Drawing Lines:

  • Use the Horizontal Rule (<hr>) tag to draw a horizontal line across the page.


This text is above the line.
<hr>
This text is below the line.

4. Text Styles: Bold, Italics, Underline:

  • <b> or <strong> make text bold (<strong> is semantically preferred).

  • <i> or <em> make text italic (<em> is semantically preferred).

  • <u> underlines text (use sparingly as it can impact accessibility).


This text is <b>bold</b>.
This text is <i>italicized</i>.
This text is <u>underlined</u>

Here's the HTML code to explain different text formatting options:

1. Paragraph Breaks and Line Breaks:

  • Paragraph breaks (<p> tags) create separate paragraphs with space between them.

  • Line breaks (<br> tags) insert a line break within a paragraph without starting a new one.

HTML

<p>This is a paragraph.</p>
<p>This is another paragraph, separated by a paragraph break.</p>
This sentence has a <br> line break within it.

2. Emphasizing Text: Heading Styles:

  • Headings (<h1> to <h6>) emphasize text with different sizes and styles.

HTML

<h1>This is a Heading 1, largest and bold</h1>
<h2>This is a Heading 2, slightly smaller and bold</h2>
<h3>This is a Heading 3, even smaller and bold</h3>

... (similarly for `<h4>`, `<h5>`, `<h6>`)

3. Drawing Lines:

  • Use the Horizontal Rule (<hr>) tag to draw a horizontal line across the page.

HTML

This text is above the line.
<hr>
This text is below the line.

4. Text Styles: Bold, Italics, Underline:

  • <b> or <strong> make text bold (<strong> is semantically preferred).

  • <i> or <em> make text italic (<em> is semantically preferred).

  • <u> underlines text (use sparingly as it can impact accessibility).

HTML

This text is <b>bold</b>
This text is <i>italicized</i>.
This text is <u>underlined</u>

Remember:

  • Each style tag should have a closing tag (e.g., </b>).

  • Use these styles judiciously to enhance readability and avoid overwhelming your visitors.

  • For more options and advanced formatting, explore CSS (Cascading Style Sheets).


13 views0 comments

Recent Posts

See All

Comments

Rated 0 out of 5 stars.
No ratings yet

Add a rating
bottom of page