📘 HTML5 Elements List with Explanation & Example
1. Basic Structure Tags
| Tag | Explanation | Example |
|---|---|---|
<!DOCTYPE html> |
Defines document type as HTML5. | <!DOCTYPE html> |
<html> |
Root element of the page. | <html lang="en"> ... </html> |
<head> |
Metadata container (title, styles, scripts). | <head><title>My Page</title></head> |
<title> |
Sets the page title (shown in browser tab). | <title>Home Page</title> |
<body> |
Main visible page content. | <body>Hello World</body> |
2. Text Content
| Tag | Explanation | Example |
|---|---|---|
<h1> … <h6> |
Headings (h1 = biggest, h6 = smallest). | <h1>Main Title</h1> |
<p> |
Paragraph. | <p>This is a paragraph.</p> |
<br> |
Line break. | Line1<br>Line2 |
<hr> |
Horizontal line. | <hr> |
<strong> |
Bold importance. | <strong>Important</strong> |
<em> |
Italic emphasis. | <em>Note this</em> |
<b> |
Bold (style only). | <b>Bold Text</b> |
<i> |
Italics (style only). | <i>Italic Text</i> |
<mark> |
Highlighted text. | <mark>Highlight</mark> |
<small> |
Smaller text. | <small>Fine print</small> |
<sup> |
Superscript. | 2<sup>nd</sup> |
<sub> |
Subscript. | H<sub>2</sub>O |
3. Links & Navigation
| Tag | Explanation | Example |
|---|---|---|
<a> |
Hyperlink. | <a href="page.html">Click Here</a> |
<nav> |
Navigation section. | <nav><a href="#">Home</a></nav> |
4. Lists
| Tag | Explanation | Example |
|---|---|---|
<ul> |
Unordered list (bullets). | <ul><li>Item 1</li></ul> |
<ol> |
Ordered list (numbers). | <ol><li>First</li></ol> |
<li> |
List item. | <li>Point</li> |
<dl> |
Description list. | <dl><dt>HTML</dt><dd>A markup language</dd></dl> |
<dt> |
Term (name). | <dt>CSS</dt> |
<dd> |
Description. | <dd>Styling language</dd> |
5. Media Elements
| Tag | Explanation | Example |
|---|---|---|
<img> |
Insert image. | <img src="pic.jpg" alt="My Photo"> |
<audio> |
Insert audio. | <audio controls><source src="song.mp3"></audio> |
<video> |
Insert video. | <video controls><source src="movie.mp4"></video> |
<source> |
Media source. | <source src="clip.mp4" type="video/mp4"> |
<track> |
Subtitles/captions for video. | <track src="subs.vtt" kind="subtitles"> |
<canvas> |
Drawing graphics with JS. | <canvas id="myCanvas"></canvas> |
<svg> |
Scalable vector graphics. | <svg><circle cx="50" cy="50" r="40"/></svg> |
<figure> |
Groups media (image/video). | <figure><img src="img.png"><figcaption>Caption</figcaption></figure> |
<figcaption> |
Caption for <figure>. |
<figcaption>Photo of sunset</figcaption> |
6. Forms & Input
| Tag | Explanation | Example |
|---|---|---|
<form> |
Form container. | <form action="submit.php"></form> |
<input> |
Input field. | <input type="text"> |
<label> |
Label for input. | <label for="name">Name:</label> |
<textarea> |
Multi-line text input. | <textarea></textarea> |
<button> |
Button. | <button>Click</button> |
<select> |
Dropdown. | <select><option>One</option></select> |
<option> |
Dropdown option. | <option value="1">Choice 1</option> |
<optgroup> |
Grouped dropdown options. | <optgroup label="Fruits"><option>Apple</option></optgroup> |
<fieldset> |
Group related inputs. | <fieldset><legend>Login</legend></fieldset> |
<legend> |
Caption for <fieldset>. |
<legend>Personal Info</legend> |
<datalist> |
Autocomplete input list. | <input list="browsers"><datalist id="browsers"><option>Chrome</option></datalist> |
<output> |
Output result. | <output>42</output> |
<meter> |
Gauge (e.g., fuel). | <meter value="0.7">70%</meter> |
<progress> |
Progress bar. | <progress value="50" max="100"></progress> |
7. Table Elements
| Tag | Explanation | Example |
|---|---|---|
<table> |
Table. | <table><tr><td>Data</td></tr></table> |
<tr> |
Table row. | <tr><td>A</td></tr> |
<td> |
Table cell. | <td>Value</td> |
<th> |
Table header cell. | <th>Name</th> |
<thead> |
Header group. | <thead><tr><th>Title</th></tr></thead> |
<tbody> |
Body rows. | <tbody><tr><td>Content</td></tr></tbody> |
<tfoot> |
Footer rows. | <tfoot><tr><td>Total</td></tr></tfoot> |
<caption> |
Table caption. | <caption>Student Marks</caption> |
<colgroup> |
Group of columns. | <colgroup><col span="2"></colgroup> |
<col> |
Column formatting. | <col style="background:yellow"> |
8. Semantic Elements (HTML5 new features)
| Tag | Explanation | Example |
|---|---|---|
<header> |
Top section. | <header><h1>Logo</h1></header> |
<footer> |
Bottom section. | <footer>© 2025 MySite</footer> |
<main> |
Main content. | <main><h2>Article</h2></main> |
<section> |
Section of content. | <section><h2>About</h2></section> |
<article> |
Independent content. | <article><h2>News</h2></article> |
<aside> |
Sidebar. | <aside>Related Links</aside> |
<address> |
Contact info. | <address>info@email.com</address> |
<details> |
Expandable details. | <details><summary>Read More</summary>Extra info</details> |
<summary> |
Title of details. | <summary>Click Me</summary> |
<time> |
Represents time/date. | <time datetime="2025-09-09">Today</time> |
9. Scripting & Metadata
| Tag | Explanation | Example |
|---|---|---|
<script> |
JavaScript code. | <script>alert('Hi');</script> |
<noscript> |
Content shown if JS disabled. | <noscript>Please enable JavaScript</noscript> |
<style> |
Internal CSS. | <style>body{color:red;}</style> |
<link> |
External resource (CSS). | <link rel="stylesheet" href="style.css"> |
<meta> |
Metadata. | <meta charset="UTF-8"> |
<base> |
Base URL for links. | <base href="https://example.com/"> |
🎓✨ Elevate Your Learning Journey with Expert Online Education! ✨🎓
Welcome to our all-in-one ICT and digital learning hub, designed to support students from Sri Lankan Local & British Curricula – right here on YouTube! 🌍📚
💻 What We Offer:
🚀 Professional IT Solutions – Expert consultations, website design & management, custom software, and smart business solutions.
📲 Social Media Mastery – Engaging campaigns, creative content, page management & platform curation.
🖥️ Online Computer Classes – High-quality lessons in English, Sinhala, and Tamil for students, professionals & beginners.
📘 Subjects & Support We Cover:
✅ ICT for O/L, A/L (Local & Cambridge/Edexcel)
✅ Application Development & Software Engineering
✅ Past papers, tutorials, and step-by-step notes for exam success 📑✍️
👨🏫 Learning Options:
✔️ Individual and Group Online Classes
✔️ Theory, Tutorials, and Exam-focused Sessions
✔️ Interactive, easy-to-follow video lessons
🌟 Additional Services:
🎨 Social Media Design | 📈 Digital Marketing | 📊 Data Analysis
🔔 Join our YouTube channel to gain ICT excellence and future-ready skills!
📞 Contact us today & step into a brighter digital future.
💥 Whatsapp https://wa.link/b72px4
💥 YouTube https://www.youtube.com/channel/UCJojbxGV0sfU1QPWhRxx4-A
No comments:
Post a Comment