HTML (HyperText Markup Language) is the backbone of every website. It structures web content using a system of elements and tags. This course will take you through the core concepts, practical examples, and useful techniques of HTML.
🔹 Basic Structure Tags
| Tag | Description |
|---|---|
| <!DOCTYPE> | Declares the document type |
| <html> | Root element of an HTML document |
| <head> | Contains metadata/information for the document |
| <title> | Sets the title of the document (shown in browser tab) |
| <body> | Contains visible content of the page |
🔹 Text Formatting Tags
| Tag | Description |
|---|---|
| <h1> to <h6> | Headings, <h1> is highest |
| <p> | Paragraph |
| <br> | Line break |
| <hr> | Horizontal line |
| <strong> | Bold (semantically strong) |
| <b> | Bold (no semantics) |
| <em> | Emphasized (italic) |
| <i> | Italic |
| <u> | Underline |
| <mark> | Highlighted text |
| <small> | Smaller text |
| <del> | Deleted text |
| <ins> | Inserted text |
| <sub> | Subscript |
| <sup> | Superscript |
🔹 Links, Media & Embeds
| Tag | Description |
|---|---|
| <a> | Anchor (hyperlink) |
| <img> | Image |
| <video> | Video |
| <audio> | Audio |
| <source> | Media source for <audio> or <video> |
| <iframe> | Embed another webpage |
| <embed> | Embed external content |
| <object> | Embed object/data |
| <track> | Subtitles/captions for video |
🔹 List Tags
| Tag | Description |
|---|---|
| <ul> | Unordered list |
| <ol> | Ordered list |
| <li> | List item |
| <dl> | Definition list |
| <dt> | Term name |
| <dd> | Term description |
🔹 Table Tags
| Tag | Description |
|---|---|
| <table> | Table container |
| <tr> | Table row |
| <th> | Table header |
| <td> | Table cell |
| <thead> | Header section of table |
| <tbody> | Body section of table |
| <tfoot> | Footer section of table |
| <caption> | Table caption |
| <col> | Column formatting |
| <colgroup> | Group of columns |
🔹 Forms & Input
| Tag | Description |
|---|---|
| <form> | Form container |
| <input> | Input field |
| <textarea> | Multi-line input |
| <label> | Label for input |
| <button> | Button |
| <select> | Drop-down menu |
| <option> | Option in drop-down |
| <optgroup> | Group in drop-down |
| <fieldset> | Group related fields |
| <legend> | Caption for <fieldset> |
| <datalist> | Predefined list for input |
| <output> | Output of calculations |
| <meter> | Scalar measurement |
| <progress> | Progress indicator |
🔹 Semantic HTML5 Tags
| Tag | Description |
|---|---|
| <header> | Top of page or section |
| <footer> | Bottom of page or section |
| <nav> | Navigation links |
| <article> | Independent content |
| <section> | Thematic group of content |
| <aside> | Side content |
| <main> | Main content area |
| <figure> | Self-contained content |
| <figcaption> | Caption for <figure> |
| <details> | Disclosure widget |
| <summary> | Summary of <details> |
🔹 Scripting & Metadata
| Tag | Description |
|---|---|
| <script> | JavaScript code |
| <noscript> | Fallback if JS is disabled |
| <link> | External resource link (e.g. CSS) |
| <meta> | Metadata |
| <style> | CSS styles |
| <base> | Base URL for links |
🔹 Others
| Tag | Description |
|---|---|
| <span> | Inline container |
| <div> | Block-level container |
| <canvas> | For drawing graphics via JS |
| <svg> | Scalable Vector Graphics |
| <template> | Reusable HTML template |
| <slot> | Placeholder inside Web Components |
Click to go back on notes page.