Basic Text & Formatting Tags

HTML provides various tags to structure and format text on your web page. Browsers interpret these tags to display your content appropriately, often adding default spacing or styling.

Paragraphs and Headings

• Paragraph Tag (<p>): Use this to create a single, self-contained paragraph of text. Paragraphs are “block-level” elements, meaning they typically start on a new line and take up the full available width, with space above and below.

The following code:

<p>Hello, world.</p>

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

Would produce the following result:

Hello, world.

This is a paragraph.

• Heading Tags (<h1> to <h6>): These tags define titles and subtitles for sections of your page. <h1> is the largest and most important heading, while <h6> is the smallest. Headings are also block-level elements.

Example

The following code:

<h1>Main Page Title</h1>
<h2>Section Subtitle</h2>
<p>Some text under the subtitle.</p>

Would produce the following result:

Main Page Title

Section Subtitle

This is a paragraph.

Line Breaks and Horizontal Rules

• Line Break Tag (<br/>): Unlike in a text editor, simply pressing Enter in your HTML code doesn’t create a new line on the web page. Use the self-closing <br/> tag to explicitly force a line break within a block of text.

<p>Hello, world.<br/>This is on a new line.</p>

Hello, world

This is on a new line.

Horizontal Rule (<hr/>): This self-closing tag creates a full-width horizontal line, often used as a visual divider between sections of content. This tag is self-closing. The horizontal rule automatically adds space above and below, ensuring that nothing else is on the same line.

The following code:

<h2>Hello, world.</h2> <hr/> <p>This is a paragraph.</p>

Would produce the following result:
Hello, world.

This is a paragraph.

Semantic Text Formatting

HTML also offers tags to add semantic meaning or visual emphasis to specific words or phrases within your text. While browsers often render these with bolding or italics, their primary purpose is to convey importance or emphasis.

• <strong>: Marks text as strongly important (usually displayed in bold).
• <em>: Emphasizes text (usually displayed in italics).
• <ins>: Indicates inserted text (usually underlined).
• <del>: Indicates deleted or outdated text (usually struck through).
• <sup> (Superscript) and <sub> (Subscript): Render text slightly smaller and raised (^{like this}) or lowered (_{like this}) from the baseline, often used for mathematical formulas, chemical compounds, or footnotes.

<p>
    This text is <strong>very important</strong>, while this is <em>emphasized</em>.
    The equation is E = mc<sup>2</sup>, and H<sub>2</sub>O is water.
</p>

Caution: While older tags like <b> (bold), <i> (italic), and <u> (underline) exist, it’s best practice to use <strong>, <em>, <ins>, and <del> instead. These newer tags provide semantic meaning, which is better for accessibility and web standards.

Text Tags Summary

Semantic Tags Summary

Exercises

You can try out HTML directly by typing your work in the W3 HTML Editor.

1. If a>0 and a≠1, the exponential f(x)=a^x has an inverse function f^-1(y) = log_a(y). Write this out using the tags you’ve just learned.
2. A circle is all the points in a plane that are at a given distance (radius) from the center. You may be familiar with the equation x^2+y^2=r^2. Rewrite the equation using superscripts.
3. Vectors are sometimes denoted using bold script, for example if you want the cross product i × j = k. Write out a cross product using the <b> or <strong> tag.
4. B(t) =T(t) × N(t). (Binormal vectors — a calculus 3 topic). Write this equation out with bolding for the vectors and italicizing the (t).