HTML Mastery / What is HTML?
Lecture 1 / 12
Lecture 01 · Foundations

What is HTML?

No prerequisites

Introduction to HTML

HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web.

Every website you visit uses HTML in some form. HTML provides the structure of a webpage, similar to how the skeleton provides structure to the human body.

With HTML, developers can create:

  • Headings
  • Paragraphs
  • Images
  • Links
  • Tables
  • Forms
  • Navigation menus
  • Entire webpage layouts

What Does HyperText Mean?

HyperText refers to text that contains links connecting one page to another.

For example, when you click a link on a website and move to another page, you are using hypertext.

What Does Markup Language Mean?

A markup language uses special tags to describe the structure of content.

HTML tags tell the browser:

  • Which text is a heading
  • Which content is a paragraph
  • Where images should appear
  • How content should be organised

Structure of an HTML Document

A basic HTML page contains several important parts.

Tag Purpose
<!DOCTYPE html> Defines the document type
<html> Root element of the webpage
<head> Contains metadata and page information
<body> Contains visible webpage content
hello.html 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>My First Page</title>
</head>

<body>
  <h1>Hello, World!</h1>
  <p>Welcome to <strong>HTML</strong>.</p>
</body>

</html>

Understanding the Example

  • <h1> creates a main heading
  • <p> creates a paragraph
  • <strong> makes text bold and important
  • <title> sets the browser tab title

How Browsers Read HTML

Web browsers like Chrome, Firefox, and Edge read HTML files and convert them into visual webpages.

The browser does not display the tags themselves. Instead, it interprets them and renders the final page for users.

HTML Tags and Elements

HTML uses tags enclosed inside angle brackets.

Example:

tags.html 
<p>This is a paragraph.</p>

In this example:

  • <p> is the opening tag
  • </p> is the closing tag
  • The text between them is the content

Common HTML Elements

Element Description
<h1> to <h6> Headings
<p> Paragraph
<a> Hyperlink
<img> Image
<ul> Unordered list
<ol> Ordered list
<div> Container element

HTML is Not a Programming Language

HTML is a markup language, not a programming language.

It cannot perform calculations, create logic, or make decisions on its own.

HTML is commonly used together with:

  • CSS → for styling and design
  • JavaScript → for interactivity and dynamic behaviour

Tools Needed for HTML Development

To start writing HTML, you only need:

  • A web browser
  • A text editor or code editor

Recommended Code Editors

Recommended Browsers

Saving an HTML File

HTML files must be saved using the .html extension.

Example:

filename.txt 
index.html

After saving the file, double-click it to open it in your web browser.

🌐 Try It Yourself - Web Compiler

Practice HTML, CSS, and JavaScript right here in your browser! Modify the code below and click "Run" to see your changes instantly.

💡 Practice Tips:

  • Try changing the heading text and paragraph content
  • Add new HTML elements like <div>, <span>, or <ul>
  • Switch to the CSS tab to add colors and styling
  • Use the JavaScript tab to add interactivity
  • Use Ctrl+Enter to quickly run your code

Best Practices for Beginners

  • Always close tags properly
  • Use lowercase tag names
  • Indent code for readability
  • Use meaningful file names
  • Practice by creating small webpages daily
🎯 Exercise 1.1

Create a simple HTML page with your name as the title, add a heading, and a paragraph.

🎯 Exercise 1.2

Create a webpage containing:

  • One main heading
  • Two paragraphs
  • A list of your favourite hobbies
🎯 Exercise 1.3

Create an about.html page introducing yourself with:

  • Your name
  • Your goals
  • Your favourite programming language
Lecture 02 · Foundations

Document Structure

Requires: Lecture 01

Introduction to HTML Document Structure

Every HTML webpage follows a standard structure known as the HTML boilerplate.

This structure helps browsers correctly understand and display the webpage content.

A well-structured HTML document improves:

  • Readability
  • Browser compatibility
  • SEO (Search Engine Optimization)
  • Maintainability

The HTML Boilerplate

The following is the basic structure of a modern HTML5 document.

boilerplate.html 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>

<body>
  <!-- Content here -->
</body>

</html>

Understanding Each Part

Let us break down the document structure step by step.

<!DOCTYPE html>

This declaration tells the browser that the document uses HTML5.

Without it, browsers may switch to older rendering modes that can cause layout issues.

<html>

The <html> tag is the root element of the webpage.

