HTML Tips and Tricks

The <figure> Tag The <figure> tag is used to group media content like photos, illustrations, diagrams, or code snippets, along with their captions using the <figcaption> tag. It's great for adding context to your images.

Example:

<figure>
  <img src="https://thepracticaldev.s3.amazonaws.com/i/g84et7kjgp2phal89140.jpg" alt="Swat Kats" style="width:100%">
  <figcaption>Fig.1 - SWAT Kats</figcaption>
</figure>

This will display an image with a caption below it.

---

The <video> Tag The <video> tag embeds a media player to play videos. You can host your video files on platforms like AWS S3 and use attributes to customize the player.

Example:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

This will embed a video player with controls like play, pause, and volume.

---

The <picture> Tag The <picture> tag helps you provide multiple versions of an image for different devices, ensuring responsive design. It contains <source> tags for different image versions and an <img> tag as a fallback.

Example:

<picture>
  <source media="(min-width: 968px)" srcset="large_img.jpg">
  <source media="(min-width: 360px)" srcset="small_img.jpg">
  <img src="default_img.jpg" alt="avatar">
</picture>

This will display the appropriate image based on the device's screen width.

---

The <progress> Tag The <progress> tag shows the progress of a task, like file uploads or downloads. It provides a visual representation of how much of the task is completed.

Example:

<progress value="63" max="100"></progress>

This will display a progress bar indicating 63% completion.

---

The <meter> Tag The <meter> tag represents a scalar measurement within a known range or a fractional value, like a gauge. It's useful for displaying ratings, scores, or similar metrics.

Example:

<meter value="2" min="0" max="10">2 out of 10</meter>
<meter value="0.6">60%</meter>

These will display gauges representing the specified values.

---

The <map> Tag The <map> tag defines a client-side image map, where specific areas of an image are clickable. You use the <area> tag to define the clickable regions.

Example:

<img src="solar_system.png" width="500" height="300" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,52,92" href="earth.htm" alt="Earth">
  <area shape="circle" coords="60,48,5" href="mars.htm" alt="Mars">
  <area shape="circle" coords="135,48,12" href="saturn.htm" alt="Saturn">
</map>

This will create an interactive map where clicking on different parts of the image takes you to different pages.

---

The contenteditable Attribute The contenteditable attribute allows you to make any HTML element editable. It's useful for making parts of your webpage modifiable by users directly.

Example:

<p contenteditable="true">This is an editable paragraph.</p>

This paragraph can be edited by the user in the browser.

---

Input Suggestions The <datalist> tag provides a list of pre-defined options for an <input> element. This is useful for suggesting possible values to the user.

Example:

<input type="text" list="planets">
<datalist id="planets">
  <option value="Mercury"></option>
  <option value="Venus"></option>
  <option value="Earth"></option>
  <option value="Mars"></option>
  <option value="Jupiter"></option>
  <option value="Saturn"></option>
  <option value="Uranus"></option>
  <option value="Neptune"></option>
</datalist>

This will suggest planet names as the user types in the input field.

---

The HTML Title Tag

The HTML <title> element is designed to provide a short piece of text for:

• Window title bars

• Bookmark lists

• Search result lists

Tips for page titles:

• Keywords closer to the start of content are weighted more heavily.

• Keep title text between 5 - 65 characters.

• Use this syntax for efficiency: keyword phrase, category, web site title (or brand).

• Make title text unique on every page.

Meta Description Tag

• Create unique descriptions for each page using specific keywords.

• Keep the description text between 110 and 160 characters.

• Do not copy title tag text for description tags.

• Make the description text unique on every page.

Meta Keyword Tag

• Use secondary keyword terms.

• Include common typographical errors for primary keywords.

• Limit keywords and phrases to no more than 874 characters.

• Don’t repeat a keyword more than 4 times.

Meta Content-Type Tag

• UTF-8 is the most common choice, suitable for international use.

Example:

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

Link Tags

The <link> tag with the canonical attribute establishes the canonical URL for a webpage.

Example:

<link rel="canonical" href="#" />

Use Language Tags Where Needed

Use language tags to enhance accessibility.

Dynamic Hypertext Markup Language (DHTML)

DHTML incorporates HTML, CSS, JavaScript, etc. to achieve "dynamic" web pages.

XHTML 1.0 Required Standards

Requirements by W3C for XHTML 1.0:

• Elements must be properly nested.

• Documents must be well-formed.

• Tag names must be in lowercase.

• All elements must be closed.

Example:

<!DOCTYPE HTML>
<html lang="en">
<head>
  <title>Web Page Title</title>
  <meta name="description" content="The University of Memphis ..." />
  <meta name="keywords" content="university of memphis, memphis, university, tennessee" />
</head>
<body>
  ...
</body>
</html>

Also, in XHTML:

• Attribute values must be in quotes.

• Attribute minimization is forbidden.

• The id attribute replaces the name attribute.

• The <!DOCTYPE> is mandatory.

XHTML Strict DTD

Use this DTD for clean markup, free of presentational clutter.

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML Transitional DTD

Use this DTD when you need to use XHTML's presentational features.

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML Frameset DTD

Use this DTD when you want to use frames.

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML Standalone or Self-Closing Tags

XHTML standalone or self-closing tags use the format <br /> or <hr/>.

Example:

<img src="image.jpg" alt="Image description" />
<br />
<hr />
<input type="text" name="name" />
<meta name="description" content="Description" />
<link rel="stylesheet" href="styles.css" />

HTML <img> Tags

HTML <img> tags require alt="", width="", and height="" properties to validate as XHTML 1.0.

HTML Accesskeys

The accesskey attribute defines shortcuts for links.

Example:

<a href="#" accesskey="h">Home</a>
<a href="#" accesskey="m">University of Memphis Home</a>

Access keys could be defined for a site as:

• Accesskey "1": Main Content

• Accesskey "2": Search

• Accesskey "3": Main Navigation Bar

• Accesskey "H": Home

• Accesskey "M": University of Memphis Home

Table Rowspans Made Easy

Use an excessively high rowspan to span vertically.

Example:

<table>
  <tr>
    <td rowspan="99">&nbsp;</td>
    <td>It</td>
  </tr>
  <tr>
    <td>doesn't</td>
  </tr>
  <tr>
    <td>matter</td>
  </tr>
  <tr>
    <td>how</td>
  </tr>
  <tr>
    <td>many</td>
  </tr>
  <tr>
    <td>rows</td>
  </tr>
  <tr>
    <td>are</td>
  </tr>
  <tr>
    <td>here.</td>
  </tr>
</table>

Table Empty Cells

Use the scope attribute to associate header and data cells.

Creating Accessible Frames and Inline iFrames

Make sure to alert users when opening new windows.

Example:

<a href="#" target="_blank" title="opens a new window">Link</a>

Semantic HTML

Do not use HTML tags just for visual effects. Use CSS for styling and formatting.

Examples:

• Use <h1> - <h6> for headings, not for font size.

• Use <blockquote> for quotes, not for indentation.

• Use <strong> instead of <b> for bold text.

• Use <em> instead of <i> for italic text.