HTML Tutorials
1. HTML Introduction
HTML (HyperText Markup Language) is the foundation of web pages, structuring content like text, images, and links. It works with CSS for styling and JavaScript for interactivity.
Example: Basic HTML structure.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Welcome to My Site</h1>
<p>This is a sample page.</p>
</body>
</html>Welcome to My Site
This is a sample page.
Note: The <!DOCTYPE html> declaration ensures standards-compliant rendering.
2. HTML Elements
Elements are defined by tags (e.g., <p>, <div>), containing content or other elements. They form the structure of a webpage.
Example: Nested elements.
<div>
<p>This is a paragraph inside a div.</p>
<p>Another paragraph.</p>
</div>This is a paragraph inside a div.
Another paragraph.
Note: Proper nesting and closing tags are crucial for valid HTML.
3. HTML Attributes
Attributes provide additional information in opening tags, like id, class, or src, modifying element behavior or appearance.
Example: Image with attributes.
<img src="example.jpg" alt="Sample Image" width="150">Note: The alt attribute is essential for accessibility.
4. HTML Headings
Headings (<h1> to <h6>) create a content hierarchy, with <h1> being the most prominent, aiding SEO and readability.
Example: Multiple headings.
<h1>Main Title</h1>
<h2>Subheading</h2>
<h3>Smaller Heading</h3>Main Title
Subheading
Smaller Heading
Note: Use headings sequentially for proper structure.
5. HTML Paragraphs
The <p> tag defines paragraphs, organizing text into readable blocks, displayed as block-level elements.
Example: Paragraphs.
<p>First paragraph.</p>
<p>Second paragraph with <strong>bold</strong> text.</p>First paragraph.
Second paragraph with bold text.
Note: Browsers add default margins to paragraphs.
6. HTML Links
The <a> tag creates hyperlinks using the href attribute, linking to pages, files, or anchors within a page.
Example: External link.
<a href="https://example.com" target="_blank">Visit Example</a>Note: Use target="_blank" for new tabs, but ensure accessibility with clear link text.
7. HTML Images
The <img> tag embeds images with src for the file path and alt for accessibility, enhancing visual content.
Example: Image with attributes.
<img src="photo.jpg" alt="Scenic View" width="200" height="100">Note: Alt text is crucial for screen readers and SEO.
8. HTML Lists
Lists use <ul> (unordered) or <ol> (ordered) with <li> for items, organizing content like menus or steps.
Example: Ordered list.
<ol>
<li>Step 1</li>
<li>Step 2</li>
</ol>- Step 1
- Step 2
Note: Nested lists can create complex hierarchies.
9. HTML Tables
Tables (<table>) display data with <tr> (rows), <th> (headers), and <td> (cells), ideal for structured data presentation.
Example: Simple table.
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>30</td>
</tr>
</table>| Name | Age |
|---|---|
| Alice | 30 |
Note: Use CSS for modern table styling instead of the border attribute.
10. HTML Forms
Forms (<form>) collect user input with elements like <input> and <button>, enabling interactive features like login or search.
Example: Basic form.
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>Note: Forms require proper attributes for functionality and accessibility.
11. HTML Divs
The <div> tag is a block-level container for grouping elements, commonly used for layout and styling purposes.
Example: Div with content.
<div style="background-color: #f0f0f0;">
<p>Content inside a div.</p>
</div>Content inside a div.
Note: Prefer semantic elements over divs for better structure.
12. HTML Semantic Elements
Semantic elements (e.g., <header>, <footer>) describe their purpose, improving accessibility and SEO over generic divs.
Example: Semantic structure.
<header>
<h1>Site Title</h1>
</header>
<main>
<article>Main content</article>
</main>
<footer>© 2025</footer>Site Title
Note: Semantic elements enhance code readability and searchability.
13. HTML Meta Tags
Meta tags in <head> provide metadata like character encoding or SEO descriptions, not visible on the page.
Example: Common meta tags.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn HTML">(Meta tags are not visible but affect page behavior.)
Note: Meta tags are critical for responsive design and SEO.
14. HTML Comments
Comments (<!-- -->) add notes to code, ignored by browsers, aiding developers in documentation.
Example: HTML comment.
<!-- This is a comment -->
<p>Visible content</p>Visible content
Note: Comments help with debugging and collaboration.
15. HTML Accessibility
Accessibility ensures content is usable by all, using attributes like alt, aria-label, and semantic elements.
Example: Accessible button.
<button aria-label="Close window">Close</button>Note: Accessibility improves inclusivity and compliance.
16. HTML Styles
The style attribute applies inline CSS to elements, controlling appearance like color or font.
Example: Inline style.
<p style="color: blue; font-size: 16px;">Styled text</p>Styled text
Note: Use external CSS for maintainability over inline styles.
17. HTML Classes
The class attribute assigns reusable identifiers to elements for CSS or JavaScript targeting.
Example: Class usage.
<p class="highlight">Highlighted text</p>
<style>
.highlight { background-color: yellow; }
</style>Highlighted text
Note: Classes can be reused across multiple elements.
18. HTML IDs
The id attribute provides a unique identifier for an element, used for specific styling or scripting.
Example: ID usage.
<p id="unique">Unique text</p>
<style>
#unique { color: red; }
</style>Unique text
Note: IDs must be unique within a page.
19. HTML Iframes
The <iframe> tag embeds another webpage or content within a frame, useful for maps or videos.
Example: Simple iframe.
<iframe src="https://example.com" width="300" height="150"></iframe>Note: Ensure iframes are secure and accessible.
20. HTML Scripts
The <script> tag includes JavaScript code or links to external scripts for interactivity.
Example: Inline script.
<script>
alert('Hello, World!');
</script>(Script displays an alert, not visible here.)
Note: Place scripts at the end of <body> for better performance.
21. HTML Head
The <head> tag contains metadata, links to stylesheets, and scripts, not displayed on the page.
Example: Head content.
<head>
<title>My Page</title>
<meta charset="UTF-8">
</head>(Head content is not visible on the page.)
Note: The head section is critical for page setup.
22. HTML Base
The <base> tag sets a default URL or target for all relative links in a page.
Example: Base URL.
<head>
<base href="https://example.com/">
</head>
<a href="page.html">Link</a>Note: Use base sparingly to avoid confusion.
23. HTML Link
The <link> tag connects external resources like CSS stylesheets to the document.
Example: Linking CSS.
<head>
<link rel="stylesheet" href="styles.css">
</head>(Links external CSS, not visible here.)
Note: Use rel="stylesheet" for CSS files.
24. HTML Block vs Inline
Block elements (e.g., <div>) take full width, while inline elements (e.g., <span>) flow within text.
Example: Block and inline.
<div>Block element</div>
<span>Inline element</span>Note: CSS can change display behavior.
25. HTML Form Inputs
The <input> tag creates various form controls like text, checkbox, or radio, based on the type attribute.
Example: Multiple inputs.
<input type="text" placeholder="Enter text">
<input type="checkbox"> Check meNote: Always pair inputs with labels for accessibility.
26. HTML Buttons
The <button> tag creates clickable buttons for form submission or actions, with types like submit or button.
Example: Button types.
<button type="button">Click me</button>
<button type="submit">Submit</button>Note: Use type="button" to prevent default form submission.
27. HTML Labels
The <label> tag associates text with form controls, improving accessibility and usability.
Example: Label with input.
<label for="email">Email:</label>
<input type="email" id="email" name="email">Note: The for attribute must match the input’s id.
28. HTML Select
The <select> tag creates dropdown menus with <option> tags for user selections.
Example: Dropdown menu.
<select name="choices">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>Note: Use multiple attribute for multi-select dropdowns.
29. HTML Textarea
The <textarea> tag creates multi-line text input fields for user comments or descriptions.
Example: Textarea.
<textarea rows="4" cols="50">Enter text here...</textarea>Note: Use CSS to style textarea dimensions instead of cols/rows.
30. HTML Fieldset
The <fieldset> tag groups related form elements, often with a <legend> for a caption.
Example: Fieldset with legend.
<fieldset>
<legend>User Info</legend>
<label>Name: <input type="text"></label>
</fieldset>Note: Fieldsets enhance form organization and accessibility.
31. HTML Legend
The <legend> tag provides a caption for a <fieldset>, describing the group’s purpose.
Example: Legend in fieldset.
<fieldset>
<legend>Contact Details</legend>
<input type="email">
</fieldset>Note: Legends improve form clarity for users and screen readers.
32. HTML Datalist
The <datalist> tag provides autocomplete suggestions for <input> fields.
Example: Datalist with input.
<input list="fruits">
<datalist id="fruits">
<option value="Apple">
<option value="Banana">
</datalist>Note: Datalists enhance user experience with suggestions.
33. HTML Output
The <output> tag displays the result of a calculation or user action in a form.
Example: Output element.
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a"> +
<input type="number" id="b"> =
<output name="result"></output>
</form>Note: Output requires JavaScript for dynamic updates.
34. HTML Canvas
The <canvas> tag creates a drawing area for graphics, manipulated via JavaScript.
Example: Simple canvas.
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
let c = document.getElementById("myCanvas").getContext("2d");
c.fillRect(50, 25, 100, 50);
</script>Note: Canvas requires JavaScript for rendering graphics.
35. HTML SVG
The <svg> tag defines scalable vector graphics, ideal for logos or icons.
Example: SVG circle.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="blue"></circle>
</svg>Note: SVGs are resolution-independent and scalable.
36. HTML Audio
The <audio> tag embeds sound content with controls for playback.
Example: Audio player.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>Note: Provide multiple source formats for compatibility.
37. HTML Video
The <video> tag embeds video content with controls and multiple sources.
Example: Video player.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>Note: Specify dimensions for consistent rendering.
38. HTML Article
The <article> tag defines independent, self-contained content, like a blog post.
Example: Article element.
<article>
<h2>Post Title</h2>
<p>Post content here...</p>
</article>Post Title
Post content here...
Note: Articles are ideal for syndicated content.
39. HTML Section
The <section> tag groups thematic content, like chapters or page sections.
Example: Section element.
<section>
<h2>Chapter 1</h2>
<p>Content of chapter...</p>
</section>Chapter 1
Content of chapter...
Note: Sections should have a heading for clarity.
40. HTML Nav
The <nav> tag defines navigation links, like menus or breadcrumbs.
Example: Navigation menu.
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
</nav>Note: Nav enhances accessibility for navigation areas.
41. HTML Header
The <header> tag contains introductory content or navigation, typically at the top of a page.
Example: Header element.
<header>
<h1>Site Header</h1>
<nav>Menu</nav>
</header>Site Header
Note: Headers can appear multiple times in a page.
42. HTML Footer
The <footer> tag contains closing content, like copyright or contact info.
Example: Footer element.
<footer>
<p>© 2025 My Site</p>
</footer>Note: Footers often include links or metadata.
43. HTML Aside
The <aside> tag contains supplementary content, like sidebars or ads.
Example: Aside element.
<aside>
<h3>Related Links</h3>
<p>Extra info</p>
</aside>Note: Asides are tangential to main content.
44. HTML Main
The <main> tag holds the primary content of a page, excluding headers or footers.
Example: Main element.
<main>
<h2>Main Content</h2>
<p>Core page content.</p>
</main>Main Content
Core page content.
Note: Use one main element per page for accessibility.
45. HTML Figure
The <figure> tag groups media content, like images, with an optional caption.
Example: Figure with image.
<figure>
<img src="image.jpg" alt="Sample">
<figcaption>Image caption</figcaption>
</figure>Note: Figures provide semantic context for media.
46. HTML Figcaption
The <figcaption> tag adds a caption to a <figure> element, describing the media.
Example: Figcaption usage.
<figure>
<img src="photo.jpg" alt="Photo">
<figcaption>A scenic view</figcaption>
</figure>Note: Figcaptions enhance accessibility for media.
47. HTML Time
The <time> tag marks dates or times, providing machine-readable formats.
Example: Time element.
<time datetime="2025-09-23">September 23, 2025</time>Note: The datetime attribute ensures machine readability.
48. HTML Mark
The <mark> tag highlights text for emphasis or reference, often styled as a highlight.
Example: Mark element.
<p>This is <mark>highlighted</mark> text.</p>This is highlighted text.
Note: Use CSS to customize mark’s highlight color.
49. HTML Details
The <details> tag creates an expandable section for optional content, often with a <summary>.
Example: Details element.
<details>
<summary>Click to expand</summary>
<p>Hidden content here.</p>
</details>Click to expand
Hidden content here.
Note: Details provide interactive content without JavaScript.
50. HTML Summary
The <summary> tag defines the visible heading for a <details> element, toggling its content.
Example: Summary in details.
<details>
<summary>More Info</summary>
<p>Detailed information here.</p>
</details>More Info
Detailed information here.
Note: Summary enhances usability of details elements.