HTML Basics - freecodecamp.org

Review the concepts below to prepare for the upcoming prep exam.

HTML Basics

  • Role of HTML: HTML (Hypertext Markup Language) is the foundation of web structure, defining the elements of a webpage.
  • HTML Elements: Used to represent content on the page. Most of them are made by an opening and a closing tag (e.g., <h1></h1>, <p></p>).
  • HTML Structure: HTML consists of a head and body, where metadata, styles, and content are structured.
  • Common HTML Elements: Headings (<h1> - <h6>), paragraphs (<p>), and div containers (<div>).
  • div elements: The div element is a generic HTML element that does not hold any semantic meaning. It is used as a generic container to hold other HTML elements.
  • Void Elements: Do not have a closing tag (e.g., <img>).
  • Attributes: Adding metadata and behavior to elements.

Identifiers and Grouping

  • IDs: Unique element identifiers.
  • Classes: Grouping elements for styling and behavior.

Special Characters and Linking

  • HTML entities: Using special characters like &amp; and &lt;.
  • link element: Linking to external stylesheets.
  • script element: Embedding external JavaScript files.

Boilerplate and Encoding

  • HTML boilerplate: Basic structure of a webpage, which includes the DOCTYPE, html, head, and body elements.
  • UTF-8 character encoding: Ensuring universal character display.

SEO and Social Sharing

  • Meta tags (description): Providing a short description for the web page and impacting SEO.
  • Open Graph tags: Enhancing social media sharing.

Media Elements and Optimization

  • Replaced elements: Embedded content (e.g., images, iframes).
  • Optimizing media: Techniques to improve media performance.
  • Image formats and licenses: Understanding usage rights and types.
  • SVGs: Scalable vector graphics for sharp visuals.

Multimedia Integration

  • HTML audio and video elements: Embedding multimedia.
  • Embedding with <iframe>: Integrating external video content.

Paths and Link Behavior

  • Target attribute types: Controlling link behavior.
  • Absolute vs. relative paths: Navigating directories.
  • Path syntax: Understanding /, ./, ../ for file navigation.
  • Link states: Managing different link interactions (hover, active).

Importance of Semantic HTML

  • Structural hierarchy for heading elements: It is important to use the correct heading element to maintain the structural hierarchy of the content.
  • Semantic HTML elements: Examples include:
    • <header>: Represents introductory content.
    • <nav>: Contains navigation links.
    • <article>: Represents self-contained content.
    • <aside>: Used for sidebars or related content.
    • <section>: Groups related content within a document.
    • <footer>: Defines the footer for a section or document.

Semantic Text Elements

  • em: Marks text that has stress emphasis.
  • i: Used for highlighting alternative voice or mood.
  • strong: Marks text that has strong importance.
  • b: Used to bring attention to text.
  • dl, dt, dd: Description lists and terms.
  • blockquote: For quoted sections.
  • q: For short inline quotations.
  • abbr: For abbreviations.
  • time: For date/time representation.

HTML Form Elements

Basic Form Structure

Gender

HTML Tables

Student Grades
Name Grade
John Doe 85
Jane Smith 92

Accessibility

  • WCAG Principles: Perceivable, Operable, Understandable, Robust.
  • ARIA attributes: Enhancing accessibility for dynamic content.
  • Alternative text: Providing text alternatives for images.

Developer Tools

  • HTML Validator: For checking HTML syntax.
  • DOM Inspector: For examining page structure.
  • Accessibility Audits: For evaluating accessibility.