Everything inside the webpage must be placed between:

html-tag.html 
<html>
  ...
</html>

The lang Attribute

The lang="en" attribute specifies the language of the webpage.

This helps:

  • Search engines understand the page language
  • Screen readers improve accessibility
  • Browsers provide better translation support

<head>

The <head> section contains information about the webpage that is not directly visible on the page.

Common elements inside the head section include:

  • Page title
  • Meta tags
  • CSS links
  • JavaScript files
  • Icons and fonts

<meta charset="UTF-8">

This meta tag sets the character encoding to UTF-8.

UTF-8 supports most characters and symbols used worldwide.

Without proper encoding, some text may display incorrectly.

<meta name="viewport">

This tag helps webpages display correctly on mobile devices.

It makes responsive design possible by controlling page scaling and width.

viewport.html 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>

The <title> tag defines the title shown in the browser tab.

Example:

title.html 
<title>My Portfolio</title>

This title also appears in search engine results.

<body>

The <body> section contains all visible webpage content.

Examples include:

  • Headings
  • Paragraphs
  • Images
  • Buttons
  • Navigation menus
  • Videos

Comments in HTML

Comments are notes written inside the code that browsers ignore.

They help developers explain sections of code.

comments.html 
<!-- This is a comment -->

Indentation and Formatting

Indentation makes HTML code easier to read and maintain.

Compare the following examples:

bad-format.html 
<body>
<h1>Title</h1>
<p>Paragraph</p>
</body>
good-format.html 
<body>
  <h1>Title</h1>
  <p>Paragraph</p>
</body>

Proper formatting becomes extremely important in large projects.

HTML5 Semantic Structure

Modern HTML uses semantic elements that describe the meaning of content.

Element Purpose
<header> Top section of a webpage
<nav> Navigation links
<main> Main page content
<section> Content section
<article> Independent content block
<footer> Bottom section of the page

Example Semantic Layout

semantic-layout.html 
<body>

  <header>
    <h1>My Website</h1>
  </header>

  <nav>
    Navigation Menu
  </nav>

  <main>
    Main Content
  </main>

  <footer>
    Copyright 2026
  </footer>

</body>

Creating Your First HTML File

  1. Open your code editor
  2. Create a new file
  3. Save it with a .html extension
  4. Write the HTML boilerplate
  5. Open the file in your browser

Useful VS Code Extensions

Emmet Example

Typing the following in VS Code:

emmet.txt 
!

and pressing Tab automatically generates the complete HTML boilerplate.

Best Practices

  • Always use the HTML5 doctype
  • Keep code properly indented
  • Use semantic tags whenever possible
  • Write meaningful page titles
  • Organise code cleanly from the beginning
🎯 Exercise 2.1

Create a complete HTML5 boilerplate manually without copying the example.

🎯 Exercise 2.2

Create a webpage with:

  • A page title
  • A heading
  • One paragraph
  • A footer section
🎯 Exercise 2.3

Create a semantic webpage using:

  • <header>
  • <nav>
  • <main>
  • <footer>
Lecture 03 · Foundations

Text & Typography

Requires: Lecture 02

Introduction to Text in HTML

Text is one of the most important parts of every webpage. HTML provides several elements to structure and format text properly.

Good typography improves:

  • Readability
  • User experience
  • Accessibility
  • Search engine optimisation

HTML text elements help browsers and search engines understand the importance of content on a webpage.

Headings Hierarchy

HTML provides six heading levels from <h1> to <h6>.

These headings create a content hierarchy similar to chapters and subheadings in a book.

headings.html 
<h1>Main Page Title</h1>
<h2>Major Section</h2>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>

Heading Levels Explained

Heading Purpose
<h1> Main title of the webpage
<h2> Main section heading
<h3> Subsection heading
<h4> - <h6> Smaller nested sections

Importance of Proper Heading Structure

Headings are not only used for making text bigger. They provide semantic meaning to content.

Proper heading usage helps:

  • Search engines understand page structure
  • Screen readers improve accessibility
  • Users quickly scan content

A webpage should usually contain only one primary <h1>.

Paragraphs

The <p> tag is used to create paragraphs.

paragraphs.html 
<p>HTML is the foundation of web development.</p>

<p>It helps structure content on webpages.</p>

Browsers automatically add spacing before and after paragraphs.

Line Breaks

The <br> tag inserts a line break.

