HTML Course
Learn the structure of web pages.
Learn HTML
HTML is the standard markup language for Web pages. With HTML you can create your own Website. HTML is easy to learn — you will enjoy it!
Learning by Examples
With our "Try it Yourself" editor, you can edit the HTML code and view the result in the browser:
Example
Live Preview
Click the "Try it Yourself" button to see how it works — the result appears right next to the code.
EXERCISE
What is a correct syntax for an HTML hyperlink?
Track your progress: every lesson below has a "Mark lesson complete" checkbox. Tick it as you finish each step — your score is remembered in this browser, and the sidebar shows live ticks and a percentage.
What is HTML?
HTML (HyperText Markup Language) is the standard markup language for Web pages. It defines the meaning and structure of web content — with HTML you can create your own website. CSS is normally used for presentation, while JavaScript is used for behavior.
Goal: understand that HTML is the structure/meaning layer of a web page — and that it is easy to learn.
Click Run to execute the lesson demonstration.
Create Your First HTML Page
Start with a standards-mode document, language declaration, metadata, title, and body.
Code
Live Preview
Click Run to execute the lesson demonstration.
Elements and Tags
Elements are written using tags. Learn opening/closing tags, nesting, and elements that don't use a closing tag.
<p>This is a paragraph.</p>
<strong>Important text</strong>
<br>
<img src="photo.jpg" alt="Example photo">Use lowercase tag names as the normal authoring convention. Nest elements correctly.
Click Run to execute the code example.
HTML Attributes
Attributes provide additional information about HTML elements. They are written inside the start tag and usually come as name="value" pairs.
Four quick rules:
- Every HTML element can have attributes.
- Attributes give extra information about an element.
- Attributes are always placed in the start tag.
- Attributes usually come in name/value pairs such as
name="value".
The href Attribute
<a href="https://www.APEXITI.IN.com">
Visit APEXITI.IN
</a>The <a> tag defines a hyperlink; the href attribute specifies the URL the link goes to. Links get their own lesson later.
The src Attribute
<img src="img_girl.jpg">
The <img> tag embeds an image; the src attribute specifies the path to that image.
There are two ways to write the URL in
1. Absolute URL — links to an external image hosted elsewhere:
2. Relative URL — links to an image on your own site:
src:1. Absolute URL — links to an external image hosted elsewhere:
src="https://www.APEXITI.IN.com/images/img_girl.jpg". External images may be copyrighted, and they can be removed or changed at any time.2. Relative URL — links to an image on your own site:
src="img_girl.jpg" (relative to the current page) or src="/images/img_girl.jpg" (relative to the domain).
Tip: prefer relative URLs — they keep working if you change your domain.
The width and height Attributes
<img src="img_girl.jpg"
width="500" height="600">The width and height attributes specify the size of the image in pixels. Setting them reserves page space while the image loads.
The alt Attribute
<img src="img_typo.jpg"
alt="Girl with a jacket">
The alt attribute is required on <img>. It provides alternate text when the image cannot be shown — a slow connection, an error in src, or a user on a screen reader. (The demo above uses a broken file name on purpose, so you can see the alt text appear.)
The style Attribute
<p style="color:red;">
This is a red paragraph.
</p>This is a red paragraph.
The style attribute adds styles to an element — color, font, size, and more. Full styling is covered in the CSS lessons.
The lang Attribute
<html lang="en">
<body>...</body>
</html>
<html lang="en-US"> ... </html>Always include lang inside the <html> tag to declare the page language — it assists search engines and browsers. The first two letters define the language and the last two the country.
The title Attribute
<p title="I'm a tooltip">
This is a paragraph.
</p>Hover over me to see the tooltip.
The title attribute defines extra information shown as a tooltip when the mouse hovers over the element.
Best Practices
Use lowercase attribute names. The HTML standard allows
Always quote attribute values.
Good:
Bad:
Quotes become mandatory when a value contains a space —
Single or double quotes? Both work. Use single quotes when the value itself contains double quotes:
title or TITLE, but W3C recommends (and XHTML demands) lowercase — write title.Always quote attribute values.
Good:
<a href="https://www.APEXITI.IN.com/html/">Visit our HTML tutorial</a>Bad:
<a href=https://www.APEXITI.IN.com/html/>Visit our HTML tutorial</a>Quotes become mandatory when a value contains a space —
<p title="Description of APEXITI.IN"> breaks without them.Single or double quotes? Both work. Use single quotes when the value itself contains double quotes:
<p title='John "ShotGun" Nelson'> — or the other way around.
| Attribute | Applies to | What it does |
|---|---|---|
href | <a> | URL of the page the link goes to |
src | <img> | Path to the image to display |
width / height | <img> | Image size in pixels |
alt | <img> | Alternate text when the image cannot be shown |
style | any element | Inline CSS — color, font, size, and more |
lang | <html> | Language of the page |
title | any element | Extra information shown as a tooltip |
class | any element | Reusable styling/selection hook |
id | any element | Unique identifier within the document |
Chapter summary: href → link URL • src → image path • width/height → image size • alt → alternate text • style → inline styles • lang → page language • title → tooltip. A complete attribute list for every element is available in an HTML Attribute Reference.
Click Run to execute the code example.
Headings and Paragraphs
Use headings to structure sections and paragraphs for blocks of ordinary text.
<h1>Main Page Title</h1>
<h2>Section Title</h2>
<h3>Subsection</h3>
<p>This is a paragraph of content.</p>
<hr>
<p>A second paragraph after a thematic break.</p>Practice: create a course page with one
<h1>, several <h2> headings, and paragraphs under each.Click Run to execute the code example.
Text Semantics
Use elements that communicate meaning, not only visual appearance.
<strong>Important</strong>
<em>Emphasized</em>
<mark>Highlighted</mark>
<code>console.log("Hello")</code>
<kbd>Ctrl</kbd> + <kbd>S</kbd>
<small>Fine print</small>Click Run to execute the code example.
Links
Links connect documents and are one of the fundamental features of the Web.
<a href="https://developer.mozilla.org/">MDN Web Docs</a>
<a href="about.html">About us</a>
<a href="#contact">Jump to Contact</a>Good link text should communicate the destination or action instead of using vague text such as "click here".
Click Run to execute the code example.
Images and Alternative Text
Use <img> for images and provide meaningful alt text when the image conveys information.
<img
src="IMG/LOGO-1.PNG"
alt="Simple placeholder demonstration image"
width="500">
For a purely decorative image, do not write unnecessary descriptions for decorative content.
Click Run to execute the code example.
Lists
Use unordered, ordered, and description lists according to the meaning of the content.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol>
<li>Open editor</li>
<li>Write code</li>
<li>Run page</li>
</ol>
<dl>
<dt>HTML</dt>
<dd>Markup language for web content.</dd>
</dl>Click Run to execute the code example.
Tables
Use tables for tabular data, not for general page layout.
<table>
<caption>Course Fees</caption>
<thead>
<tr>
<th scope="col">Course</th>
<th scope="col">Fee</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML</td>
<td>2800</td>
</tr>
</tbody>
</table>Meaningful table headings and scope information improve accessibility for data tables.
Click Run to execute the code example.
Semantic Page Layout
Use meaningful structural elements when they match the content: header, nav, main, section, article, aside, and footer.
<header>Site header</header>
<nav>Main navigation</nav>
<main>
<article>
<h1>Article title</h1>
<p>Article content.</p>
</article>
<aside>Related information</aside>
</main>
<footer>Copyright information</footer>Semantic HTML can provide built-in accessibility hooks and makes page structure easier to understand.
Click Run to execute the code example.
Forms
Forms contain controls that let users enter or submit information.
<form action="/submit" method="post">
<label for="name">Name</label>
<input id="name" name="name" type="text">
<label for="email">Email</label>
<input id="email" name="email" type="email">
<button type="submit">Submit</button>
</form>Click Run to execute the code example.
Form Controls & HTML Input Types
All 18 <input type="..."> values, side by side with their live browser view. Click and type in any control to experiment.
| Input Tag | Browser View |
|---|---|
<input type="text"/> | |
<input type="password"/> | |
<input type="button"/> | |
<input type="checkbox"/> | |
<input type="color"/> | #4f46e5 |
<input type="date"/> | |
<input type="time"/> | |
<input type="email"/> | |
<input type="file"/> | document.pdf |
<input type="url"/> | |
<input type="week"/> | |
<input type="number"/> | |
<input type="month"/> | |
<input type="radio"/> | |
<input type="range"/> | 70 |
<input type="reset"/> | |
<input type="search"/> | |
<input type="submit"/> |
Types such as
date, time, week, and month show a native browser picker. Every row above is a real, working control — click, type, drag, and toggle to learn.Want the full list in one line of code? Press Run Lesson 13 below to see all 18 input types rendered together in the live frame.
Click Run to execute the code example.
HTML Form Validation
Basic constraints can be expressed directly in HTML without JavaScript.
<form>
<label for="studentEmail">Email</label>
<input
id="studentEmail"
type="email"
required
minlength="6">
<label for="age">Age</label>
<input
id="age"
type="number"
min="18"
max="100"
required>
<button type="submit">Submit</button>
</form>Client-side validation improves user experience but is not a substitute for server-side validation when data reaches a server.
Click Run to execute the code example.
Audio and Video
HTML can embed media using native elements and source controls.
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video controls width="640">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video element.
</video>Click Run to execute the code example.
iframe and Embedded Content
Use embedded-content elements carefully and understand their security and accessibility considerations.
<iframe
src="https://example.com"
title="Example website"
width="600"
height="300">
</iframe>Always provide a useful
title for an iframe.Click Run to execute the code example.
Interactive HTML: details and dialog
Some interactive behaviors are available through native HTML elements.
<details>
<summary>Show course information</summary>
<p>HTML, CSS and JavaScript fundamentals.</p>
</details>
<dialog open>
Native dialog content
</dialog>Show course information
HTML, CSS and JavaScript fundamentals.
Dialog-style content shown for demonstration.
Click Run to execute the code example.
Global Attributes
Global attributes can apply broadly across HTML elements.
<div id="profile" class="card" lang="en" title="Student profile">
Student information
</div>
<p hidden>This content is hidden.</p>
<div contenteditable="true">
You can edit this text.
</div>Examples include
id, class, lang, title, hidden, contenteditable, and data-*.Click Run to execute the code example.
data-* Attributes
Custom data attributes store extra information associated with an element.
<button
data-course="HTML"
data-level="beginner">
HTML Course
</button>Course data will appear here.
Click Run to execute the code example.
Metadata in the head
The <head> contains machine-readable information about the document.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="HTML tutorial">
<title>HTML Tutorial</title>
<link rel="icon" href="favicon.ico">
</head>Click Run to execute the code example.
HTML Comments and Code Blocks
Comments help document code and can temporarily hide markup from the renderer.
<!-- This is an HTML comment -->
<pre>
Preformatted text
</pre>
<code>const x = 10;</code>Comments are visible in source code, so do not put passwords, private keys, or secrets in comments.
Click Run to execute the code example.
Accessibility with HTML
Correct semantic elements, useful alternative text, good link text, proper labels, table headings, keyboard-friendly controls, and logical source order all matter.
<label for="email">Email address</label>
<input id="email" name="email" type="email">
<button type="button">Save</button>
<img src="logo-1.png" alt="Apex Institute logo">
<a href="/courses">View our courses</a>Prefer a real
<button> for button actions and a real <a> for navigation.Click Run to execute the code example.
Responsive Images
Responsive image features can provide different resources for different display conditions.
<picture>
<source media="(min-width: 900px)" srcset="large.jpg">
<source media="(min-width: 600px)" srcset="medium.jpg">
<img src="small.jpg" alt="Course classroom">
</picture>Choose image dimensions and formats with performance in mind, and always preserve a useful text alternative where required.
Click Run to execute the code example.
Performance Basics
Well-structured HTML can be part of a fast-loading page. Avoid unnecessary markup and choose appropriate resource loading strategies.
<img
src="photo.jpg"
alt="Classroom"
width="800"
height="450"
loading="lazy">
<script src="app.js" defer></script>Performance tuning is context-dependent. Measure real pages instead of optimizing blindly.
Click Run to execute the code example.
HTML + CSS
HTML supplies structure/meaning; CSS controls presentation.
<style>
.card {
border: 1px solid #ccc;
padding: 16px;
border-radius: 10px;
}
</style>
<article class="card">
<h2>HTML Course</h2>
<p>Learn the structure of web pages.</p>
</article>Click Run to execute the code example.
HTML + JavaScript
JavaScript can read and change HTML through the DOM. Keep structure and behavior conceptually separate.
<button id="helloButton">Click Me</button>
<script>
document.getElementById("helloButton")
.addEventListener("click", () => {
alert("Hello from JavaScript!");
});
</script>Click Run to execute the code example.
Mini Project: Student Registration Page
Combine document structure, semantics, links, form controls, labels, validation, and a table.
Project Code
Live Preview
Click Run to execute the lesson demonstration.
Final Quiz
Answer the questions to check the fundamentals.
Question 1
Which element is normally used for the main page heading?
Question 2
Which attribute provides alternative text for an image?
Question 3
Which element represents a form?
Question 4
Which is semantic HTML for a navigation area?
Choose an answer above. (0 / 4 answered)
Click Run to execute the lesson demonstration.
HTML Tags Reference Chart
Every important tag from the classic HTML Tags Chart — tag name, code example, and its live browser view. Click, experiment, and use the search box to find a tag instantly.
Read the badges: use CSS = old, better done with CSS • obsolete = removed in modern HTML — avoid. Prefer semantic tags (
<strong> over <b>, <del> over <strike>, CSS over <font>/<center>/<marquee>).
| Tag | Name | Code Example | Browser View | ||||
|---|---|---|---|---|---|---|---|
| <!--> | comment | <!-- This can be viewed in the HTML of a document --> | Nothing will show on the page — the comment is only in the source. | ||||
| <a> | anchor / hyperlink | <a href="https://example.com/">Visit Our Site</a> | Visit Our Site | ||||
| <b> | bold | <b>Example</b> | Example | ||||
| <big>use CSS | big text | <big>Example</big> | Example | ||||
| <body> | page body | <body>The content of your HTML page</body> | Everything visible on the page lives inside <body>. | ||||
| <br> | line break | The contents of your page<br>The contents of your page | The contents of your page The contents of your page | ||||
| <center>obsolete | center | <center>This will center your contents</center> | This will center your contents | ||||
| <dd> | definition description | <dd>Definition of the term</dd> |
| ||||
| <dl> | definition list | <dl><dt>Term</dt><dd>Definition</dd></dl> |
| ||||
| <dt> | definition term | <dt>Definition Term</dt> | |||||
| <em> | emphasis | This is an <em>Example</em> of emphasis | This is an Example of emphasis | ||||
| <embed> | embed object | <embed src="yourfile.mid" width="100%" height="60"> | Embeds external media (audio/video/plugins). Prefer <audio>/<video> today. | ||||
| <font>obsolete | font styling | <font face="Times New Roman" size="4" color="#ff0000">Example</font> | Example | ||||
| <form> | form | <form action="mailto:[email protected]">Name: <input size="10"></form> | |||||
| <h1–h6> | headings 1–6 | <h1>Heading 1</h1> … <h6>Heading 6</h6> | Heading 1Heading 2Heading 3Heading 4Heading 5Heading 6 | ||||
| <head> | document head | <head>Contains elements describing the document</head> | Nothing visible — holds <title>, <meta>, <link>, styles, scripts. | ||||
| <hr> | horizontal rule | <hr width="50%" size="3" noshade> | |||||
| <html> | root element | <html><body>…</body></html> | Wraps the entire document (language goes here: <html lang="en">). | ||||
| <i> | italic | <i>Example</i> | Example | ||||
| <img> | image | <img src="Earth.gif" width="41" height="41" alt="earth"> | |||||
| <input> | input field | <input type="text" size="10" maxlength="30"> | |||||
| <li> | list item | <li>List item</li> |
| ||||
| <link> | stylesheet link | <link rel="stylesheet" type="text/css" href="style.css"> | Nothing visible — connects an external stylesheet to the page. | ||||
| <marquee>obsolete | scrolling text | <marquee>Example Marquee</marquee> | |||||
| <menu>old | menu list | <menu><li>Item 1</li></menu> | |||||
| <meta> | meta info | <meta name="description" content="Description of your site"> | Nothing visible — search-engine and browser metadata (description, keywords, robots). | ||||
| <ol> | ordered list | <ol><li>Item 1</li><li>Item 2</li></ol> |
| ||||
| <option> | drop-down option | <option selected>option 2</option> | |||||
| <p> | paragraph | <p>This is a paragraph</p> | This is an example of the paragraph tag. It creates a line break and space between blocks. | ||||
| <small> | small text | <small>Example</small> | Example | ||||
| <strike>obsolete | deleted text | <strike>Example</strike> | Example | ||||
| <strong> | strong emphasis | <strong>Example</strong> | Example | ||||
| <table> | table | <table border="2" cellpadding="2">…</table> |
| ||||
| <td> | table data cell | <td>Column 1</td> | A single cell inside a <tr> — see the <table> example. | ||||
| <th> | table header | <th>Column 1</th> |
| ||||
| <title> | document title | <title>Title of your HTML page</title> | Shows in the browser tab/title bar and search results — not on the page itself. | ||||
| <tr> | table row | <tr><td>…</td></tr> | A row of cells in a table — see the <table> example. | ||||
| <tt>obsolete | teletype | <tt>Example</tt> | Example | ||||
| <u> | underline | <u>Example</u> | Example | ||||
| <ul> | unordered list | <ul><li>Item 1</li></ul> |
|
Protected Learning Mode
This page blocks right-click, copy, cut, select-all, drag, print, save, view-source, and developer-tool shortcuts. It also shows a tiled watermark, hides the content when the window loses focus (a deterrent against snipping tools), and intercepts the PrintScreen key where the browser allows it.
Important: a standalone HTML file cannot provide absolute DRM. Because the browser must receive the page in order to display it, a determined user can still obtain the source, the browser cache, a photograph taken with a camera, or a system-level screenshot. For genuinely protected course material, host the course on a server and deliver sensitive content through an authenticated viewer with server-side authorization, expiring sessions, and watermarking.
Course Learning Path
This course is organized around the major HTML learning areas represented in MDN's HTML documentation: fundamentals, document structure, links, lists, images, forms, guides, elements, attributes, accessibility, responsive images, media, performance, and JavaScript integration.
Mark each lesson complete as you finish it — your progress is saved in this browser.