SOMATECH IT
HTML ELEMENTS
1. Basic Document Structure
• <html> – The root element of an HTML document.
• <head> – Contains metadata, links, and scripts.
• <title> – Defines the page title (shown in the browser tab).
• <body> – Contains the visible content of the webpage.
2. Headings & Text Formatting
• <h1> to <h6> – Headings, with <h1> being the largest and <h6> the smallest.
• <p> – Paragraph.
• <br> – Line break.
• <hr> – Horizontal rule (a thematic break).
• <b> – Bold text (without emphasis).
• <strong> – Bold text (with emphasis for importance).
• <i> – Italic text (without emphasis).
• <em> – Italic text (with emphasis for importance).
• <mark> – Highlights text.
• <small> – Displays smaller text.
• <del> – Strikethrough (deleted text).
• <ins> – Underlined text (inserted content).
• <sub> – Subscript text (e.g., H₂O).
• <sup> – Superscript text (e.g., x²).
3. Links & Navigation
• <a> – Anchor tag (used for hyperlinks).
• <nav> – Defines navigation links.
4. Lists
• <ul> – Unordered list (bullets).
• <ol> – Ordered list (numbered).
• <li> – List item (used inside <ul> or <ol>).
• <dl> – Description list.
SOMATECH IT – 0726 674 946 1
• <dt> – Term (inside <dl>).
• <dd> – Description (inside <dl>).
5. Tables
• <table> – Creates a table.
• <tr> – Table row.
• <th> – Table header cell (bold & centered by default).
• <td> – Table data cell.
• <thead> – Table header section.
• <tbody> – Table body section.
• <tfoot> – Table footer section.
• <colgroup> – Groups columns for styling.
• <col> – Defines column properties.
6. Forms & Inputs
• <form> – Defines an HTML form.
• <input> – Input field (text, password, email, etc.).
• <textarea> – Multi-line text input.
• <button> – Clickable button.
• <select> – Dropdown list.
• <option> – Options inside <select>.
• <optgroup> – Groups related <option> elements.
• <label> – Label for form elements.
• <fieldset> – Groups form elements together.
• <legend> – Caption for <fieldset>.
• <datalist> – Provides predefined options for <input>.
• <output> – Displays calculated values.
7. Media Elements
• <img> – Displays an image.
• <audio> – Embeds an audio file.
• <video> – Embeds a video file.
• <source> – Specifies media sources for <audio> or <video>.
• <track> – Provides text tracks for <video> (e.g., subtitles).
• <figure> – Wraps images, charts, etc., for semantic grouping.
• <figcaption> – Caption for <figure>.
SOMATECH IT – 0726 674 946 2
8. Embedded Content
• <iframe> – Embeds another webpage.
• <embed> – Embeds external content (e.g., Flash).
• <object> – Embeds multimedia (e.g., PDF, SWF).
• <param> – Defines parameters for <object>.
9. Semantic HTML Elements
• <header> – Defines introductory content or navigation.
• <footer> – Defines footer content (credits, links).
• <section> – Groups related content.
• <article> – Represents self-contained content (e.g., blog post).
• <aside> – Represents secondary content (e.g., sidebar).
• <main> – Represents the main content of the page.
• <summary> – Provides a collapsible summary for <details>.
• <details> – Creates a collapsible content section.
• <time> – Represents a date/time.
• <address> – Represents contact information.
• <mark> – Highlights text.
• <blockquote> – A block quotation.
• <cite> – Citation/reference to another source.
• <code> – Displays inline code.
• <pre> – Preformatted text (preserves spaces & line breaks).
• <kbd> – Represents keyboard input.
• <samp> – Represents sample output.
• <var> – Represents a variable in programming.
10. Interactive Elements
• <dialog> – Defines a modal dialog.
• <summary> – Creates a toggle-able summary.
• <progress> – Displays progress (e.g., file upload progress).
• <meter> – Displays a gauge or scale.
11. Metadata & Scripting
• <meta> – Provides metadata (e.g., character set, viewport settings).
• <link> – Links external resources (e.g., CSS stylesheets).
SOMATECH IT – 0726 674 946 3
• <script> – Embeds JavaScript code.
• <noscript> – Defines content shown when scripts are disabled.
• <style> – Embeds CSS styles.
SOMATECH IT – 0726 674 946 4