line-break.html 
<p>
Hello<br>
Welcome to HTML
</p>

The <br> tag does not require a closing tag.

Horizontal Rules

The <hr> tag creates a horizontal line used to separate content sections.

horizontal-rule.html 
<h2>Chapter 1</h2>

<hr>

<h2>Chapter 2</h2>

Bold and Important Text

HTML provides multiple ways to emphasise text.

Tag Purpose
<b> Bold text without semantic importance
<strong> Important text with semantic meaning
bold-text.html 
<p>
<strong>Warning:</strong> Save your work regularly.
</p>

Italic and Emphasised Text

Tag Purpose
<i> Italic text without emphasis
<em> Text with emphasis
italic.html 
<p>
<em>Important:</em> Complete the assignment today.
</p>

Small Text

The <small> tag displays smaller-sized text.

small.html 
<p>
Copyright <small>2026</small>
</p>

Subscript and Superscript

These tags are commonly used in mathematics and chemistry.

Tag Example Usage
<sub> H₂O
<sup> x²
subsup.html 
<p>H<sub>2</sub>O</p>

<p>x<sup>2</sup></p>

Preformatted Text

The <pre> tag preserves spaces and line breaks exactly as written.

preformatted.html 
<pre>
Line 1
    Line 2
        Line 3
</pre>

Code Text

The <code> tag is used for displaying programming code.

code-tag.html 
<p>
Use the <code>print()</code> function in Python.
</p>

Quotations

HTML provides tags for quotations and cited text.

Tag Purpose
<blockquote> Long quotation
<q> Short inline quotation
quote.html 
<q>Knowledge is power.</q>

HTML Entities

Some characters are reserved in HTML and must be written using entities.

Character Entity
< &lt;
> &gt;
& &amp;

Typography Best Practices

  • Use headings in proper order
  • Avoid skipping heading levels unnecessarily
  • Keep paragraphs short and readable
  • Use semantic tags like <strong> and <em>
  • Do not overuse bold or italic text

Useful Typography Resources

🎯 Exercise 3.1

Create a webpage containing all heading levels from <h1> to <h6>.

🎯 Exercise 3.2

Create a webpage with:

  • Three paragraphs
  • Bold and italic text
  • A horizontal rule
  • One quotation
🎯 Exercise 3.3

Create a mini article page using:

  • Headings
  • Paragraphs
  • Line breaks
  • Subscript or superscript text
Lecture 04 · Foundations

Links & Navigation

Requires: Lecture 03

Introduction to Links

Links are one of the most important features of the web.

They allow users to move between webpages, websites, sections, documents, and resources.

HTML uses the <a> tag, also called the anchor tag, to create hyperlinks.

The Anchor Tag

The basic syntax of a hyperlink is:

basic-link.html 
<a href="https://example.com">Visit Website</a>

The href attribute specifies the destination URL.

Types of Links

Type Description
External Link Opens another website
Internal Link Opens another page within the same website
Anchor Link Jumps to a section on the same page
Email Link Opens the user's email application
Telephone Link Starts a phone call on supported devices

External Links

External links connect users to other websites.

external-link.html 
<a href="https://www.google.com">
  Visit Google
</a>

Opening Links in a New Tab

The target="_blank" attribute opens the link in a new browser tab.

new-tab.html 
<a href="https://example.com"
   target="_blank"
   rel="noopener">

   Open New Tab

</a>

Why Use rel="noopener"?

The rel="noopener" attribute improves security when opening new tabs.

It prevents the new webpage from accessing the original page through JavaScript.

Internal Links

Internal links connect pages inside the same website.

Example folder structure:

project-structure.txt 
project/
│
├── index.html
├── about.html
└── contact.html

Example internal link:

internal-link.html 
<a href="/about">
  About Us
</a>

Anchor Links

Anchor links jump to specific sections on the same webpage.

anchor-link.html 
<a href="#section">Jump to Section</a>

<h2 id="section">Section</h2>

The id attribute identifies the target element.

Email Links

The mailto: protocol opens the user's default email application.

email-link.html 
<a href="mailto:[email protected]">
  Send Email
</a>

Telephone Links

The tel: protocol is mainly used on mobile devices for phone calls.

telephone-link.html 
<a href="tel:+1234567890">
  Call Now
</a>

Download Links

The download attribute allows users to download files instead of opening them.

