HTML Fundamentals

Build rock-solid understanding of HTML5 concepts

Course Index

1Introduction 2HTML Tags & Elements 3HTML Attributes 4HTML Lists 5HTML Tables 6HTML Forms 7Image Tag 8Video Tag 9Accessibility 10Canvas Element

Introduction to HTML

HTML (HyperText Markup Language) is the backbone of all web pages. Think of it as the skeleton that gives structure to websites. It uses simple tags to define elements like headings, paragraphs, images, and links.

What is HTML?

HTML is a markup language that tells the browser how to display text, images, links, forms, and other content. It uses elements and tags to structure a web page.

Why Learn HTML?

Forms the structure of all websites
Works with CSS & JavaScript to build interactive apps
Essential for web accessibility and SEO

HTML Tags & Elements

An HTML tag is a keyword wrapped in angle brackets. Tags are used to tell the browser what kind of content you're creating.

Opening tag: Tells the browser to start something.
Closing tag: Tells the browser to end something.
Content: The actual text, image, or other elements between the tags.

<header>

Defines introductory content or navigation links. e.g. site logo, main menu

<main>

Main content unique to the document.

<footer>

Contains metadata or links at the page bottom.

<nav>

Section for navigation links.

<article>

Self-contained content, like a blog post.

<section>

Thematic grouping of content.

HTML Attributes

Attributes provide additional information about HTML elements. They are always specified in the opening tag and usually come in name/value pairs like: name="value".

Common HTML Attributes

id

Specifies a unique id for an element. Must be unique in the document.

class

Specifies one or more class names for an element. Used by CSS and JavaScript.

src

Specifies the source URL for external resources like images, scripts, and iframes.

href

Specifies the URL of the linked resource for anchor tags.

<a href="https://example.com">Visit Example</a>

alt

Provides alternative text for images when they cannot be displayed.

style

Applies inline CSS styles to an element.

title

Provides additional information about an element (shown as tooltip).

data-*

Custom attributes used to store extra information for JavaScript.

disabled

Disables an input element. Cannot be interacted with.

required

Specifies that an input field must be filled out before submitting.

placeholder

Shows hint text in an input field before user enters value.

target

Specifies where to open the linked document (e.g., _blank for new tab).

Attribute Best Practices

✓Always use quotes around attribute values (double or single quotes)
✓Use semantic attributes where possible (like required instead of custom validation)
✓Keep attribute names lowercase
✓Use data-* attributes for custom data instead of inventing new attributes
✓Always include alt attributes for accessibility
✓Use classes for styling instead of inline styles when possible

HTML Lists

An HTML list is a way to show a group of items on a web page using HTML code. Just like you make a list on paper (like a shopping list or a to-do list), you can make a list in HTML to organize things neatly.

Unordered List

An unordered list in HTML is used when the order of items does not matter. Each item is written inside a list tag and is automatically styled with dots or custom icons using CSS.

Apple
Banana
Cherry

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

Ordered List

An ordered list is used when the sequence of items is important. It displays items with numbers or letters, such as 1, 2, 3 or A, B, C.

HTML
CSS
JavaScript

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

Description List

A description list is used to define terms and provide explanations for each. It consists of a term followed by a description.

HTML: A markup language for web pages.
CSS: Used to style HTML content.

<dl>
  <dt>HTML</dt>
  <dd>A markup language</dd>
  <dt>CSS</dt>
  <dd>Styles HTML</dd>
</dl>

HTML Tables

Tag	Description
<table>	Wraps tabular data
<tr>	Defines a row
<td>	Table cell
<th>	A table header cell, usually bold and centered.
<thead>	Groups the header rows of a table.
<tbody>	Wraps the main content rows of the table.
colspan	Expands a cell across multiple columns.
rowspan	Expands a cell across multiple rows.

Table Best Practices

HTML tables are used to display data in a structured format using rows and columns. A table is defined with the <table> tag, and inside it, rows are added using <tr>, while each cell in the row uses <td> for data or <th> for headers.

Responsive design is important so tables look good on mobile devices.
You can merge cells using "rowspan" or "colspan" for complex layouts.
Avoid using tables for layout design — use CSS for that.

HTML Forms

Form Elements

HTML forms are used to collect user input on a webpage. Forms can include text fields, radio buttons, checkboxes, dropdowns, and buttons. Every form element should have a proper label for accessibility.

The form element wraps all form controls and handles form submission.
The action attribute defines where to send the form data.
The method attribute (like GET or POST) defines how data is sent.
JavaScript can be used to validate form inputs before submitting.

Image Tag

The <img> tag is used to embed images in HTML. It's an empty tag (no closing tag) that requires at least two attributes:

src - Specifies the path to the image file
alt - Provides alternative text for accessibility
width and height (optional) - Set the image dimensions

Basic Example:

<img 
  src="/images/htmlimage.jpeg" 
  alt="Beautiful sunset over mountains" 
  width="800"
  height="600"
/>

Best Practices

Always include meaningful alt text for screen readers and SEO
Optimize images for web (use JPG for photos, PNG for graphics)
Use responsive images with srcset attribute for different screen sizes
Specify width and height to prevent layout shifts
Use descriptive filenames (e.g., "red-apple.jpg" instead of "img123.jpg")

Image of HTML code example

This is an example of an image embedded using HTML. Notice how it displays directly in the browser when the page loads.

<img src="..." alt="..." />

Video Tag

The Video tag in HTML allows you to embed a video directly on your webpage, and it's a simple way to show video content without needing to rely on external players.

Basic Example:

<video width="640" height="360" controls loop>
  <source src="movie.mp4" type="video/mp4">
</video>

Supports multiple formats with <source> elements
Fallback content for unsupported browsers
Fully customizable with JavaScript and CSS

HTML Accessibility & SEO

Accessibility Best Practices

Use semantic HTML tags to improve screen reader navigation.
Provide descriptive alt text for all images.
Follow proper heading order (h1 → h2 → h3) for content hierarchy.
Always associate <label> elements with form inputs.
Ensure sufficient color contrast for text and interactive elements.
Make all interactive components accessible via keyboard.
Use ARIA attributes only when necessary and correctly.
Avoid flashing or blinking content that could trigger seizures.

SEO & Metadata

<title> and <meta name="description"> tags
Use alt text for images
Open Graph tags like og:title and og:image
Proper heading structure (h1, h2, h3...)
meta viewport for mobile devices
Use canonical links to avoid duplicates
Structured data using JSON-LD for rich snippets
Mobile-friendly responsive design

Canvas Element

The HTML <canvas> element provides a drawing surface for creating graphics, animations, and visualizations using JavaScript.

Used for rendering 2D shapes, text, and images
Supports animations through JavaScript
Can create games, data visualizations, and image processing
Requires JavaScript to draw content
Provides both 2D and WebGL (3D) contexts

Basic Setup:

<canvas id="myCanvas" width="600" height="400"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  // Draw a red rectangle
  ctx.fillStyle = 'red';
  ctx.fillRect(10, 10, 150, 100);
</script>

Canvas Capabilities

Path drawing (lines, curves, shapes)
Text rendering with custom fonts
Image manipulation and compositing
Pixel-level operations
Transformations (translate, rotate, scale)
Shadows and gradients

Live Canvas Demo

This canvas demonstrates shapes, text, gradients, and animation. The red ball is bouncing using JavaScript animation frames.