Introduction to HTML
HTML (HyperText Markup Language) is the foundation of web development. It provides the structure and content of web pages. Every website you visit uses HTML!
HTML Document Structure
Every HTML document follows a basic structure:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Welcome!</h1>
</body>
</html>
Heading Tags
HTML has 6 heading levels from <h1> to <h6>. Use <h1> for main titles.
<h1> to <h6> - Defines headings
<h1>Main Title</h1>
Paragraph & Text Tags
<p> - Paragraph
<p>This is a paragraph.</p>
<strong> - Bold/Important
<strong>Important text</strong>
<em> - Emphasis/Italic
<em>Emphasized text</em>
<br> - Line break
<br>
<hr> - Horizontal rule
<hr>
Links Tag
<a> - Anchor/Link
<a href="https://example.com">Click here</a>
Image Tag
<img> - Insert images
<img src="image.jpg" alt="Description">
List Tags
<ul> - Unordered list
<ol> - Ordered list
<li> - List item
<ol> - Ordered list
<li> - List item
<ul> <li>Item 1</li> <li>Item 2</li> </ul>
Table Tags
<table> - Define table
<tr> - Table row
<td> - Table data
<th> - Table header
<tr> - Table row
<td> - Table data
<th> - Table header
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
Form Tags
<form> - Create a form
<input> - Input field
<textarea> - Multi-line text
<button> - Clickable button
<select> - Dropdown menu
<label> - Label for input
<input> - Input field
<textarea> - Multi-line text
<button> - Clickable button
<select> - Dropdown menu
<label> - Label for input
<form> <label>Name:</label> <input type="text" name="name"> <button type="submit">Submit</button> </form>
Semantic Tags
Semantic tags give meaning to the content:
<header> - Header section
<nav> - Navigation
<main> - Main content
<article> - Independent content
<section> - Section of content
<aside> - Side content
<footer> - Footer section
<nav> - Navigation
<main> - Main content
<article> - Independent content
<section> - Section of content
<aside> - Side content
<footer> - Footer section
Media Tags
<video> - Embed video
<video src="video.mp4" controls></video>
<audio> - Embed audio
<audio src="audio.mp3" controls></audio>
<iframe> - Embed external content
<iframe src="https://example.com"></iframe>
Metadata Tags
<meta> - Metadata information
<meta charset="UTF-8"><meta name="viewport" content="width=device-width">
<title> - Page title
<title>My Webpage</title>
<link> - Link external resources
<link rel="stylesheet" href="style.css">
<script> - Embed JavaScript
<script src="script.js"></script>
Global Attributes
id - Unique identifier
class - CSS class name
style - Inline CSS
data-* - Custom attributes
title - Tooltip text
class - CSS class name
style - Inline CSS
data-* - Custom attributes
title - Tooltip text