Learn HTML from document structure to semantic, accessible, and modern web pages.
HTML stands for HyperText Markup Language. It defines the structure and meaning of content on a web page.
HTML is not a programming language. It is a markup language that describes elements such as headings, paragraphs, links, images, forms, tables, navigation, and sections.
<h1>Hello, world!</h1>
<p>This is a paragraph.</p>HTML answers the question: What is this content?
CSS answers: How should it look?
JavaScript answers: How should it behave?
<button>Save</button>The HTML tells the browser that the content is a button. CSS can style it, while JavaScript can add behavior.
A tag is the syntax used to mark the beginning or end of an element.
An element usually contains an opening tag, content, and a closing tag.
<p>Hello</p>An attribute provides additional information about an element.
<a href="https://example.com">Visit Example</a><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>The doctype tells the browser to use modern HTML parsing behavior.
<!DOCTYPE html>The <html> element is the root element of the document.
<html lang="en">
...
</html>The lang attribute identifies the document language.
The <head> contains document metadata and resources rather than the main visible page
content.
The <body> contains the content rendered as part of the page.
Modern HTML is primarily organized around semantics rather than a strict block-versus-inline model, but the distinction remains useful when learning document layout.
<div>Block-level container</div>
<span>Inline content</span><article>
<h2>Title</h2>
<p>Content</p>
</article>Some HTML elements do not contain content and therefore do not need closing tags.
<img src="photo.jpg" alt="A mountain">
<br>
<hr>
<input type="text">
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">Boolean attributes represent an on/off state. Their presence generally means true.
<input type="checkbox" checked>
<input type="text" disabled>
<button autofocus>Save</button>Attribute values should generally be quoted.
<img src="photo.jpg" alt="A landscape"><h1>Main Page Title</h1>
<h2>Major Section</h2>
<h3>Subsection</h3>
<h4>Smaller Section</h4>
<h5>Detail</h5>
<h6>Lowest Heading Level</h6>Headings should represent the hierarchy of the document rather than merely being chosen for their visual size.
<p>This is a paragraph of text.</p><strong>Important information</strong>
<em>Emphasized text</em>Use these elements for their meaning, not just their appearance.
<mark>Highlighted text</mark>
<small>Small print</small>
<del>Deleted text</del>
<ins>Inserted text</ins>
<sub>Subscript</sub>
<sup>Superscript</sup><blockquote cite="https://example.com">
A longer quotation.
</blockquote>
<p>
He said <q>Hello</q>.
</p><p>Use <code>console.log()</code> to print output.</p>
<pre>
Line one
Line two
Line three
</pre><p>
First line<br>
Second line
</p>
<hr>Use <br> for meaningful line breaks, not to create page layout.
<a href="https://example.com">
Visit Example
</a><a href="#contact">Contact</a>
<section id="contact">
<h2>Contact</h2>
</section><a
href="https://example.com"
target="_blank"
rel="noopener noreferrer"
>
Open Example
</a><a href="mailto:hello@example.com">
Send Email
</a>
<a href="tel:+1234567890">
Call
</a><img
src="mountains.jpg"
alt="Snow-covered mountains"
>
The alt attribute provides a text alternative for an image. It is important for accessibility
and for cases where the image cannot be displayed.
<img
src="profile.jpg"
alt="Profile photograph of Alex"
>Decorative images can use an empty alternative:
<img src="divider.svg" alt=""><img
src="photo.jpg"
alt="A city skyline"
width="800"
height="500"
><figure>
<img
src="architecture.jpg"
alt="Historic building"
>
<figcaption>
Historic architecture in the city center.
</figcaption>
</figure><picture>
<source
media="(min-width: 900px)"
srcset="large.jpg"
>
<source
media="(min-width: 500px)"
srcset="medium.jpg"
>
<img
src="small.jpg"
alt="A landscape"
>
</picture><ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul><ol>
<li>Open the project</li>
<li>Edit the HTML</li>
<li>Save the file</li>
</ol><dl>
<dt>HTML</dt>
<dd>A markup language for structuring web content.</dd>
<dt>CSS</dt>
<dd>A language for styling web content.</dd>
</dl><ul>
<li>
Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
</ul><table>
<tr>
<th>Name</th>
<th>Role</th>
</tr>
<tr>
<td>Alex</td>
<td>Developer</td>
</tr>
<tr>
<td>Sam</td>
<td>Designer</td>
</tr>
</table><table>
<caption>Team Members</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alex</td>
<td>Developer</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">2 members</td>
</tr>
</tfoot>
</table><td colspan="2">Combined columns</td>
<td rowspan="2">Combined rows</td>Tables are intended for tabular data, where information naturally belongs in rows and columns.
Do not use tables as a general-purpose page layout mechanism.
<form action="/submit" method="post">
<label for="name">Name</label>
<input id="name" name="name" type="text">
<button type="submit">Submit</button>
</form>A label should be associated with its form control.
<label for="email">Email</label>
<input
id="email"
name="email"
type="email"
>Matching for and id values creates an explicit association.
<input type="text">
<input type="email">
<input type="password">
<input type="number">
<input type="date">
<input type="time">
<input type="url">
<input type="tel">
<input type="search">
<input type="file">
<input type="color">
<input type="range">
<input type="checkbox">
<input type="radio"><label for="message">Message</label>
<textarea
id="message"
name="message"
rows="6"
cols="40"
></textarea><label for="country">Country</label>
<select id="country" name="country">
<option value="in">India</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
</select><fieldset>
<legend>Account Information</legend>
<label for="username">Username</label>
<input id="username" name="username" type="text">
<label for="password">Password</label>
<input id="password" name="password" type="password">
</fieldset><button type="submit">Submit</button>
<button type="button">Action</button>
<button type="reset">Reset</button>Semantic HTML uses elements that communicate the purpose of their content.
<header>
<nav>...</nav>
</header>
<main>
<article>
...
</article>
</main>
<footer>
...
</footer>Represents introductory content for a page or section.
Represents a major navigation section.
Represents the main content of the document.
Represents a thematic grouping of content, usually with a heading.
Represents a self-contained piece of content that could conceptually stand on its own.
Represents content related to the surrounding content, such as supporting information or a sidebar.
Represents footer content for a page or section.
<body>
<header>
<h1>Website</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h2>Main Article</h2>
<p>Article content.</p>
</article>
<aside>
<h2>Related</h2>
<p>Supporting information.</p>
</aside>
</main>
<footer>
<p>Copyright</p>
</footer>
</body><audio controls>
<source src="music.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio><video controls width="800">
<source src="video.mp4" type="video/mp4">
Your browser does not support video.
</video><video controls>
<source src="lesson.mp4" type="video/mp4">
<track
kind="subtitles"
src="lesson-en.vtt"
srclang="en"
label="English"
default
>
</video><iframe
src="https://example.com"
title="Example website"
width="800"
height="500"
></iframe>Always provide a useful title for an iframe.
Embedded content can include maps, documents, videos, and external applications.
<iframe
src="https://example.com/embed"
title="Embedded application"
></iframe><meta charset="UTF-8"><meta
name="viewport"
content="width=device-width, initial-scale=1.0"
><title>HTML Mastery</title>The title appears in browser tabs and is used by search engines and other systems as an important page identifier.
<meta
name="description"
content="Learn modern HTML from basics to advanced concepts."
><link
rel="stylesheet"
href="coding.css"
><link
rel="icon"
href="/favicon.ico"
>Prefer meaningful HTML elements instead of building everything with generic containers.
<button>Save</button>Prefer a real button over a clickable generic element.
<label for="email">Email</label>
<input id="email" name="email" type="email"><img
src="logo.png"
alt="Company logo"
><h1>Page Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>
<h2>Another Section</h2>Interactive controls should be usable through keyboard interaction. Native HTML controls provide important behavior automatically.
<button type="button">
Open Menu
</button><label for="username">Username</label>
<input
id="username"
name="username"
type="text"
placeholder="Enter username"
>A placeholder can provide an example, but it should not replace a proper label.
<section id="about">
...
</section><div class="card featured">
...
</div><button title="Save your changes">
Save
</button><p lang="fr">
Bonjour
</p><div hidden>
Hidden content
</div><p contenteditable="true">
Edit this text.
</p><div draggable="true">
Drag me
</div>The data-* attribute pattern allows custom information to be associated with an element.
<button
data-user-id="42"
data-role="admin"
>
Edit User
</button>const button = document.querySelector('button');
console.log(button.dataset.userId);
console.log(button.dataset.role);<details>
<summary>Show answer</summary>
<p>
The answer is hidden until the user opens the section.
</p>
</details><details open>
<summary>Information</summary>
<p>Visible initially.</p>
</details><dialog open>
<p>This is a dialog.</p>
</dialog>
The <dialog> element is designed for dialog interfaces and can be controlled through
JavaScript.
< <
> >
& &
" "
' 'Hello WorldHTML provides named and numeric character references for characters that may need special representation in source code.
A page normally has one primary page heading. Additional headings should describe its sections and subsections.
<p>
<strong>Correct nesting</strong>
</p><p>Correct</p><section id="about">...</section>An id should identify a single element in the document.
<nav>
<a href="/">Home</a>
</nav>Prefer semantic elements when they accurately describe the content.
<input
type="email"
name="email"
required
><input
type="text"
minlength="3"
maxlength="30"
><input
type="number"
min="1"
max="100"
><input
type="text"
pattern="[A-Za-z]+"
><input
type="email"
name="email"
autocomplete="email"
><div>
<div>
<div>Navigation</div>
</div>
</div>
Prefer semantic elements such as <nav>, <header>,
<main>, and <footer> when they match the meaning.
Line breaks should represent meaningful line breaks, not spacing. Use CSS for layout and spacing.
<img src="logo.png">Provide an appropriate alt value unless the image is purely decorative.
<input type="email">Prefer an explicitly associated label.
<label for="email">Email</label>
<input id="email" type="email" name="email"><div onclick="save()">
Save
</div>A real button provides native semantics and keyboard behavior.
<button type="button">
Save
</button><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<meta
name="description"
content="A simple example of a semantic HTML page."
>
<title>Developer Notes</title>
<link rel="stylesheet" href="coding.css">
</head>
<body>
<header>
<h1>Developer Notes</h1>
<nav>
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#javascript">JavaScript</a>
</nav>
</header>
<main>
<section id="html">
<h2>HTML</h2>
<article>
<h3>Semantic HTML</h3>
<p>
Semantic elements describe the purpose of content.
</p>
</article>
</section>
<section id="css">
<h2>CSS</h2>
<article>
<h3>Styling</h3>
<p>
CSS controls presentation and layout.
</p>
</article>
</section>
<section id="javascript">
<h2>JavaScript</h2>
<article>
<h3>Behavior</h3>
<p>
JavaScript adds dynamic behavior to the page.
</p>
</article>
</section>
</main>
<footer>
<p>Developer Notes</p>
</footer>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>...</body>
</html><h1>Heading</h1>
<p>Paragraph</p>
<strong>Important</strong>
<em>Emphasis</em>
<mark>Highlight</mark>
<small>Small text</small>
<code>code</code>
<pre>preformatted</pre><a href="...">Link</a>
<img src="..." alt="...">
<audio controls>...</audio>
<video controls>...</video>
<iframe src="..." title="..."></iframe><header>...</header>
<nav>...</nav>
<main>...</main>
<section>...</section>
<article>...</article>
<aside>...</aside>
<footer>...</footer><ul>
<li>Item</li>
</ul>
<ol>
<li>Item</li>
</ol>
<dl>
<dt>Term</dt>
<dd>Description</dd>
</dl><form>
<label for="name">Name</label>
<input id="name" name="name" type="text">
<textarea></textarea>
<select>
<option>Option</option>
</select>
<button type="submit">Submit</button>
</form><table>
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alex</td>
</tr>
</tbody>
</table>
Start with html, head, body, headings, paragraphs, links, and the
basic document skeleton.
Practice text, lists, links, images, tables, forms, and media.
Understand header, nav, main, section,
article, aside, and footer.
Practice labels, alt text, heading hierarchy, native controls, and meaningful document structure.
Understand input types, validation attributes, labels, buttons, fieldsets, and submission behavior.
Study titles, descriptions, viewport settings, icons, stylesheets, and document language.
Stop learning tags in isolation. Build complete pages using semantic structure and accessible controls.
HTML provides structure and meaning. CSS controls presentation. JavaScript adds behavior and interactivity.
Think of HTML as the structure and meaning of a web document.
HTML → Structure + Meaning
CSS → Presentation + Layout
JavaScript → Behavior + Interaction1. Define the document structure
2. Choose semantic elements
3. Add meaningful content
4. Add accessible labels and alternatives
5. Add links, media, forms, and tables where needed
6. Validate the document structure
7. Style with CSS
8. Add behavior with JavaScript