Previous
Written by: rJTutorial Team | Last Updated:

HTML Formatting

HTML formatting is more than just making text look "pretty." It involves using specific tags to tell the browser and assistive technologies like screen readers exactly what kind of information is being displayed. By using the right elements, you ensure your content is accessible, SEO-friendly, and easy to read.

Below is a breakdown of the most common formatting elements you will use in your daily development work.

  • Headings (<h1> to <h6>):

Headings define the hierarchy of your content. Think of them like a book's table of contents. <h1> is the main title, <h2> represents major sections, and so on.

<h1>The Ultimate Guide to Web Development</h1>
<h2>Getting Started with HTML</h2>
<h3>Understanding Tags and Elements</h3>
<!-- Headings go down to <h6> for deep sub-sections -->
Best Practice: Always maintain a logical order. Never skip heading levels (e.g., don't jump from an <h1> directly to an <h3>) as this confuses screen readers and hurts your SEO ranking.
  • Paragraphs (<p>):

The <p> tag is the bread and butter of web content. It automatically adds some space (margin) before and after the text to make large blocks of text readable.

<p>This is a paragraph. It contains the main body text of your website.</p>
  • Bold Text (<strong> or <b>):

While both make text look bold, they serve different purposes. <strong> implies that the text is of great importance or urgency, whereas <b> is purely stylistic.

<strong>Warning:</strong> This action cannot be undone.
<p>The brand name is <b>SuperCorp</b>.</p>
Developer Tip: Use <strong> by default. Modern web standards emphasize "semantic" HTML, meaning the tag should describe the meaning of the content, not just the appearance.
  • Italic Text (<em> or <i>):

Similar to bolding, <em> is for "emphasized" text (often read with a different stress by screen readers), while <i> is used for technical terms, idiomatic phrases, or thoughts.

<p>You <em>must</em> remember to save your work.</p>
<p>The term <i>Homo sapiens</i> refers to modern humans.</p>
  • Underlined Text (<u>):

The <u> tag applies a simple underline. In modern web design, it is used for non-textual annotations or to point out misspelled words.

<p>This is a <u>misspelled</u> word in the draft.</p>
Watch Out: Avoid underlining text unless it is a link. Users have been trained for decades to click on underlined text, and using it for simple emphasis will frustrate them when nothing happens.
  • Strikethrough Text (<s> or <del>):

Use <s> to show things that are no longer accurate or relevant. Use <del> specifically to represent content that has been deleted from a document (often paired with <ins> for additions).

<p>Original Price: <s>$99.99</s></p>
<p>Sale Price: $49.99</p>
<p>The project is <del>delayed</del> <ins>on track</ins>.</p>
  • Superscript and Subscript (<sup> and <sub>):

These are essential for mathematical formulas, chemical compounds, and footnotes.

<p>Einstein's famous equation is E=mc<sup>2</sup>.</p>
<p>The chemical formula for caffeine is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
  • Inline Code (<code>):

The <code> tag is used to display snippets of computer code. By default, browsers render this in a monospaced font like Courier.

<p>To finish the process, type <code>npm install</code> into your terminal.</p>
  • Blockquote (<blockquote>):

When you are quoting a long section of text from another source, use <blockquote>. Browsers usually indent these sections automatically.

<blockquote cite="https://www.worldhistory.org/quote/">
    "The only true wisdom is in knowing you know nothing."   Socrates
</blockquote>
  • Horizontal Rule (<hr>):

The <hr> tag creates a horizontal line. Semantically, it represents a "thematic break" or a shift in the topic within a page.

<p>This is the end of Chapter 1.</p>
<hr>
<p>Welcome to Chapter 2.</p>
  • Line Break (<br>):

The <br> tag forces a line break without starting a new paragraph. It is a "void" tag, meaning it doesn't have a closing tag.

<p>123 Developer Lane<br>
Code City<br>
Webland</p>
Common Mistake: Using <br> tags to create visual space between paragraphs. In professional development, you should use CSS (margin or padding) for layout spacing, and reserve <br> for things like addresses or poems where the line break is part of the content.

By mastering these HTML formatting elements, you provide a solid structure for your web pages. Remember that HTML is for structure and meaning, while CSS should be used for the visual design. Combining these two effectively is the key to becoming a great developer.

Previous