HTML: Documents, Tables and Forms

<!DOCTYPE html>                        <!-- what TYPE of document, not which HTML version -->
<html lang="en">                     <!-- root element; lang is optional but tells the browser the language -->
<head>                                <!-- DESCRIBES the document: nothing here is displayed -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Riyadh Sewing Supplies</title>   <!-- matters for SEO -->
    <meta name="description" content="Get everything you need to sew your next garment.
                 Open Saturday-Thursday, located in Al Olaya District, Riyadh.">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>                                <!-- CONTAINS what the browser displays -->
    <h1>Hello</h1>
</body>
</html>

<table>
  <thead>                        <!-- header rows -->
    <tr>
      <th>Month</th>              <!-- th = header cell -->
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>                        <!-- the data -->
    <tr>
      <td>January</td>            <!-- ALL content must be inside td or th -->
      <td>100 SAR</td>
    </tr>
    <tr>
      <td>February</td>
      <td>180 SAR</td>
    </tr>
  </tbody>
  <tfoot>                        <!-- summary rows -->
    <tr>
      <td>Total</td>
      <td>280 SAR</td>
    </tr>
  </tfoot>
</table>

<!-- action = URL of the server-side resource that PROCESSES the data
     method = how the data is TRANSMITTED. HTML forms allow only get or post. -->
<form action="action-page.html" method="get">

  <!-- for="" must match the input's id="" — this is what makes the label clickable -->
  <label for="firstname">First name:</label>
  <input type="text" id="firstname" name="fname"><br><br>

  <label for="lastname">Last name:</label>
  <input type="text" id="lastname" name="lname"><br><br>

  <input type="submit" value="Submit">
</form>

<!-- Submitting sends:  action-page.html?fname=Shoug&lname=Alomran
     name=  becomes the KEY in the query string. No name attribute = not sent. -->

<body>                              ← ancestor of everything below
  <article>                        ← child of body, parent of h1 and p
    <h1>Title</h1>                 ← child of article, descendant of body
    <p>Text with <strong>emphasis</strong></p>
  </article>
</body>

RULE: a child's closing tag must come BEFORE its parent's.
  ✓  <p><strong>hi</strong></p>      correct
  ✗  <p><strong>hi</p></strong>      overlapping — invalid

<!-- destination = href, label = the text between the tags -->
<a href="https://google.com">external site</a>
<a href="about.html">another page on this site</a>
<a href="#links">a place on THIS page</a>
<a href="https://google.com/#links">a place on ANOTHER page</a>
<a href="mailto:[email protected]">open the email program</a>
<a href="javascript:runProgram()">run a JavaScript function</a>
<a href="tel:0521212121">make a phone call</a>
<a href="http://m.me/PAGE_USERNAME">open another program</a>

<!-- the target of a #fragment is any element with a matching id -->
<h2 id="links">Links section</h2>

<!-- an image can be the label — this is the "clickable image" home task -->
<a href="gallery.html"><img src="trulli.jpg" alt="Trulli houses"></a>

<!-- 1. ORDERED: items with a set order. type = I, A, a, i -->
<ol type="I">
  <li>First</li>
  <li>Second</li>
</ol>

<!-- 2. UNORDERED: no particular order -->
<ul style="list-style-type:square">   <!-- disc | circle | square -->
  <li>Chrome</li>
  <li>Firefox</li>
</ul>

<!-- 3. DESCRIPTION: name + description pairs. dt = term, dd = definition -->
<dl>
  <dt>HTTP</dt>
  <dd>The protocol used for web communication.</dd>
  <dt>DNS</dt>
  <dd>Resolves domain names to IP addresses.</dd>
</dl>

<!-- img is an EMPTY element: no closing tag, no text content.
     src and alt are the key attributes; title/width/height are optional. -->
<img src="trulli.jpg" alt="Trulli houses in Puglia" width="500" height="333">

<!-- Entities: characters you cannot type, or that HTML has reserved.
     Use the NAME or the NUMBER — both work. -->
   &nbsp;   &#160;    non-breaking space
   &lt;     &#60;     <   ← reserved: HTML would read it as a tag
   &gt;     &#62;     >
   &copy;   &#169;    ©
   &euro;   &#8364;   €
   &trade;  &#8482;   ™

<p>To write a tag in text: <code>&lt;div&gt;</code> renders as <div></p>

