HTML Fundamentals
Duration: 30 min
HTML (HyperText Markup Language) is the foundation of all web pages. It provides the structure and content that browsers display. Every element on a webpage is built with HTML tags.
HTML Tags and Elements
HTML uses tags to mark up content. Tags are enclosed in angle brackets and usually come in pairs: an opening tag and a closing tag. The content between them is the element.
<tagname>Content goes here</tagname>Common tags include:
<p>for paragraphs<h1>to<h6>for headings<a>for links<img>for images<div>for containers<span>for inline text
Attributes
Attributes provide additional information about elements. They're placed in the opening tag and consist of a name and value.
<a href="https://example.com" target="_blank">Click here</a>
<img src="image.jpg" alt="Description of image" width="200">
<input type="email" placeholder="Enter your email">Common attributes:
href: URL for linkssrc: Source for imagesalt: Alternative text for imagesclass: CSS class nameid: Unique identifierplaceholder: Hint text in inputs
Document Structure
Every HTML document follows a basic structure:
<!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>
<h1>Welcome</h1>
<p>This is the page content.</p>
</body>
</html><!DOCTYPE html>: Declares this as an HTML5 document<html>: Root element<head>: Contains metadata and links to stylesheets<body>: Contains visible page content
Semantic HTML
Semantic HTML uses tags that describe their meaning. This improves accessibility and SEO.
<header>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h1>Article Title</h1>
<p>Article content...</p>
</article>
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>Semantic tags: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>
Forms and Input
Forms collect user data. The <form> element wraps input fields, and each input has a type attribute.
<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>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5"></textarea>
<label>
<input type="checkbox" name="subscribe">
Subscribe to newsletter
</label>
<button type="submit">Send</button>
</form>Input types: text, email, password, number, date, checkbox, radio, file, submit
Lists
HTML supports ordered and unordered lists:
<h3>Unordered List</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h3>Ordered List</h3>
<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>
<h3>Description List</h3>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>Tables
Tables organize data in rows and columns:
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>28</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>32</td>
<td>San Francisco</td>
</tr>
</tbody>
</table>Images and Media
Images are embedded with the <img> tag. Always include an alt attribute for accessibility:
<img src="photo.jpg" alt="A beautiful sunset" width="400" height="300">
<picture>
<source media="(max-width: 600px)" srcset="small.jpg">
<source media="(min-width: 601px)" srcset="large.jpg">
<img src="default.jpg" alt="Responsive image">
</picture>
<video width="400" controls>
<source src="video.mp4" type="video/mp4">
Your browser doesn't support HTML5 video.
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser doesn't support HTML5 audio.
</audio>❓ What does HTML stand for?
❓ Which tag is used for the main content of a page?
❓ What is the purpose of the alt attribute in images?
❓ Which attribute specifies where a form should send its data?
❓ What is semantic HTML?