download-link.html 
<a href="notes.pdf" download>
  Download Notes
</a>

Images as Links

An image can also be wrapped inside an anchor tag.

image-link.html 
<a href="https://example.com">
  <img src="logo.png" alt="Logo">
</a>

Navigation Menus

Navigation menus help users move through a website.

HTML commonly uses the <nav> element for navigation sections.

navigation.html 
<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

Relative vs Absolute URLs

Type Example
Relative URL about.html
Absolute URL https://example.com/about.html

Link States

Links can have different visual states:

  • Unvisited
  • Visited
  • Hovered
  • Active

These states are usually styled using CSS.

Accessibility Tips for Links

  • Use descriptive link text
  • Avoid generic text like "Click Here"
  • Make links easy to identify visually
  • Use meaningful navigation labels

Bad vs Good Link Text

bad-link.html 
<a href="course.html">Click Here</a>
good-link.html 
<a href="course.html">
  View HTML Course
</a>

Useful Resources

Common Beginner Mistakes

  • Forgetting the href attribute
  • Using broken file paths
  • Opening every link in a new tab unnecessarily
  • Using unclear link text
  • Forgetting to close the anchor tag
🎯 Exercise 4.1

Create a webpage containing:

  • One external link
  • One internal link
  • One email link
🎯 Exercise 4.2

Create a navigation menu with links for:

  • Home
  • About
  • Services
  • Contact
🎯 Exercise 4.3

Create a long webpage with multiple sections and use anchor links to jump between them.

Lecture 05 · Foundations

Images & Media

Requires: Lecture 04

Introduction to Media in HTML

Websites become more engaging when they include images, audio, videos, and other media elements.

HTML provides built-in tags for displaying media content directly inside webpages.

In this lecture, you will learn how to:

  • Add images to webpages
  • Display captions
  • Embed audio and video
  • Use responsive media
  • Improve accessibility with media elements

Adding Images

The <img> tag is used to display images in HTML.

Unlike many HTML elements, the image tag does not have a closing tag.

images.html 
<!-- Basic image -->
<img src="photo.jpg" alt="Description">

<!-- With dimensions -->
<img src="photo.jpg" alt="Description" 
     width="600" height="400">

<!-- Figure with caption -->
<figure>
  <img src="chart.png" alt="Chart">
  <figcaption>Figure 1: Sales</figcaption>
</figure>

Important Image Attributes

Attribute Purpose
src Specifies the image file path
alt Alternative text for accessibility
width Sets image width
height Sets image height

The Importance of Alt Text

The alt attribute is extremely important for accessibility and SEO.

Screen readers use alt text to describe images to visually impaired users.

If an image fails to load, the alt text is displayed instead.

alt-text.html 
<img src="cat.jpg"
     alt="A white cat sitting on a chair">

Image File Formats

Format Best Used For
JPG / JPEG Photographs and realistic images
PNG Transparent backgrounds and graphics
SVG Icons and vector graphics
GIF Simple animations
WebP Modern compressed web images

Image Paths

Images can be loaded using relative or absolute paths.

paths.html 
<!-- Relative path -->
<img src="images/photo.jpg" alt="Photo">

<!-- Absolute URL -->
<img src="https://example.com/photo.jpg"
     alt="Online Photo">

Figure and Figcaption

The <figure> element groups media content together.

The <figcaption> tag provides a caption for the content.

figure.html 
<figure>

  <img src="nature.jpg" alt="Nature">

  <figcaption>
    Beautiful mountain landscape
  </figcaption>

</figure>

Responsive Images

Responsive images automatically adjust to different screen sizes.

responsive-image.html 
<img src="photo.jpg"
     alt="Responsive image"
     style="max-width:100%; height:auto;">

This technique prevents images from overflowing on smaller screens.

Adding Audio

The <audio> tag embeds sound files into webpages.

audio.html 
<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  Your browser does not support audio.
</audio>

Audio Attributes

Attribute Purpose
controls Displays play/pause buttons
autoplay Automatically starts audio
loop Repeats the audio continuously
muted Starts audio muted

Adding Video

The <video> tag is used for embedding videos.

video.html 
<video width="640"
       height="360"
       controls>

  <source src="movie.mp4"
          type="video/mp4">

  Your browser does not support video.

</video>

Embedding YouTube Videos

YouTube videos are commonly embedded using an iframe.

