Day 2 — Text, headings and lists

Ninety percent of the web is text. These are the tags you will type more than any others.

Headings are an outline, not sizes

There are six, h1 down to h6. They exist to describe structure. The fact that h1 is big is a side effect you will override with CSS on Day 7.

<h1>Data Analytics Course</h1>
<h2>What you will learn</h2>
<h3>Excel</h3>
<p>Formulas, pivots and dashboards.</p>
<h3>SQL</h3>
<p>Joins, grouping and window functions.</p>
<h2>Who it is for</h2>
<p>Freshers and working professionals.</p>

Two rules that matter for SEO and screen readers One h1 per page - it is the title of this page, and there is only one of those.
Never skip a level. h1 then h3 with no h2 between them is a broken outline. Change an h2 to h3 in the box above and the Check tab will pick it up.
Never pick a heading level because you like the size. That is CSS.

Paragraphs and how whitespace works

HTML collapses every run of spaces, tabs and newlines into a single space. Your careful layout in the editor means nothing to the browser.

<p>These        spaces
    and     line breaks
        all collapse into one space.</p>

<p>Use a new paragraph for a new paragraph.</p>

That is a feature, not a bug - it means you can indent your source to keep it readable without affecting the page.

Emphasis

<p>This is <strong>important</strong> and this is <em>emphasised</em>.</p>
<p>This is just <b>bold</b> and this is just <i>italic</i>.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>
<p>The function <code>SUM()</code> adds a range.</p>
<p><small>Terms and conditions apply.</small></p>

strong or b? They look identical. <strong> means "this matters", and a screen reader changes tone for it. <b> means "draw this bold" with no extra meaning. If the word is genuinely important, use strong. Same story for <em> against <i>.

Lists

Three kinds. Unordered for things where the order does not matter, ordered where it does, and description lists for term-and-definition pairs.

<h3>What to bring</h3>
<ul>
  <li>A laptop</li>
  <li>Excel installed</li>
  <li>A notebook</li>
</ul>

<h3>How to enrol</h3>
<ol>
  <li>Book a free demo</li>
  <li>Choose a batch</li>
  <li>Pay the fee</li>
</ol>

<h3>Jargon</h3>
<dl>
  <dt>MIS</dt>
  <dd>Management Information System - the regular reporting pack.</dd>
  <dt>ETL</dt>
  <dd>Extract, Transform, Load.</dd>
</dl>

Nesting a list

A nested list goes inside the li, not between two of them. This is the single most common list mistake.

<ul>
  <li>Excel
    <ul>
      <li>Formulas</li>
      <li>Pivot tables</li>
    </ul>
  </li>
  <li>Power BI</li>
</ul>

Look at the Outline tab: the inner ul is indented under the li. If you put it between two li elements instead, the outline shows it as a sibling and the indentation in the preview goes wrong.

Quotes

<blockquote>
  <p>I came in knowing only VLOOKUP. I left building dashboards.</p>
</blockquote>
<p>She called it <q>the most useful three months</q> of her year.</p>

Characters you cannot type directly

A < in your text would start a tag. So there are escape codes, called entities.

You want	You type
<	`<`
>	`>`
&	`&`
a space that never breaks	` `
©	`©`

<p>In Excel, &lt; means less than.</p>
<p>Tea &amp; biscuits</p>
<p>&copy; 2026 DAI ACADEMY</p>

Try these yourself

Write a page with one h1, two h2 sections and a paragraph under each.
Make a nested list of three courses, each with two topics inside it.
Check the Outline tab and confirm the nested list sits inside its li.
Write a sentence containing a real less-than sign and a real ampersand.
Explain why you should not choose h3 just because you want smaller text.

← PreviousDay 1 — What HTML is, and the page skeleton Next →Day 3 — Links and images