HTML BASICS - INTRODUCTION
HTML (HyperText Markup Language) is the standard language for creating web pages.
It defines the structure of content through elements represented by tags.
These notes cover core concepts, syntax, and practical examples.
1. DOCUMENT STRUCTURE
- <!DOCTYPE html>: Declaration for HTML5.
- <html lang="en">: Root element with language attribute.
- <head>: Contains meta-data like <title>, <meta charset="UTF-8">, <link> (stylesheets), <script> (scripts).
- <body>: Visible content including text, images, links, forms, etc.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>
2. SEMANTIC HTML
- <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>
- Improves accessibility and SEO.
- Example usage for a blog post:
<article>
<header><h2>Post Title</h2></header>
<p>Content...</p>
</article>
3. LINKS AND IMAGES
- <a href="URL" target="_blank" rel="noopener">Link Text</a>
- Attributes: href, target, rel, title
- <img src="path.jpg" alt="Description" width="300" height="200">
- Attributes: src, alt, width, height, loading="lazy"
4. LISTS & TABLES
- Ordered (<ol>) vs Unordered (<ul>) lists:
<ul>
<li>Item 1</li>
</ul>
- Tables (<table>, <tr>, <td>, <th>, <caption>):
<table>
<caption>Data</caption>
<tr><th>Name</th><th>Age</th></tr>
</table>
5. FORMS & CONTROLS
- <form action="/submit" method="post">
- Inputs: <input type="text" name="username" required>
- Other controls: <select>, <textarea>, <button>
- Accessibility: <label for="id">Label</label>