Course List

Example-Based Explanation

HTML (HyperText Markup Language) is the foundation of web pages. By learning common tags, you can build pages with a clear structure. The following core functions of HTML are introduced through several intuitive examples.

Example 1: Headings and Paragraphs

What you see:
On the page, you will see a level‑1 heading, a level‑2 heading, and a level‑3 heading, sized from largest to smallest, along with several paragraphs of text. Each heading has a different font size and weight, and paragraphs are naturally separated by margins.

Purpose:

  • Headings (<h1> to <h6>) define the hierarchy of content. <h1> is the most important and is typically used for the main page title.

  • Paragraphs (<p>) are used to organise ordinary text; browsers add automatic spacing above and below.

Key learning point:
A well‑structured page should use headings in a logical order without skipping levels (e.g., using <h3> directly after <h1> without <h2>).

Example

<h1>This is Title 2</h1>
<h2>This is Title 2</h2>
<h3>This is Title 3</h3>
<h4>This is Title 4</h4>
<h5>This is Title 5</h5>
<h6>This is Title 6</h6>

<h>Robinson Crusoe</h>
<p>Robinson Crusoe was born into a middle-class family in England. Against his parents' wishes, he gave up a comfortable life and a stable career and decided to go on an adventure at sea.</p>

Copy this code and try running it.

Code Running Test

Example 2: Lists (Unordered and Ordered)

What you see:

  • Unordered list: several bullet points, e.g., “HTML learning path”, “CSS styling”, etc.

  • Ordered list: numbered entries, e.g., “1. Open editor”, “2. Write structure”, etc.

Purpose:

  • Unordered lists (<ul> with <li>) are used for items without a specific order, such as features or checklists.

  • Ordered lists (<ol> with <li>) are used for sequential content, such as steps or rankings.

Example

<ul>
<li>Apple</li>
<li>Cabbage</li>
</ul>

<dl>
<dt>Apple</dt>
<dd>-Fruits</dd>
<dt>Cabbage</dt>
<dd>- Vegetables</dd>
</dl>

Copy this code and try running it.

Code Running Test

Example 3: Links and Images

What you see:

  • Link: underlined blue text (e.g., “Visit example website”) that changes on hover and can be clicked to navigate to another page.

  • Image: a placeholder area (or a sample image) with a short caption.

Purpose:

  • Links (<a>) enable navigation between pages – the backbone of the web.

  • Images (<img>) embed visual content to enhance communication.

Example

<a href="https://www.impressionnews.com/all-courses/">All Courses</a>

<img src="https://www.impressionnews.com/wp-content/uploads/2026/05/html-courseimage.webp" alt="HTML">

Copy this code and try running it.

Code Running Test

Example 4: Block‑Level and Inline Elements

What you see:

  • Block element: an independent rectangular area that spans the full width of its container, often with a background colour and text.

  • Inline element: a piece of text within a paragraph that has a background colour or border but does not break the line.

Purpose:

  • Block‑level elements (e.g., <div>, <p>, <h1>) are used to build page structure; they take up the full width available.

  • Inline elements (e.g., <span>, <a>, <strong>) are used to style or mark up parts of text without disrupting the flow.

<div>Example

<div class="box">
<h1>This is a title within a div element. </h1>
<p>This is some text. </p>
<p>This is the text within the div element. </p>
</div>

Copy this code and try running it.

Code Running Test

<span>Example

<p>I have a pair of
<span style="color:blue">blue</span>
<span style="font-size:50px">big eyes</span>and <span style="color:gold">golden hair</span>
</p>

Copy this code and try running it.

Code Running Test