<body>
  <header>                        <!-- intro content for the page or a section -->
    <nav>                          <!-- a block of navigation links -->
      <a href="pagehtml.html">HTML</a> |
      <a href="pagecss.html">CSS</a> |
      <a href="pagejs.html">JavaScript</a>
    </nav>
  </header>

  <main>                          <!-- the dominant content. Only ONE per page. -->
    <h1>Survey</h1>
    <section>                     <!-- a thematic grouping, usually with a heading -->
      <h2>Most Popular Browsers</h2>
      <article>                   <!-- self-contained: makes sense on its own -->
        <h3>Google Chrome</h3>
        <p>Released by Google in 2008.</p>
      </article>
    </section>

    <figure>                      <!-- content that could MOVE and the document still makes sense -->
      <img src="chart.png" alt="Browser market share">
      <figcaption>Fig 1. Market share, 2026.</figcaption>
    </figure>
  </main>

  <aside>Related links</aside>       <!-- tangential content -->
  <footer>&copy; 2026 Shoug</footer>
</body>

<input type="text"     name="fname"  placeholder="Shoug">
<input type="password" name="pwd"    required>      <!-- required = HTML5 built-in validation -->
<input type="email"    name="mail">                 <!-- browser checks the @ format -->
<input type="tel"      name="phone">
<input type="search"   name="q">
<input type="url"      name="site">
<input type="hidden"   name="id" value="42">     <!-- sent, but not shown -->

<!-- multiline text: a CONTAINER, not an empty element -->
<textarea name="bio" rows="5" cols="40"></textarea>

<!-- SELECT: a drop-down list -->
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab" selected>Saab</option>   <!-- selected = the DEFAULT -->
  <option value="audi">Audi</option>
</select>

<!-- multiple = more than one item can be chosen.
     No value attribute? The text inside the container is sent instead. -->
<select name="mult_cars_var" id="multipl_cars" multiple>
  <option>Volvo</option>        <!-- sends cars=Volvo -->
  <option>Saab</option>
</select>

<!-- optgroup groups related options -->
<select name="cars_optg_var" multiple>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="audi">Audi</option>
  </optgroup>
</select>

<!-- RADIO: pick ONE from a small, visible list.
     The SHARED name is what makes them mutually exclusive.
     value is what gets sent:  city=1  if Riyadh is selected. -->
<input type="radio" id="riyadh" name="city" value="1" checked>
<label for="riyadh">Riyadh</label>
<input type="radio" id="jeddah" name="city" value="2">
<label for="jeddah">Jeddah</label>

<!-- CHECKBOX: a yes/no, on/off answer. Each CHECKED box sends its value.
     Different names = independent answers. -->
<input type="checkbox" id="news" name="news" value="yes" checked>
<label for="news">Send me the newsletter</label>

<input type="submit" value="Send">    <!-- submits the form data to the server -->
<input type="reset"  value="Clear">   <!-- clears data the user already entered -->
<input type="button" value="Count">   <!-- does NOTHING without JavaScript -->
<input type="image"  src="go.png" alt="Go"> <!-- a submit button drawn as an image -->

<!-- <button> is a CONTAINER, so it allows far more customisation:
     you can put markup, icons and images inside it. -->
<button type="submit"><strong>Send</strong> <img src="plane.png" alt=""></button>

<!-- WARNING from slide 57: type="submit" is the DEFAULT for <button>.
     A <button> with no type inside a form will submit it. -->
<button type="button" onclick="doSomething()">Safe</button>

<!-- number and range reduce the need for client-side numeric validation.
     You still validate on the SERVER for security. -->
<input type="number" name="qty"  min="1" max="10" step="1">
<input type="range"  name="vol"  min="0" max="100" value="50">
<input type="color"  name="theme" value="#b829ea">

<!-- Method 1: for= matches id=. The two elements can be anywhere. -->
<label for="email">Email address</label>
<input type="email" id="email" name="email">

<!-- Method 2: wrap the input. No for/id needed. -->
<label>Email address <input type="email" name="email"></label>

Why it matters (it is in the chapter objectives — "improve accessibility"):
  • screen readers announce the label when the field is focused
  • clicking the label focuses the field — a much larger click target
  • it is the accessible way to label a radio button or checkbox

<!-- fieldset + legend group related controls, e.g. a set of radio buttons -->
<fieldset>
  <legend>Choose your city</legend>
  <!-- radios here -->
</fieldset>

<!-- Level 1 in practice: every one of these is a validation rule the
     browser enforces for free, before a single line of JavaScript. -->
<input type="text"   name="user"  required
       minlength="3" maxlength="20">              ← required + length

<input type="email"  name="mail"  required>          ← correct data type

<input type="number" name="age"   min="18" max="99">   ← range check

<input type="tel"    name="phone"
       pattern="05[0-9]{8}"                        ← correct format
       title="Saudi mobile: 05 followed by 8 digits">  ← "how do I fix it?"

<!-- Turn the browser's checks off to test your own:  <form novalidate> -->