Beginner's Guide to HTML Structure and Text Formatting

Nikesh · Apr 12, 2025

This article introduces the basics of HTML using a sample index.html file. If you're new to HTML, this is a great place to start. We'll go over headings, paragraphs, line breaks, text formatting, and lists.

You can copy the full code at the end, save it as index.html, and open it in your browser to see how it works.

1. Headings in HTML
HTML provides six levels of headings. These are defined using <h1> to <h6> tags.

HTML:

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

- <h1> is the most important and largest heading, typically used for page titles.
- <h6> is the smallest and least important heading.
- These tags help structure your content in a meaningful and accessible way.

2. Paragraphs and Line Breaks
The <p> tag defines a paragraph. However, HTML ignores line breaks within a paragraph unless you use the <br> tag.

HTML:

<p>
   This paragraph
   contains a lot of lines
   but they are ignored.
</p>

<p>
   This paragraph<br>
   contains a lot of lines<br>
   and they are displayed.
</p>

- In the first example, even though the text spans multiple lines in the code, it appears as one continuous line in the browser.
- In the second example, <br> forces a line break wherever it is used.

3. Bold Text in HTML
To make text bold, you can use <strong> or <b>.

HTML:

<p>
   No matter how much the dog barks: <strong>don't feed him chocolate</strong>.
</p>

<p>
   The primary colors are <b>red</b>, <b>yellow</b> and <b>blue</b>.
</p>

- <strong> emphasizes the importance of the text and also makes it bold.
- <b> makes the text bold without adding extra meaning.

4. Italic and Emphasized Text
Italic text is used for emphasis or to indicate titles, terms, and names.

HTML:

<p>
   Wake up <em>now</em>!
</p>

<p>
   The term <i>HTML</i> stands for HyperText Markup Language.
</p>

<p>
   I <em>really</em> want ice cream.
</p>

<p>
   My favourite book is <i>Dracula</i>.
</p>

- <em> is used for emphasized text and is usually displayed in italics.
- <i> is used for styling text in italics without adding emphasis.

5. Lists in HTML
There are two types of lists in HTML: unordered and ordered.

Unordered List
An unordered list uses the <ul> tag and displays items with bullet points.

HTML:

<ul>
   <li>Tea</li>
   <li>Sugar</li>
   <li>Milk</li>
</ul>

Ordered List
An ordered list uses the <ol> tag and displays items with numbers.

HTML:

<ol>
   <li>Rocky</li>
   <li>Rocky II</li>
   <li>Rocky III</li>
</ol>

- Use <li> inside both <ul> and <ol> to define individual list items.

6. Complete HTML Example
Here is the complete HTML file combining all the concepts explained above. You can save this as index.html and open it in your browser.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Basics</title>
  </head>
  <body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>

    <p>
       This paragraph
       contains a lot of lines
       but they are ignored.
    </p>

    <p>
       This paragraph<br>
       contains a lot of lines<br>
       and they are displayed.
    </p>

    <p>
       No matter how much the dog barks: <strong>don't feed him chocolate</strong>.
    </p>

    <p>
       The primary colors are <b>red</b>, <b>yellow</b> and <b>blue</b>.
    </p>

    <p>
       Wake up <em>now</em>!
    </p>

    <p>
       The term <i>HTML</i> stands for HyperText Markup Language.
    </p>

    <p>
       I <em>really</em> want ice cream.
    </p>

    <p>
       My favourite book is <i>Dracula</i>.
    </p>

    <ul>
       <li>Tea</li>
       <li>Sugar</li>
       <li>Milk</li>
    </ul>

    <ol>
       <li>Rocky</li>
       <li>Rocky II</li>
       <li>Rocky III</li>
    </ol>
  </body>
</html>

Conclusion
This article explained the structure of a basic HTML document and introduced essential tags such as headings, paragraphs, formatting, and lists. Understanding these tags will help you create and organize web content clearly and correctly.

In future articles, we’ll cover links, images, tables, and more.

Search

Search

Beginner's Guide to HTML Structure and Text Formatting

Nikesh

Administrator