HTML & CSS Masterclass | VoidX Academy

1. Introduction to HTML

Introduction

Introduction to HTML

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure of a webpage — not how it looks (that's CSS), not how it behaves (that's JavaScript) — just the content and its meaning.

HTML uses elements (also called tags) to tell the browser what everything is. Think of HTML as the skeleton of a website.

Your First HTML Page

Every HTML document starts with a DOCTYPE declaration, followed by an <html> tag that wraps everything, containing a <head> (for metadata) and a <body> (for visible content).

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first paragraph.</p>
</body>
</html>

💡Try it: Click the Try it button above to see this code render in the Visual Preview tab! Edit the text and watch it update live.

HTML Elements and Tags

Most HTML elements have an opening tag and a closing tag with a slash. Content goes between them.

<h1> to <h6> — Headings (largest to smallest)
<p> — Paragraph
<br> — Line break (self-closing, no closing tag)
<hr> — Horizontal rule (thematic break)

<h1>Main Title (Most Important)</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<p>This is a paragraph of text. It will wrap automatically.</p>
<p>This is another paragraph.<br>This line is on a new line.</p>

Text Formatting Tags

HTML provides tags to give text semantic meaning (not just visual style). Screen readers and search engines use these to understand importance.

<p>This is <strong>important text</strong> and this is <em>emphasized text</em>.</p>
<p>This text is <mark>highlighted</mark>.</p>
<p><small>This is a disclaimer or small print.</small></p>
<p><del>This text has been deleted</del> and <ins>this text is inserted</ins>.</p>

Links - The Anchor Tag

The <a> (anchor) tag creates hyperlinks. The href attribute specifies the destination URL. Without href, it's just a placeholder.

<a href="https://www.example.com">Visit Example.com</a>
<br>
<a href="#section">Jump to a section on this page</a>
<br>
<a href="mailto:someone@example.com">Send an email</a>
<br>
<a href="https://google.com" target="_blank">Open Google in a new tab</a>

The target="_blank" attribute makes the link open in a new browser tab. Always use this for external links so users don't navigate away from your site.

Images - The Img Tag

The <img> tag embeds images. It is self-closing (no closing tag) and requires two attributes: src (image source URL) and alt (alternative text for accessibility).

<img src="https://picsum.photos/200/150" alt="Random placeholder image" width="200" height="150">

The alt attribute is critical for accessibility — screen readers read it aloud to visually impaired users. It also displays if the image fails to load.

Lists in HTML

HTML has three types of lists. Each serves a different purpose.

<h4>Unordered List (bullet points)</h4>
<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
</ul>

<h4>Ordered List (numbered)</h4>
<ol>
    <li>Wake up</li>
    <li>Brush teeth</li>
    <li>Eat breakfast</li>
</ol>

<h4>Description List (term and definition)</h4>
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language — structures content</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets — styles content</dd>
</dl>

Lists can be nested — put a list inside another list item to create sub-lists.

<ul>
    <li>Fruits
        <ul>
            <li>Apple</li>
            <li>Orange</li>
        </ul>
    </li>
    <li>Vegetables</li>
</ul>

Knowledge Check

Ready to test your understanding of 1. Introduction to HTML?

2. HTML Attributes

1. Introduction to HTML

Introduction

Introduction to HTML

HTML uses elements (also called tags) to tell the browser what everything is. Think of HTML as the skeleton of a website.

Your First HTML Page

Every HTML document starts with a DOCTYPE declaration, followed by an <html> tag that wraps everything, containing a <head> (for metadata) and a <body> (for visible content).

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first paragraph.</p>
</body>
</html>

💡Try it: Click the Try it button above to see this code render in the Visual Preview tab! Edit the text and watch it update live.

HTML Elements and Tags

Most HTML elements have an opening tag and a closing tag with a slash. Content goes between them.

<h1> to <h6> — Headings (largest to smallest)
<p> — Paragraph
<br> — Line break (self-closing, no closing tag)
<hr> — Horizontal rule (thematic break)

<h1>Main Title (Most Important)</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<p>This is a paragraph of text. It will wrap automatically.</p>
<p>This is another paragraph.<br>This line is on a new line.</p>

Text Formatting Tags

HTML provides tags to give text semantic meaning (not just visual style). Screen readers and search engines use these to understand importance.

<p>This is <strong>important text</strong> and this is <em>emphasized text</em>.</p>
<p>This text is <mark>highlighted</mark>.</p>
<p><small>This is a disclaimer or small print.</small></p>
<p><del>This text has been deleted</del> and <ins>this text is inserted</ins>.</p>

Links - The Anchor Tag

The <a> (anchor) tag creates hyperlinks. The href attribute specifies the destination URL. Without href, it's just a placeholder.

<a href="https://www.example.com">Visit Example.com</a>
<br>
<a href="#section">Jump to a section on this page</a>
<br>
<a href="mailto:someone@example.com">Send an email</a>
<br>
<a href="https://google.com" target="_blank">Open Google in a new tab</a>

The target="_blank" attribute makes the link open in a new browser tab. Always use this for external links so users don't navigate away from your site.

Images - The Img Tag

The <img> tag embeds images. It is self-closing (no closing tag) and requires two attributes: src (image source URL) and alt (alternative text for accessibility).

<img src="https://picsum.photos/200/150" alt="Random placeholder image" width="200" height="150">

The alt attribute is critical for accessibility — screen readers read it aloud to visually impaired users. It also displays if the image fails to load.

Lists in HTML

HTML has three types of lists. Each serves a different purpose.

<h4>Unordered List (bullet points)</h4>
<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
</ul>

<h4>Ordered List (numbered)</h4>
<ol>
    <li>Wake up</li>
    <li>Brush teeth</li>
    <li>Eat breakfast</li>
</ol>

<h4>Description List (term and definition)</h4>
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language — structures content</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets — styles content</dd>
</dl>

Lists can be nested — put a list inside another list item to create sub-lists.

<ul>
    <li>Fruits
        <ul>
            <li>Apple</li>
            <li>Orange</li>
        </ul>
    </li>
    <li>Vegetables</li>
</ul>

Knowledge Check

Ready to test your understanding of 1. Introduction to HTML?

2. HTML Attributes