HTML Course 1.3 What HTML is and what it is used for

HTML Course 1.3: What HTML Is and What It Is Used For

HTML (HyperText Markup Language) is the standard markup language used to create and structure content on the web. It provides the skeleton of a webpage, defining elements such as headings, paragraphs, lists, links, images, forms, tables, and more. Browsers interpret HTML code and render it visually for users. HTML alone does not define presentation (that’s CSS’s role) nor interactivity (that’s JavaScript’s role). Instead, HTML focuses on semantic structure and meaning.

Key Characteristics of HTML

• Markup Language: Uses tags (e.g., <p>, <a>) to denote the start and end of elements.
• Semantic: Modern HTML5 introduces semantic elements (<header>, <nav>, <article>) to convey meaning and assist accessibility.
• Hierarchical: Elements nest within one another, creating a document tree (DOM) that browsers traverse.
• Extensible: Can embed other languages (SVG, MathML) and multimedia (audio, video).
• Platform-Neutral: Works across browsers, devices, and operating systems.

Common Uses of HTML

• Structuring text content: headings, paragraphs, quotes, lists.
• Creating hyperlinks between pages or to external resources.
• Embedding images, audio, and video files.
• Building forms to collect user input (text fields, checkboxes, radio buttons).
• Defining tables for tabular data.
• Providing semantic structure for accessibility (screen readers) and SEO.

HTML vs. CSS vs. JavaScript

Deep Dive into HTML Elements

• Text Content:
  • <h1> to <h6> — Headings of decreasing importance
  • <p> — Paragraphs
  • <ul>, <ol>, <li> — Unordered and ordered lists
• Hyperlinks:
  • <a href=’URL’> — Anchor tag
  • Attribute target=’_blank’ to open links in a new tab/window
• Media:
  • <img src=’path’ alt=’description’> — Images
  • <audio controls> — Audio playback
  • <video controls> — Video playback
• Forms and Input:
  • <form action=’…’ method=’post’> — Form container
  • <input type=’text’>, <input type=’checkbox’>, <textarea> — Data entry
  • <button type=’submit’> — Submission
• Semantic Structure:
  • <header>, <footer> — Document or section metadata
  • <nav> — Navigation links
  • <section>, <article> — Grouping related content

Example: Basic Content Structure

<article>
  
  <h2>Welcome to Our Site</h2>
  
  <p>
    HTML is the foundation of all webpages. It defines the structure and meaning of content.
    Below is a link to learn more:
    <a href='https://developer.mozilla.org/en-US/docs/Web/HTML' target='_blank'>
      MDN Web Docs on HTML
    </a>.
  </p>
  
  <figure>
    <img src='images/html5-logo.png' alt='HTML5 Logo'>
    <figcaption>The HTML5 Logo</figcaption>
  </figure>

</article>

Example: User Input Form

<form action='/register' method='post'>

  <label for='username'>Username:</label>
  <input type='text' id='username' name='username' required>

  <label for='email'>Email Address:</label>
  <input type='email' id='email' name='email' required>

  <fieldset>
    <legend>Subscribe to:</legend>
    <label>
      <input type='checkbox' name='topics' value='news'>
      Newsletters
    </label>
    <label>
      <input type='checkbox' name='topics' value='offers'>
      Special Offers
    </label>
  </fieldset>

  <button type='submit'>Register</button>

</form>

Through these examples and explanations, you can see that HTML is essential for defining the logical structure of your web content. By learning and using semantic elements, you create accessible, maintainable, and SEO-friendly webpages.