youtube.html 
<iframe width="560"
        height="315"
        src="https://www.youtube.com/embed/VIDEO_ID"
        title="YouTube video"
        allowfullscreen>

</iframe>

Poster Images for Videos

The poster attribute displays an image before the video starts.

poster.html 
<video controls
       poster="thumbnail.jpg">

  <source src="movie.mp4"
          type="video/mp4">

</video>

Accessibility Tips for Media

  • Always include descriptive alt text for images
  • Add captions or transcripts for videos
  • Avoid autoplay audio when possible
  • Use accessible file names
  • Ensure media works on mobile devices

Performance Best Practices

  • Compress large images before uploading
  • Use modern formats like WebP
  • Avoid extremely large image dimensions
  • Optimise videos for faster loading
  • Use lazy loading for better performance

Lazy Loading Images

Lazy loading delays image loading until the image becomes visible on screen.

lazy-loading.html 
<img src="photo.jpg"
     alt="Photo"
     loading="lazy">

Useful Resources

Common Beginner Mistakes

  • Forgetting the alt attribute
  • Using huge image sizes
  • Incorrect file paths
  • Stretching images unnaturally
  • Using autoplay audio excessively
🎯 Exercise 5.1

Create a webpage containing:

  • One image
  • An image caption
  • Proper alt text
🎯 Exercise 5.2

Create a webpage with:

  • An embedded audio file
  • A video player
  • A YouTube iframe embed
🎯 Exercise 5.3

Create a small gallery page using multiple responsive images.

Lecture 06 · Core Concepts

Lists & Tables

Requires: Lecture 05

Introduction to Lists & Tables

Lists and tables are essential HTML elements used to organize and display information clearly. Lists help group related items together, while tables are used to display structured data in rows and columns.

Websites use lists for menus, navigation bars, feature sections, tutorials, and instructions. Tables are commonly used for schedules, pricing charts, marksheets, reports, and data presentation.

💡 Key Concept
Use lists for grouping related content and tables for displaying structured data in rows and columns.

Three Types of Lists

HTML provides three main types of lists:

  • Unordered Lists → Displays bullet points
  • Ordered Lists → Displays numbered items
  • Description Lists → Displays terms and definitions
<!-- Unordered -->
<ul>
  <li>Apples</li>
  <li>Bananas</li>
</ul>

<!-- Ordered -->
<ol>
  <li>Step 1</li>
  <li>Step 2</li>
</ol>

<!-- Description -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup</dd>
</dl>

Unordered Lists

Unordered lists use bullet points to display items where sequence or order does not matter.

<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Eggs</li>
</ul>
Output
• Milk
• Bread
• Eggs

The <ul> tag creates the unordered list, while each item is added using the <li> tag.

Ordered Lists

Ordered lists are used when the order of items is important, such as instructions or rankings.

<ol>
  <li>Open VS Code</li>
  <li>Create a file</li>
  <li>Save the document</li>
</ol>
Output
1. Open VS Code
2. Create a file
3. Save the document

Browsers automatically number items inside an ordered list.

Changing Ordered List Types

You can change the numbering style of ordered lists using the type attribute.

<ol type="A">
  <li>HTML</li>
  <li>CSS</li>
</ol>

Possible values for the type attribute include:

  • 1 → Numbers (default)
  • A → Uppercase letters
  • a → Lowercase letters
  • I → Roman numerals
  • i → Lowercase Roman numerals

Description Lists

Description lists are used for terms and definitions, similar to a glossary or dictionary.

<dl>
  <dt>CPU</dt>
  <dd>Central Processing Unit</dd>

  <dt>RAM</dt>
  <dd>Random Access Memory</dd>
</dl>

The <dt> tag represents the term, while <dd> provides its description.

Nested Lists

Lists can also contain other lists inside them. This is called nesting.

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
</ul>

Nested lists are commonly used in navigation menus and category structures.

Introduction to Tables

HTML tables are used to organize data into rows and columns. Tables are useful for displaying schedules, reports, marksheets, pricing tables, and structured datasets.

⚠️ Important
Tables should be used for tabular data only — not for webpage layouts.

Basic Table Structure

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>

  <tr>
    <td>Alice</td>
    <td>21</td>
  </tr>
</table>
Output
Name | Age
Alice | 21

Understanding Table Tags

  • <table> → Creates the table
  • <tr> → Creates a table row
  • <th> → Creates a table heading cell
  • <td> → Creates a table data cell

