Essential Guide to HTML Basics

Aug 8, 2024

HTML Overview

Introduction to HTML

  • HTML: Hypertext Markup Language, almost as old as the internet.
  • Current version: HTML5.

Structure of an HTML Document

  • Start with index.html: serves as an instruction manual for every website.
  • Every webpage functions like a folder that the browser assembles with instructions.
  • Basic HTML structure:
    • Elements comprised of content wrapped in opening and closing tags.
    • Example: Header tag (<h1> - <h6>).

Boilerplate Code

  • Correct HTML structure should contain:
    • <html> tag
    • <head> tag: holds meta information, scripts, stylesheets.
    • <body> tag: contains all visible content.
  • Boilerplate is usually the same, can be autogenerated in code editors like VS Code using ! + tab.

Common HTML Elements

  • Text Elements: Paragraphs, headings, etc.
  • Nesting Elements: Elements can be nested within one another.

Attributes in HTML

  • Attributes modify or add properties to elements, placed in opening tag.
  • Global Attributes: Accessible across all tags (e.g., class, id).
    • class: used for CSS styling or JavaScript selection.
  • Element-Specific Attributes:
    • Image Tag (<img>): requires src attribute (URL of image).
    • Additional optional attributes: alt, width, height.

Links and Lists

  • Anchor Tags: Used for links, require href attribute.
  • Lists:
    • Ordered lists (<ol>) or unordered lists (<ul>).
    • Items are wrapped in <li> tags.

Buttons and Forms

  • Button Elements: Can be styled with CSS and enhanced with JavaScript.
  • Forms: Used for user input (e.g., logins, payments).
    • Wrapped with <form> tag, includes various input types (text, email, password, checkboxes, radio buttons, dropdowns).
    • Linking labels to inputs with for attribute.
    • Form submission handled with action attribute and individual name attributes on inputs.

Input Attributes

  • Common attributes: disabled, autofocus, required.
  • Data Attributes: Store custom data on elements, retrievable later.

Container Elements

  • Divs and Spans:
    • div: block-level container.
    • span: inline container.
  • Anti-div movement: promoting semantic HTML.

Style and Script Tags

  • Use <style> for CSS and <script> for JavaScript within HTML file.
  • For better organization, separate files are recommended.
  • Semantic HTML: Use descriptive containers instead of generic <div>, helps with SEO and maintainability.

Conclusion

  • HTML is straightforward and not overly complicated.
  • Encouragement to ask for further explanations or projects.