Intermediate HTML

Resource

• Emmet Cheat Sheet

1. SVG - Scalable Vector Graphics

Resource

• Vector vs Raster

SVGs are a scalable image format → they will easily scale to any size and retain quality without increasing their filesize. They’re useful if you need to create/modify images programmatically because you can change their properties through CSS and JavaScript. They’re often used for:

• icons
• graphs/charts
• large, simple images
• patterned backgrounds
• applying effects to other elements via SVG filters.

Vector graphics are images defined by math coordinates rather than a grid of pixels - raster graphics.

• Raster graphics: the detail is limited to the size of that pixel grid. The more you zoom into the raster graphics, the more blurry it is going to get.
• Vector graphics: remain sharp and clear at any size because they are based on mathematical formulas for shapes and lines. This scalability without loss of quality is a key advantage of vector graphics.

SVGs are defined using XML (Extensible Markup Language) - an HTML-like syntax used for many things, e.g., APIs, RSS, spreadsheet, and word editor software. → SVGs are human-readable.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect x=0 y=0 width=100 height=50 />
  <circle class="svg-circle" cx="50" cy="50" r="10"/>
</svg>

XML is designed to work seamlessly with HTML → you can put the XML code directly in an HTML file without changes, and it should display the image. Because these can become elements with the DOM just like HTML elements, we can target them with CSS and create them using the Element WebAPI.

SVGs are great for relatively simple images, but because every single detail of the image needs to be written out as XML, they are extremely inefficient at storing complex images. If your image is supposed to be photo-realistic then SVGs are the wrong tool for the job.

Embed SVGs

There are many ways to embed SVGs into HTML documents, but the two main approaches are:

1. Using <img> tag

<img src="example.svg" alt="Example SVG">

This approach is much cleaner and simpler. They will still scale properly, but the contents of the SVG will not be accessible from the webpage.

2. Using inline SVG

<svg width="200" height="200"> 
  <circle cx="100" cy="100" r="50" fill="blue"/> 
</svg>

It will still render correctly, but the SVG’s properties will be visible to your code, which will allow you to alter the image dynamically via CSS or JavaScript.

• Even though it unlocks the SVGs full potential, it comes with some serious drawbacks: unreadability, and delay the rest of HTML elements from loading.

2. Tables

Resources

• Table Basics
• Table Advanced
• A Complete Guide to Table Element

HTML tables allow you to create two-dimensional tables made of rows and columns.

• <table></table> tags: These tags define the beginning and end of the table. Everything inside these tags constitutes the table.
• <tr> tags: These tags define table rows. Each <tr> element represents a row in the table.
• <td> tags: These tags define table cells, which are the individual elements within each row. They hold the data or content of the table.
• <th> tags: These tags define table headers. Similar to <td> elements, they are used within <tr> elements to specify headers for columns or rows. They are often bold and centered by default.
• Any other HTML elements: You can include any other HTML elements inside the <table>, <tr>, <td>, or <th> elements as needed. This allows for the creation of complex tables with various content and formatting.

<table>
  <tr>
    <th>First Header</th>  
    <th>Second Header</th>
  </tr>
  <tr>
    <td>This is a data cell</td>
    <td>This is also a data cell!</td>
  </tr>
</table>

/* styles.css to add border -> make the cells more visible */
table, td, th {
  border: 1px solid black;
}

1. colspanand rowspan attributes

colspan and rowspan are attributes that accept any positive integer, 2 or larger.

• If a <td> had a colspan="2", it would still be a single cell but would take up the space of two cells in a row horizontally
• If a <td> had a rowspan="2", it would still be a single cell but would take up the space of two cells in a row vertically.

<table>
    <tr>
        <td colspan="2">Header spanning two columns</td>
    </tr>
    <tr>
        <td rowspan="2">Cell spanning 2 rows</td>
        <td>Cell 2</td>
    </tr>
    <tr>
        <td>Cell 3</td>
</tr>
</table>

2. <col> and <colgroup> elements

<col> and <colgroup> are HTML elements used to apply styling and attributes to columns within an HTML table.

• <col> element is used to define properties for individual columns within a table.

• It's typically placed within the <colgroup> element or directly inside the <table> element.
• You can use attributes such as span, width, align, bgcolor, and others to specify properties for the columns.

<table>
  <colgroup>
    <col> <!-- column 1 -->
    <col bgcolor="yellow"> <!-- only the 2nd column will have bgcolor yellow -->
  </colgroup>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
  <tr>
    <td>Content 1</td>
    <td>Content 2</td>
  </tr>
</table>

3. <caption> element

The <caption> element is used to provide a title or description for the table. It is placed immediately after the opening <table> tag.

<table>
    <caption>Employee Information</caption>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Department</th>
    </tr>
    <tr>
      <td>001</td>
      <td>John Doe</td>
      <td>HR</td>
    </tr>
    <tr>
      <td>002</td>
      <td>Jane Smith</td>
      <td>Finance</td>
    </tr>
</table>

4, <thead>, <tbody>, and <tfoot>

<thead>, <tbody>, and <tfoot> elements do not directly change the appearance of the table. Instead, they are used for structuring by dividing the table content into distinct sections: header, body, and footer.

<table>
    <thead>
      <tr>
        <th>Month</th>
        <th>Sales</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>January</td>
        <td>$10,000</td>
      </tr>
      <tr>
        <td>February</td>
        <td>$12,000</td>
      </tr>
      <tr>
        <td>March</td>
        <td>$15,000</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Total</td>
        <td>$37,000</td>
      </tr>
    </tfoot>
</table>

5. scope attribute

The scope attribute is used in HTML table headers (<th>) to establish the relationship between header cells and data cells, providing additional context and aiding accessibility for users, particularly those using assistive technologies like screen readers. It specifies whether the header cell applies to a single row (row), a single column (col), a group of rows (rowgroup), or a group of columns (colgroup).

<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Age</th>
      <th scope="col">Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>USA</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>30</td>
      <td>Canada</td>
    </tr>
  </tbody>
</table>

→ indicates that each header cell applies to a single column.

6. id and headers attributes

An alternative to using the scope attribute is to use id and headers attributes to create associations between headers and cells.

1. id Attribute:
   • In the context of tables, the id attribute is typically applied to header cells (<th>) or data cells (<td>) to give them a unique identifier.
   • This identifier can then be referenced by other elements in the table using the headers attribute to establish associations between cells.
2. headers Attribute:
   • The headers attribute is used to specify the header cells that apply to a particular data cell.
   • It contains a space-separated list of the IDs of the header cells that provide context or describe the content of the data cell.
   • By associating data cells with their corresponding header cells, the headers attribute helps screen readers and other assistive technologies to correctly interpret the structure of the table and convey its meaning to users.

<table>
  <thead>
    <tr>
      <th id="name">Name</th>
      <th id="age">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="name">John</td>
      <td headers="age">25</td>
    </tr>
  </tbody>
</table>