Table Borders

The border attribute adds borders around table cells.

<table border="2">
  <tr>
    <th>Course</th>
    <th>Duration</th>
  </tr>

  <tr>
    <td>HTML</td>
    <td>4 Weeks</td>
  </tr>
</table>

Modern websites usually style tables using CSS instead of the HTML border attribute.

Merging Table Cells

You can merge cells horizontally using colspan and vertically using rowspan.

<table border="1">
  <tr>
    <th colspan="2">Student Info</th>
  </tr>

  <tr>
    <td>John</td>
    <td>20</td>
  </tr>
</table>

The colspan="2" attribute merges two columns into one.

Accessibility Tips

  • Use <th> for headings instead of normal cells
  • Keep tables simple and readable
  • Use lists for navigation menus whenever possible
  • Avoid deeply nested tables

Common Beginner Mistakes

  • Forgetting to close <li> tags
  • Using tables for page layouts
  • Mixing up <th> and <td>
  • Creating invalid nested lists
  • Forgetting that every table row uses <tr>
🎯 Exercise 6.1

Create an unordered list containing five of your favorite foods.

🎯 Exercise 6.2

Create an ordered list showing the steps to create an HTML file and open it in a browser.

🎯 Exercise 6.3

Create a table with three columns: Name, Subject, and Marks. Add at least three student records.

Lecture 07 · Core Concepts

Forms & Inputs

Requires: Lecture 06

Introduction to HTML Forms

HTML forms allow users to send data to a website. Forms are used everywhere on the web — login pages, registration systems, search bars, contact forms, payment systems, and surveys all depend on forms.

Forms collect user input using different input elements such as text fields, buttons, checkboxes, radio buttons, dropdowns, and text areas.

💡 Key Concept
Forms are the bridge between users and web applications. They allow websites to receive and process data.

Basic Form

The <form> tag acts as a container for all form elements.

<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">Submit</button>
</form>

Understanding Form Attributes

  • action → specifies where form data is sent
  • method → defines how data is transmitted
  • POST → sends data securely in the request body
  • GET → sends data through the URL
✅ Best Practice
Use POST for sensitive data like passwords and user information. Use GET for searches and filters.

The <label> Element

The <label> tag improves accessibility and usability. Clicking the label automatically focuses the related input field.

<label for="username">Username:</label>
<input type="text" id="username">

The value of the for attribute must match the input's id.

Text Inputs

Text fields allow users to enter single-line text.

<input type="text" placeholder="Enter your name">

The placeholder attribute displays temporary helper text inside the field.

Email Inputs

The email input type validates email addresses automatically.

<input type="email" required>

If the entered value is not a valid email format, the browser will display a validation error.

Password Inputs

Password fields hide typed characters for security.

<input type="password">
Result
Password characters appear hidden as dots or asterisks.

Number Inputs

Number fields only accept numeric values.

<input type="number" min="1" max="100">

The min and max attributes define the allowed range.

Checkboxes

Checkboxes allow users to select multiple options.

<input type="checkbox" id="html">
<label for="html">HTML</label>

<input type="checkbox" id="css">
<label for="css">CSS</label>

Users can check more than one checkbox at the same time.

Radio Buttons

Radio buttons allow users to select only one option from a group.

<input type="radio" name="gender" id="male">
<label for="male">Male</label>

<input type="radio" name="gender" id="female">
<label for="female">Female</label>

Radio buttons must share the same name value to behave as a group.

Textarea

The <textarea> element allows multi-line text input.

<textarea rows="5" cols="30"></textarea>

This is commonly used for comments, messages, and descriptions.

Select Dropdown Menus

Dropdown menus provide a list of selectable options.

<select>
  <option>HTML</option>
  <option>CSS</option>
  <option>JavaScript</option>
</select>

Submit Buttons

Buttons are used to submit form data.

<button type="submit">Send</button>

When clicked, the browser sends all form data to the location defined in the action attribute.

Reset Buttons

Reset buttons restore all form fields to their default values.

<button type="reset">Reset</button>
⚠️ UX Warning
Reset buttons can frustrate users if clicked accidentally. Many modern websites avoid using them.

Required Fields

The required attribute prevents users from submitting empty fields.

<input type="text" required>

Browser validation happens automatically before submission.

Placeholder Attribute

Placeholders provide temporary hints inside input fields.

