HTML: Zero to Hero
Shared 1/4/2026•35 views
1. Basic Document Structure Every HTML document starts with a doctype declaration and the root <html> element. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document Title</title> </head> <body> <!-- Content goes here --> </body> </html> <!DOCTYPE html> : Document type declaration. <html lang="en"> : Root element, specifies document language. <head> : Contains meta-information about the HTML document. <body> : Contains all the visible content of the webpage. 2. Head Elements (Metadata) <meta charset="UTF-8"> : Specifies character encoding. <meta name="viewport" content="width=device-width, initial-scale=1.0"> : For responsive design. <title>Page Title</title> : Defines title shown in browser tab. <link rel="stylesheet" href="style.css"> : Links to an external CSS stylesheet. <script src="script.js"></script> : Links to an external JavaScript file. <style> /* CSS here */ </style> : Embeds internal CSS. <meta name="description" content="A brief description."> : Page description for search engines. <meta name="keywords" content="html, web, programming"> : Keywords for search engines. 3. Text Content <h1> to <h6> : Headings (level 1 to 6). <p> : Paragraph. <br> : Line break (self-closing). <hr> : Horizontal rule (self-closing). <b> or <strong> : Bold text ( <strong> for semantic importance). <i> or <em> : Italic text ( <em> for semantic emphasis). <u> : Underlined text (less common, often done with CSS). <del> : Strikethrough text. <sub> : Subscript text (e.g., $H_2O$). <sup> : Superscript text (e.g., $x^2$). <code> : Inline code snippet. <pre> : Preformatted text (retains whitespace and line breaks). <blockquote> : Block quotation. <q> : Inline quotation. <abbr title="HyperText Markup Language">HTML</abbr> : Abbreviation. <address> : Contact information for the author/owner. 4. Lists Unordered List: <ul> <li>Item 1</li> <li>Item 2</li> </ul> Ordered List: <ol> <li>First item</li> <li>Second item</li> </ol> Description List: <dl> <dt>Term</dt> <dd>Description of the term.</dd> </dl> 5. Links & Images Hyperlink: <a href="https://example.com" target="_blank">Visit Example</a> href : Destination URL. target="_blank" : Opens link in a new tab. mailto: : For email links (e.g., <a href="mailto:test@example.com"> ). tel: : For phone numbers (e.g., <a href="tel:+1234567890"> ). Image: <img src="image.jpg" alt="Description of image" width="300" height="200"> src : Path to the image file. alt : Alternative text for accessibility. width , height : Image dimensions (can also be set with CSS). Figure with Caption: <figure> <img src="pic.jpg" alt="A beautiful landscape"> <figcaption>A serene landscape view.</figcaption> </figure> 6. Tables <table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody> <tr> <td>Data 1</td> <td>Data 2</td> </tr> <tr> <td>Data 3</td> <td>Data 4</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">Table Footer</td> </tr> </tfoot> </table> <table> : Defines a table. <thead> , <tbody> , <tfoot> : Table sections (header, body, footer). <tr> : Table row. <th> : Table header cell. <td> : Table data cell. colspan , rowspan : Attributes to make cells span multiple columns/rows. 7. Forms <form action="/submit-data" method="POST"> <label for="name">Name:</label> <input type="text" id="name" name="user_name" required><br><br> <label for="email">Email:</label> <input type="email" id="email" name="user_email" placeholder="john@example.com"><br><br> <label for="password">Password:</label> <input type="password" id="password" name="user_password" minlength="8"><br><br> <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label><br> <input type="checkbox" id="subscribe" name="subscribe" value="yes" checked> <label for="subscribe">Subscribe to newsletter</label><br><br> <label for="country">Country:</label> <select id="country" name="user_country"> <option value="usa">USA</option> <option value="can" selected>Canada</option> </select><br><br> <label for="message">Message:</label> <textarea id="message" name="user_message" rows="5" cols="30"></textarea><br><br> <input type="submit" value="Submit"> <input type="reset" value="Reset"> </form> Common Input Types: text , password , email , number , date , time , range , color , file , radio , checkbox , submit , reset , button . Form Attributes: action : URL where form data is sent. method : HTTP method ( GET or POST ). autocomplete : On/off for input fields. novalidate : Prevents browser validation. Input Attributes: name : Identifier for form data. id : Unique identifier (for <label> association). value : Initial value or value submitted. placeholder : Hint text in input. required : Field must be filled. readonly : Field cannot be modified. disabled : Field is unusable and unclickable. min , max : Min/max values for numeric/date inputs. minlength , maxlength : Min/max characters for text inputs. checked : For pre-selecting radio/checkbox. selected : For pre-selecting <option> in <select> . 8. Semantic HTML5 Elements These elements provide meaning to the structure of web content. <header> : Introductory content, usually contains navigation or branding. <nav> : Navigation links. <main> : Dominant content of the <body> . <article> : Independent, self-contained content (e.g., blog post). <section> : Generic standalone section of a document. <aside> : Content related to the main content but separate (e.g., sidebar). <footer> : Footer for its nearest sectioning content or the root element. <figure> , <figcaption> : For self-contained content with a caption. <time> : Represents a specific period in time. <mark> : Highlighted text. <details> , <summary> : Disclosure widget (toggleable content). 9. Media Elements Audio: <audio controls> <source src="audio.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> Video: <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video> controls : Shows default playback controls. autoplay : Starts playing automatically. loop : Repeats playback. muted : Mutes the audio/video. poster : Image to display before video plays. 10. Iframes & SVGs Iframe (Inline Frame): Embeds another HTML document. <iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials" width="800" height="600"></iframe> src : URL of the page to embed. title : For accessibility. width , height : Dimensions. SVG (Scalable Vector Graphics): For vector-based graphics. <svg viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg> Can be embedded directly or linked via <img> . 11. Web Components (Custom Elements) Allows creating reusable custom elements with their own functionality. Custom Elements: class MyComponent extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = `<p>Hello from custom component!</p>`; } } customElements.define('my-component', MyComponent); <my-component></my-component> Shadow DOM: Encapsulates component's styles and markup. HTML Templates: <template> and <slot> for reusable content. 12. HTML Entities Used to display reserved characters or special symbols. Character Entity Name Entity Number Description < < < Less than > > > Greater than & & & Ampersand " " " Double quotation mark ' ' ' Single quotation mark (apostrophe)   Non-breaking space © © © Copyright symbol ™ ™ ™ Trademark symbol 13. Deprecated Elements & Attributes (Avoid) <font> , <center> , <big> , <strike> : Use CSS for styling. align , bgcolor , border , height , width (on many elements): Use CSS. frameSet , frame , noFrames : Replaced by <iframe> or modern layout techniques. 14. Accessibility (A11y) Best Practices Always use semantic HTML elements. Provide meaningful alt text for all images. Use <label> elements with for attributes for form inputs. Ensure sufficient color contrast. Use proper heading hierarchy ( <h1> to <h6> ). Provide keyboard navigation and focus indicators. Use ARIA attributes when native HTML isn't sufficient (e.g., aria-label , aria-describedby , role ). Include lang attribute on the <html> tag. Use title attribute for <iframe> . 15. SEO Best Practices Use descriptive <title> tags. Provide unique and relevant <meta name="description"> . Use semantic HTML5 elements ( <header> , <nav> , <main> , <article> , <footer> ). Ensure a logical heading structure ( <h1> for the main topic, then <h2> , etc.). Optimize image alt text and file names. Create clear and concise URLs. Ensure mobile-friendliness ( <meta name="viewport"> ). Use structured data (Schema.org) for richer search results.