Skip to main content

HTML

Key concepts:

  1. Elements:

    • Basic building blocks of HTML.
    • Defined by tags, e.g., <div>, <p>, <a>.
    • Usually come in pairs: opening tag (<tag>) and closing tag (</tag>).

  2. Tags:

    • Special keywords surrounded by angle brackets.
    • Examples: <html>, <head>, <body>, <h1>.

  3. Attributes:

    • Provide additional information about elements.
    • Defined within the opening tag.
    • Example: <a href="https://example.com">Link</a> (where href is an attribute).

  4. Nesting:

    • Placing elements inside other elements.
    • Example: <div><p>Paragraph inside a div</p></div>.

  5. Document Structure:

    • The overall structure of an HTML document.
    • Key parts: <!DOCTYPE html>, <html>, <head>, <title>, <body>.

  6. Headings:

    • Define the headings of a document.
    • Ranging from <h1> to <h6>, with <h1> being the highest level.

  7. Paragraphs:

    • Represented by <p> tags.
    • Used to define blocks of text.

  8. Links:

    • Created using the <a> tag.
    • Used for hyperlinks to other pages or locations within the same page.

  9. Images:

    • Incorporated using the <img> tag.
    • Example: <img src="image.jpg" alt="Description">.

  10. Lists:

    • Ordered lists (<ol>) and unordered lists (<ul>).
    • List items are defined using <li> tags.

  11. Tables:

    • Defined using <table>, <tr> (table row), <td> (table data), and <th> (table header).

  12. Forms:

    • Used to collect user input.
    • Key tags include <form>, <input>, <textarea>, <button>, <select>, <option>.

  13. Semantic Elements:

    • Provide meaning to the web page content.
    • Examples: <header>, <footer>, <article>, <section>, <aside>, <nav>.

  14. Inline vs Block Elements:

    • Inline elements: do not start on a new line (e.g., <span>, <a>, <img>).
    • Block elements: start on a new line and take up full width (e.g., <div>, <p>, <h1>).

  15. Comments:

    • Used to insert comments in the code.
    • Not displayed in the browser.
    • Syntax: <!-- Comment -->.

  16. Character Entities:

    • Used to display reserved characters or special symbols.
    • Examples: &lt; for <, &gt; for >, &amp; for &.

  17. Doctype:

    • Declares the document type and version of HTML.
    • Example: <!DOCTYPE html> for HTML5.

  18. Metadata:

    • Information about the HTML document.
    • Placed inside the <head> tag.
    • Examples: <meta>, <title>, <link>, <style>, <script>.

  19. Viewport:

    • Defined using a meta tag to control layout on mobile browsers.
    • Example: <meta name="viewport" content="width=device-width, initial-scale=1.0">.

  20. Responsive Design:

    • Techniques to ensure web pages render well on various devices and window sizes.
    • Often involves media queries and flexible grid layouts.

References:

  1. w3schools - HTML Tutorial