<input type="text" placeholder="Enter username">

Placeholders disappear when the user starts typing.

File Upload Inputs

File inputs allow users to upload files from their computer.

<input type="file">

This is commonly used for profile pictures, assignments, and document uploads.

Date Inputs

HTML5 introduced specialized date and time input fields.

<input type="date">
<input type="time">

Modern browsers automatically display date and time pickers.

Semantic Form Structure

Organizing forms properly improves readability and accessibility.

<fieldset>
  <legend>Personal Information</legend>

  <label>Name:</label>
  <input type="text">
</fieldset>
  • <fieldset> groups related fields together
  • <legend> provides a title for the group

GET vs POST Methods

GET POST
Data appears in URL Data sent in request body
Less secure More secure
Used for searches Used for login/signup forms

Accessibility Best Practices

  • Always use labels for form fields
  • Use meaningful placeholder text
  • Group related fields with fieldsets
  • Ensure forms can be navigated using the keyboard
  • Provide validation messages clearly

Common Beginner Mistakes

  • Forgetting the name attribute
  • Using labels incorrectly
  • Using GET for passwords
  • Not validating required fields
  • Forgetting to close form tags properly
🎯 Exercise 7.1

Create a registration form containing name, email, password, and submit button fields.

🎯 Exercise 7.2

Create a feedback form using a textarea, radio buttons, and checkboxes.

🎯 Exercise 7.3

Create a student admission form with dropdown menus, date input, and file upload support.

Lecture 08 · Core Concepts

Semantic HTML

Requires: Lecture 07

Introduction to Semantic HTML

Semantic HTML means using HTML elements according to their meaning and purpose instead of only for visual structure. Semantic elements clearly describe what their content represents to browsers, developers, search engines, and assistive technologies.

Before HTML5, developers heavily relied on generic containers like <div> and <span>. Semantic HTML introduced meaningful tags that make webpages more organized, accessible, and easier to maintain.

💡 Key Concept
Semantic elements describe the role and meaning of content, not just its appearance.

Why Semantic HTML Matters

  • Improves accessibility for screen readers and assistive technologies
  • Helps SEO by giving search engines meaningful structure
  • Makes code easier to read and maintain
  • Creates cleaner webpage architecture
  • Improves collaboration between developers

Semantic Elements

HTML5 introduced several semantic layout elements used in modern webpage structure.

<header>   <!-- Site header -->
<nav>      <!-- Navigation -->
<main>     <!-- Primary content -->
<article>  <!-- Self-contained -->
<section>  <!-- Thematic group -->
<aside>    <!-- Sidebar -->
<footer>   <!-- Footer -->

The <header> Element

The <header> element represents introductory content or a top section of a webpage or article.

<header>
  <h1>My Blog</h1>
  <p>Learn web development</p>
</header>

Headers commonly contain logos, navigation menus, titles, or introductory text.

The <nav> Element

The <nav> element contains navigation links.

<nav>
  <a href="#">Home</a>
  <a href="#">Courses</a>
  <a href="#">Contact</a>
</nav>

Screen readers use the navigation element to help users quickly move through site menus.

The <main> Element

The <main> element represents the primary content of the webpage.

<main>
  <h2>Welcome to our website</h2>
  <p>This is the main content area.</p>
</main>
✅ Best Practice
A webpage should normally contain only one <main> element because it represents the core content of the page.

The <section> Element

The <section> tag groups related content together.

<section>
  <h2>About Us</h2>
  <p>We teach coding online.</p>
</section>

Sections are thematic groups of content and usually contain headings.

The <article> Element

The <article> element represents self-contained content that can stand on its own.

<article>
  <h2>How to Learn HTML</h2>
  <p>Start with basic tags and structure.</p>
</article>

Articles are commonly used for blog posts, news stories, tutorials, or forum posts.

The <aside> Element

The <aside> tag contains related but secondary content.

<aside>
  <h3>Related Courses</h3>
  <p>Learn CSS and JavaScript next.</p>
</aside>

Asides are often used for sidebars, advertisements, tips, or related links.

The <footer> Element

The <footer> element represents the bottom section of a webpage or article.

<footer>
  <p>© 2026 Code Tutorium</p>
</footer>

Footers usually contain copyright information, contact details, or social media links.

Semantic vs Non-Semantic Elements

Semantic Non-Semantic
<header> <div>
<article> <span>
<footer> <div>

