HTML Basics and Semantic Markup (Video Notes)

HTML Tag Structure

• Elements have opening and closing tags when they contain content; some elements are empty/self-closing (they don’t require a separate closing tag).
• Example: an image tag typically uses attributes like src and alt, e.g. - <img src="images/mytek.jpeg" alt="Description">.
• Closing tag pattern: opening tag, content, then closing tag (e.g., <p>...</p>).
• Nesting rules: never overlap tags; if a tag is opened inside another, it must be closed before the outer tag closes (like nesting dolls).

Nesting, Validity, and Semantics

• Tags must be properly nested; you cannot close a inner tag after the outer tag has closed.
• Semantic structure matters for accessibility and clarity: use proper semantic elements to describe content.
• A section element is a semantic container; content inside should be organized logically with headings and paragraphs.

Attributes and Common Examples

• All HTML elements can have attributes with values (e.g., src, alt, id).
• Common usage:
  • Images: <img src="..." alt="..."> where src points to the image and alt describes it.
  • IDs and classes: used for styling and scripting (e.g., id="main-title", class="highlight").
• The value of an attribute provides metadata about the element.

Comments and Source View

• Comments do not render in the browser:
  • HTML: <!-- comment text --> (can span multiple lines)
  • CSS: /* comment text */ (can span multiple lines)
• Viewing source in the browser helps diagnose issues or locate the file you’re working on:
  • Mac: Cmd+Option+U to view page source

Editor Tips: VS Code Essentials

• Auto-closing tags: VS Code can automatically insert the closing tag when you open a section.
• Moving blocks: use cut/paste (e.g., Cmd+X) to rearrange code without breaking structure.
• Indentation: keep same level content aligned; nested content should be indented (commonly 2–4 spaces per level).
• Save frequently: use auto-save or Cmd+S to preserve work.
• Explorer: open the document root in the Explorer to manage folders/files easily (e.g., create a folder like junk inside your project).
• Word wrap: on Mac, Option+Z toggles word wrap.

Semantic Content and Accessibility

• main element represents the primary content of the page and is considered semantic.
• Headings (<h1> to <h6>) define document structure; order is not implied by the tag number alone, but should reflect actual hierarchy.
• Lists:
  • Ordered lists <ol> imply a sequence; items default to numbering: 1, 2, 3, …
  • Unordered lists <ul> use bullets when order is not important.
• Text semantics: use <strong> for strong emphasis and <em> for emphasis; screen readers announce these with appropriate emphasis cues.
• Semantic markup helps screen readers convey meaning: e.g., reading a section header as part of a chapter title.

Lists and Headings

• Use headings to mark sections and subsections, and lists to present grouped items in a meaningful order when applicable.
• Proper semantics improve accessibility and searchability.

Practical Workflow and Quick Reminders

• Always consider cross-browser compatibility to ensure consistent rendering across browsers.
• When coding, keep elements properly nested and avoid overlapping tags.
• Use semantic elements (like main, section, header, footer) to describe content structure.
• For styling or scripting, use id/class attributes to target elements reliably.
• If you’re unsure about your code, view the source in the browser to compare with your file and confirm structure.