跳到主要内容

HTML Basics

HTML = structure, CSS = style, JavaScript = behavior

What is HTML?​

"Markup language for web structure"

HTML (HyperText Markup Language) is the standard markup language for creating web pages:

  • Defines structure and content
  • Uses tags to mark elements
  • Provides semantic meaning
  • Works with CSS and JavaScript

"HTML is a markup language that defines the structure and content of web pages using tags and elements."

Document Structure​

DOCTYPE → html → head → body

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Page Title</title>
  </head>
  <body>
    <!-- Content here -->
  </body>
</html>

"Every HTML document needs DOCTYPE, html, head, and body elements."

Semantic HTML​

Meaningful tags > div spam

TagPurpose
<header>Header content
<nav>Navigation
<main>Main content
<article>Independent content
<section>Thematic grouping
<aside>Sidebar content
<footer>Footer content

"Semantic HTML improves accessibility, SEO, and code maintainability."

Common Elements​

Headings, paragraphs, links, images

  • <h1> to <h6> - Headings
  • <p> - Paragraphs
  • <a> - Links
  • <img> - Images
  • <ul>, <ol>, <li> - Lists
  • <div> - Generic container
  • <span> - Inline container

Attributes​

Attributes = element properties

Common attributes:

  • id - Unique identifier
  • class - CSS class selector
  • src - Source (images, scripts)
  • href - Hyperlink reference
  • alt - Alternative text
  • data-* - Custom data attributes

"Attributes provide additional information about HTML elements."

Forms​

Form = input container

<form action="/submit" method="POST">
  <input type="text" name="username" />
  <input type="email" name="email" />
  <button type="submit">Submit</button>
</form>

Common input types:

  • text, email, password
  • checkbox, radio
  • number, date
  • submit, button

Accessibility​

Semantic HTML + ARIA = accessible

  • Use semantic elements
  • Add alt text to images
  • Use proper heading hierarchy
  • Label form inputs
  • Use ARIA attributes when needed

"Accessible HTML ensures websites are usable by people with disabilities and assistive technologies."

HTML5 Features​

Semantic tags + new APIs

  • Semantic elements (<header>, <nav>, etc.)
  • Form validation attributes
  • <video> and <audio> elements
  • Canvas API
  • Local storage APIs

"HTML5 introduced semantic elements, native media support, and new APIs for richer web applications."

9️⃣ Best Practices​

✅ Use semantic HTML ✅ Validate HTML ✅ Separate structure (HTML) from style (CSS) ✅ Use meaningful alt text ✅ Proper heading hierarchy ❌ Don't use deprecated tags ❌ Don't nest block elements in inline elements

"HTML is the markup language that structures web content using tags and elements. Modern HTML5 emphasizes semantic elements like header, nav, main, and article for better accessibility and SEO. HTML works with CSS for styling and JavaScript for interactivity, following the separation of concerns principle."

🧠 Ultra-Short Cheat Sheet​

Structure = HTML
Semantic tags
Forms with validation
Accessibility (alt, ARIA)
HTML5 features
Separation of concerns