HTML
Web Technology | Beginner to Intermediate
HyperText Markup Language – The Backbone of the Web
What is HTML?
HTML (HyperText Markup Language) is the standard markup language used to create and structure content
on the Web. It was created by Tim Berners-Lee in 1991 and has evolved through many versions, with
HTML5 being the current standard. Every webpage you visit — whether a simple blog or a complex web
application — is built using HTML at its core.
HTML is not a programming language; it is a markup language. It uses a system of elements represented by
tags enclosed in angle brackets to define the structure and meaning of web content. Browsers interpret
these tags and render them visually for users.
History of HTML
• 1991 – HTML 1.0: Tim Berners-Lee releases the first version
• 1995 – HTML 2.0: First formal specification published
• 1997 – HTML 3.2 & 4.0: Tables, scripting, stylesheets added
• 2014 – HTML5: Semantic elements, multimedia, APIs introduced
• 2019 – HTML Living Standard: Maintained by WHATWG as a living document
How Browsers Render HTML
When you type a URL into a browser, the browser sends an HTTP request to a web server. The server
responds with an HTML file. The browser then parses the HTML from top to bottom, builds a Document
Object Model (DOM) tree, and renders the visual page. CSS is applied for styling and JavaScript adds
interactivity.
Basic Document Structure
<!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='Page description for SEO'>
<title>My Web Page</title>
<link rel='stylesheet' href='[Link]'>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to my page.</p>
<script src='[Link]'></script>
</body>
</html>
Key Elements Explained
• <!DOCTYPE html> – Tells the browser this is an HTML5 document
• <html lang='en'> – Root element; lang attribute helps screen readers
• <head> – Contains metadata not visible to users
• <meta charset='UTF-8'> – Supports international characters
• <meta name='viewport'> – Essential for responsive mobile design
• <title> – Text shown on the browser tab and in search results
• <body> – All visible page content goes here
• <script> at bottom – Prevents blocking page render
■ Best practice: Always include the viewport meta tag for mobile-friendly pages.
Text Elements
Headings
HTML provides six levels of headings, h1 through h6. Search engines use headings to understand page
structure. Use only one h1 per page (the main topic) and use subsequent headings in logical order.
<h1>Main Page Title (use once)</h1>
<h2>Major Section</h2>
<h3>Sub-section</h3>
<h4>Sub-sub-section</h4>
<h5>Minor heading</h5>
<h6>Smallest heading</h6>
Paragraphs & Text Formatting
<p>A regular paragraph of text.</p>
<strong>Bold / important text</strong>
<em>Italic / emphasized text</em>
<u>Underlined text</u>
<mark>Highlighted text</mark>
<del>Strikethrough text</del>
<small>Smaller text</small>
<code>Inline code snippet</code>
<pre>Preformatted text preserves spaces</pre>
<blockquote>A long quotation from another source</blockquote>
<br> <!-- Line break -->
<hr> <!-- Horizontal rule / divider -->
Lists
<!-- Unordered list -->
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>
<!-- Ordered list -->
<ol>
<li>First step</li>
<li>Second step</li>
</ol>
<!-- Description list -->
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
Links & Navigation
The anchor tag <a> creates hyperlinks. The href attribute specifies the destination.
<!-- External link -->
<a href='[Link] target='_blank' rel='noopener'>Google</a>
<!-- Internal page link -->
<a href='/[Link]'>About Us</a>
<!-- Anchor link (same page) -->
<a href='#section2'>Jump to Section 2</a>
<!-- Email link -->
<a href='[Link] Us</a>
<!-- Phone link -->
<a href='[Link] Us</a>
■ Always use rel='noopener noreferrer' with target='_blank' to prevent security vulnerabilities.
Images
<!-- Basic image -->
<img src='[Link]' alt='A beautiful sunset' width='600' height='400'>
<!-- Responsive image -->
<img src='[Link]' alt='Description' style='max-width:100%;'>
<!-- Image with caption -->
<figure>
<img src='[Link]' alt='Sales chart 2024'>
<figcaption>Figure 1: Sales data for 2024</figcaption>
</figure>
<!-- Lazy loading -->
<img src='[Link]' alt='...' loading='lazy'>
Audio & Video
<!-- Video -->
<video controls width='640' height='360'>
<source src='video.mp4' type='video/mp4'>
<source src='[Link]' type='video/webm'>
Your browser does not support video.
</video>
<!-- Audio -->
<audio controls>
<source src='music.mp3' type='audio/mpeg'>
<source src='[Link]' type='audio/ogg'>
</audio>
<!-- Embed YouTube -->
<iframe width='560' height='315'
src='[Link]
allowfullscreen></iframe>
Tables
Tables are used to display tabular data — never for layout. A well-structured table includes a caption,
header row, body rows, and optionally a footer.
<table>
<caption>Monthly Sales Data</caption>
<thead>
<tr>
<th scope='col'>Month</th>
<th scope='col'>Sales</th>
<th scope='col'>Growth</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$12,000</td>
<td>+5%</td>
</tr>
<tr>
<td>February</td>
<td>$15,000</td>
<td>+25%</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='2'>Total</td>
<td>$27,000</td>
</tr>
</tfoot>
</table>
Table Attributes
• colspan – Span a cell across multiple columns
• rowspan – Span a cell across multiple rows
• scope – Helps screen readers (col / row / colgroup / rowgroup)
• <caption> – Describes the table for accessibility
HTML Forms
Forms allow users to input data that is sent to a server. They are fundamental to login pages, sign-up flows,
search boxes, and checkout processes.
<form action='/submit' method='POST' novalidate>
<label for='username'>Username:</label>
<input type='text' id='username' name='username' required
placeholder='Enter username' minlength='3'>
<label for='email'>Email:</label>
<input type='email' id='email' name='email' required>
<label for='password'>Password:</label>
<input type='password' id='password' name='password'>
<label for='age'>Age:</label>
<input type='number' id='age' name='age' min='1' max='120'>
<label for='dob'>Date of Birth:</label>
<input type='date' id='dob' name='dob'>
<label for='bio'>Bio:</label>
<textarea id='bio' name='bio' rows='4' cols='40'></textarea>
<label for='country'>Country:</label>
<select id='country' name='country'>
<option value='in'>India</option>
<option value='us'>United States</option>
</select>
<button type='submit'>Register</button>
</form>
Semantic HTML5 Elements
Semantic elements clearly describe their meaning to both the browser and the developer. They improve
accessibility, SEO, and code readability.
<!-- Page structure with semantic elements -->
<header>
<nav>
<ul><li><a href='/'>Home</a></li></ul>
</nav>
</header>
<main>
<article>
<header>
<h1>Article Title</h1>
<time datetime='2024-01-15'>January 15, 2024</time>
</header>
<section>
<h2>Section Heading</h2>
<p>Content here...</p>
</section>
</article>
<aside>
<h2>Related Articles</h2>
</aside>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
Semantic vs Non-Semantic
• Non-semantic: <div>, <span> — tell nothing about their content
• Semantic: <article>, <nav>, <header> — describe their role clearly
• Screen readers use semantic structure to navigate pages
• Search engines rank semantically correct pages better
HTML Accessibility (a11y)
Web accessibility ensures people with disabilities can use your website. HTML provides built-in tools for this
through ARIA (Accessible Rich Internet Applications) attributes.
ARIA Attributes
<!-- ARIA role -->
<div role='alert'>Error: Form submission failed</div>
<!-- ARIA label for icon buttons -->
<button aria-label='Close dialog'>X</button>
<!-- Hide decorative images from screen readers -->
<img src='[Link]' alt='' role='presentation'>
<!-- Describe form errors -->
<input type='text' aria-describedby='name-error'>
<span id='name-error'>Name is required</span>
<!-- Live region for dynamic content -->
<div aria-live='polite'>3 results found</div>
Accessibility Checklist
• All images have descriptive alt text (empty alt='' for decorative)
• Form inputs have associated <label> elements
• Colour contrast ratio meets WCAG AA standard (4.5:1)
• All interactive elements are keyboard-navigable
• Heading hierarchy is logical (h1 → h2 → h3)
• Language is declared on the <html> tag
• Videos have captions and transcripts
Meta Tags & SEO
<head>
<!-- Essential SEO meta tags -->
<meta name='description' content='Learn HTML from scratch in this
comprehensive beginner guide.' >
<meta name='keywords' content='HTML, web development, tutorial'>
<meta name='author' content='Jane Developer'>
<meta name='robots' content='index, follow'>
<!-- Open Graph (Facebook, LinkedIn sharing) -->
<meta property='og:title' content='HTML Guide'>
<meta property='og:description' content='Complete HTML reference'>
<meta property='og:image' content='[Link]
<meta property='og:url' content='[Link]
<!-- Twitter Card -->
<meta name='twitter:card' content='summary_large_image'>
<meta name='twitter:title' content='HTML Guide'>
<!-- Canonical URL (avoids duplicate content penalty) -->
<link rel='canonical' href='[Link]
<!-- Favicon -->
<link rel='icon' href='/[Link]' type='image/x-icon'>
</head>
HTML5 APIs & Advanced Features
Canvas API
<canvas id='myCanvas' width='400' height='200'></canvas>
<script>
const canvas = [Link]('myCanvas');
const ctx = [Link]('2d');
[Link] = '#e63946';
[Link](10, 10, 150, 100);
[Link] = '20px Arial';
[Link]('Hello Canvas', 10, 150);
</script>
Local Storage
<script>
// Save data locally in the browser
[Link]('username', 'Alice');
const name = [Link]('username');
[Link]('username');
</script>
Geolocation API
<script>
[Link](function(pos) {
[Link]('Lat:', [Link]);
[Link]('Lon:', [Link]);
});
</script>
Data Attributes
<!-- Custom data attributes -->
<button data-user-id='42' data-role='admin'
onclick='handleClick(this)'>Edit</button>
<script>
function handleClick(el) {
const userId = [Link]; // '42'
const role = [Link]; // 'admin'
}
</script>
Best Practices
• Always validate HTML at [Link] before deploying
• Use lowercase tag names and attribute names consistently
• Quote all attribute values with double quotes
• Close all tags — even void elements like <br /> in XHTML contexts
• Use external CSS and JS files; avoid inline styles
• Keep HTML structure flat; avoid deeply nested elements
• Test across multiple browsers: Chrome, Firefox, Safari, Edge
• Use browser DevTools (F12) to inspect and debug HTML
• Comment complex sections: <!-- Navigation menu -->
• Never use tables for page layout — use CSS Grid or Flexbox
Common Mistakes to Avoid
• Missing alt text on images (accessibility failure)
• Using <br> tags for spacing (use CSS margin/padding instead)
• Multiple <h1> tags on one page (bad for SEO)
• Skipping heading levels (e.g. h1 → h3)
• Forgetting <!DOCTYPE html> at the top of every file
• Using deprecated tags like <font>, <center>, <blink>
• Not escaping special characters: use & < >
Learning Resources
• MDN Web Docs – [Link] (best reference)
• W3Schools – [Link] (beginner friendly)
• HTML Living Standard – [Link]
• freeCodeCamp – [Link] (free interactive course)
• The Odin Project – [Link] (full curriculum)
• Can I Use – [Link] (browser compatibility checker)
■ HTML, CSS, and JavaScript are the three pillars of web development. Master HTML structure first, then layer on
CSS for styling and JavaScript for behavior.