🌐

Foundational Concepts of HTML Explained

Dec 12, 2024

HTML Overview

HTML, or Hypertext Markup Language, is a foundational technology for creating web pages. Currently, HTML5 is the standard version.

Basic Structure

  • index.html is the starting file for websites, guiding the browser on loading scripts, images, and styles.
  • Web pages are akin to folders on a computer, assembled by the browser using instructions.

HTML Elements

  • HTML Elements: Created by enclosing content in opening and closing tags.
  • Headers: Six levels (h1 to h6) for sizing and providing information to search engines.

Correct HTML Structure

  • Enclose everything in an <html> tag.
  • Inside, use <head> and <body> tags:
    • Head: Contains meta information, pre-loading scripts, and stylesheets.
    • Body: Contains the content and main elements visible on the page.
  • Boilerplate Code: Standard code used in every HTML file, often generated via autocomplete in editors like VS Code.

Common HTML Elements

  • Paragraphs: Used to separate long-form text.
  • Text Modifiers: Underline, bold, italicize text using HTML or CSS.
  • Nesting Elements: Elements can be nested within each other.

Attributes

  • Modify elements or add properties.
  • Global Attributes: Classes and IDs for styling and scripting.
  • Element-Specific Attributes:
    • Image Tags: Require src (URL of the image) and can have alt, width, height attributes.
    • Anchor Tags: Links requiring an href attribute.
    • Lists: Ordered (numbered) and unordered (bulleted) lists using <li> tags for items.
    • Buttons: Can be styled or given functionality with CSS and JavaScript.

Forms and Inputs

  • Forms: Enable user actions like logging in or submitting data.
  • Input Types: Text, email, password, checkboxes, radios, and dropdowns.
  • Labels: Linked to inputs using id and for attributes.
  • Submission: Use action attribute for form submission.
  • Input Attributes: disabled, autofocus, required, etc.
  • Data Attributes: Store and retrieve string data.

Container Elements

  • Div and Span: Used for grouping elements; divs for sections, spans for inline text.
  • Semantic HTML: Use descriptive tags (e.g., <article>, <nav>) instead of generic <div> for better search engine and developer understanding.

Style and Script Tags

  • Write CSS within <style> tags and JavaScript within <script> tags.
  • It's advisable to separate CSS and JavaScript into separate files to maintain organization.

Final Thoughts

  • HTML isn't overly complicated and provides essential structure and instruction for web pages.
  • Semantic HTML enhances search engine optimization and code readability.

These notes summarize the key points about HTML and provide a foundational understanding for creating and structuring web pages effectively.

Full transcript