Non-semantic elements do not describe their meaning, while semantic elements provide context and structure.

Complete Semantic Layout Example

<body>

  <header>
    <h1>My Website</h1>
  </header>

  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
  </nav>

  <main>

    <section>
      <h2>Latest Tutorials</h2>

      <article>
        <h3>Learn HTML</h3>
        <p>HTML is the foundation of web development.</p>
      </article>

    </section>

    <aside>
      Related resources here
    </aside>

  </main>

  <footer>
    <p>Copyright 2026</p>
  </footer>

</body>

Accessibility Benefits

Semantic HTML greatly improves accessibility for users with disabilities.

  • Screen readers can understand page structure better
  • Navigation becomes easier for keyboard users
  • Assistive technologies can identify important sections
  • Improves user experience for visually impaired users
♿ Accessibility Insight
Semantic HTML is one of the easiest and most effective ways to make websites accessible to everyone.

SEO Advantages

Search engines use semantic structure to better understand webpage content.

  • Improves content indexing
  • Helps search engines identify important sections
  • Can improve search rankings
  • Makes webpage content more meaningful

When to Use <div>

Even though semantic elements are preferred, <div> is still useful when no semantic element fits the situation.

<div class="card">
  Custom content here
</div>

Use semantic elements whenever possible, and use <div> as a generic container only when necessary.

Common Beginner Mistakes

  • Using too many unnecessary <div> elements
  • Using <section> without headings
  • Placing multiple <main> elements on one page
  • Using semantic tags only for styling purposes
  • Confusing <article> and <section>
🎯 Exercise 8.1

Create a webpage using <header>, <nav>, <main>, and <footer> elements.

🎯 Exercise 8.2

Create a blog layout using <article> and <section> elements.

🎯 Exercise 8.3

Convert a webpage made entirely with <div> tags into a semantic HTML layout.

🌐 Web Development Path

HTML is the foundation of web development. Continue your journey with:

🎨
CSS Styling & visual design
→
 ✨
JavaScript Interactivity & dynamic behavior
→
 🔷
TypeScript Type-safe JavaScript
⭐
Lecture 09 · Advanced

HTML5 APIs

Requires: Lecture 08

Details & Summary

<details>
  <summary>What is HTML?</summary>
  <p>HTML is a markup language.</p>
</details>
Lecture 10 · Advanced

Accessibility

Requires: Lecture 09

ARIA Labels

<button aria-label="Close menu">X</button>
<nav aria-label="Main navigation">...</nav>
Lecture 11 · Advanced

SEO & Meta Tags

Requires: Lecture 10

Essential Meta Tags

<meta name="description" content="Page description">
<meta name="keywords" content="html, css, javascript">
<meta name="author" content="Your Name">
<meta property="og:title" content="Page Title">
Lecture 12 · Advanced

Capstone Project

Requires: All Lectures

Build a Portfolio

Create a complete personal portfolio website using everything learned:

  • Semantic HTML structure
  • Navigation with links
  • Image gallery
  • Contact form
  • Proper meta tags
Lecture 13 · Advanced

Web Components

Requires: Lecture 12

Content coming soon...

Lecture 14 · Advanced

SVG & Canvas Basics

Requires: Lecture 13

Content coming soon...

Lecture 15 · Advanced

Performance & Best Practices

Requires: Lecture 14

Content coming soon...

Lecture 16 · Professional
Topic 17 - Real-World Practical Projects

Project 1: Semantic Accessible Developer Portfolio Page

Hands-on Project Semantic HTML5
🎯 Project Goal

Build a modern, fully accessible HTML5 single-page developer portfolio using semantic elements like

,

Project Overview

Master clean HTML structure, accessible ARIA attributes, semantic headings hierarchy (H1-H3), and embedded media elements.

Full Code Implementation

index.html



    
    
    Jane Doe — Senior Full Stack Developer


    

        
    


    

        

            
Hi, I'm Jane Doe

            
Full-Stack Web Developer specializing in React, Node.js, and Cloud Solutions.

        


        

            
Featured Projects

            

                
E-Commerce Web Application

                
Built with React, Node.js, and PostgreSQL.

                View Source Code
            

        


        

            
Get In Touch

            

                
                

                
                

                
                

                
            

        

    


    

        
© 2026 Jane Doe. All rights reserved.
Practice Challenge

Add an embedded

/ accordion element for FAQ items!