📄

Comprehensive Guide to HTML Basics

May 9, 2025

HTML Overview Lecture Notes

Introduction to HTML

  • HTML stands for Hypertext Markup Language.
  • HTML is almost as old as the internet itself.
  • Currently, HTML5 is the latest version.

HTML File Structure

  • index.html: Main file, acts as instruction manual for websites (loads JavaScript, images, stylesheets).
  • Every webpage is like a folder with instructions for browsers.
  • HTML elements are created by wrapping content with opening and closing tags.

Basic HTML Structure

  • Put everything inside an <html> tag.
  • Contains two main parts:
    • <head>: Meta information, scripts to load before the page, stylesheets.
    • <body>: Main content visible on the page.
  • Boilerplate: Standard structure used for most HTML files (head, body, meta).
    • Can be auto-generated in code editors like VS Code.

Common HTML Elements

  • Headers: <h1> to <h6> tags for headings.
  • Paragraphs: <p> tags for long-form text content.
  • Text Modifiers: Underline, bold, italic (can also use CSS).
  • Nesting: Elements can be nested inside each other.

Attributes

  • Global Attributes: Apply to any tag (e.g., class, id).
    • Classes for styling/selecting with CSS/JavaScript.
  • Element-Specific Attributes:
    • Image Tags: Requires src (source URL of image), and optional alt, width, height.
    • Anchor Tags: Links with href attribute (URL to link to).
    • Lists: Ordered/Unordered lists (<ol>, <ul>) using <li> for items.

Forms and Inputs

  • Used for user interactions (logins, posts, payments).
  • Input Types: Text, email, password, checkbox, radio, select dropdowns.
  • Labels: Linked to inputs via for attribute and id.
  • Form Submission: Triggered by a button or enter key.
    • action attribute for form submission.
    • Various attributes for inputs: disabled, autofocus, required.

Container Elements

  • Divs and Spans: Used for containerizing content.
    • Spans: Inline text.
    • Divs: Sections, though there's a movement against using generic divs.

Style and Script Tags

  • Style Tags: Contain CSS.
  • Script Tags: Contain JavaScript.
  • Recommended to separate CSS and JS into different files for organization.

Semantic HTML

  • Use descriptive containers rather than generic <div> tags.
  • Aids in search engine optimization and code readability.

Conclusion

  • HTML is straightforward and essential for web development.
  • Encourages further learning and exploration.

Full transcript