HTML Tips and Tricks

HTML tips that should help you when coding your web pages.

The HTML Title Tag

The HTML <title> element is designed to provide a short piece of text that should stand for the document in cases such as:

window title bars
bookmark lists
result lists from search services

Tips for page titles:

The closer a word is to the start of content, the more heavily weighted it is as a keyword.
Keep the title text between 5 - 65 characters in length.
For greatest efficiency and consistency, write titles using this syntax:
keyword phrase, category, web site title (or brand)
Title text unique on every page.

Meta Description Tag

Create unique descriptions for each page, using keywords specific to that page
Keep the description text between 110 and 160 characters in length
Do not copy title tag text content as a description tags; this is a wasted opportunity to develop more keywords and adds no value.
Make the description text unique on every page.

Meta Keyword Tag

Choose words that may be secondary keyword terms (save the primary keywords for use in the <title> and <meta> description tags), and even include a few, commonly seen typographical errors of primary keywords, just for good measure
Limit your keyword and key phrase text, separated by commas, to no more than 874 characters
Don’t repeat a keyword more than 4 times among the keywords and phrases in the list

Meta Content-type Tag

UTF-8 most common choice used; more international.

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

Link Tags

The <link> tag with the canonical attribute also falls within the <head> tag. It’s used to establish the canonical URL for a webpage (which is helpful for the search engines to know). Below is a sample of the code for reference.

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

Almost Always add a trailing slash to sub-folder references

If you link like this: href="https://www.w3schools.com/html", you will generate two HTTP requests to the server, because the server will add a slash to the address and create a new request like this: href="https://www.w3schools.com/html/"

Use Language Tags Where Needed

Accessibility at Penn State | Language Tags in HTML modeled a great accessibility article. A great site for many accessibility and html usages.

Another great list of language names ordered by code offered by WikiMedia - Meta-Wiki.

Dynamic Hypertext Markup Language (DHTML)

DHTML, or Dynamic Hypertext Markup Language is a marketing term coined by Netscape and Microsoft to describe a series of technologies introduced in their Version 4.0 Web browsers; such technologies may incorporate HTML, CSS, JavaScript, etc. to achieve "dynamic" web pages.

XHTML 1.0 Required Standards

Requirements by W3C for XHTML 1.0 standards include:

XHTML elements must be properly nested,
documents must be well-formed,
tag names must be in lowercase, and
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, XHTML:

attribute values must be delimited with quotes; double or single,
Example:
Incorrect: <table summary=University of Memphis, Memphis, TN 38152.>Correct: <table summary="University of Memphis, Memphis, TN 38152.">
attribute minimization is forbidden,
Example:
Incorrect: <option selected >Quick Links</option>Correct: <option selected="selected" >Quick Links</option>
the id attribute replaces the name attribute,
Example:
Incorrect: <input name="searchterms" type="text" alt="search terms" />Correct: <input type="text" alt="search terms" id="searchterms" />
the XHTML DTD defines mandatory elements.

The <!DOCTYPE> is mandatory in XHTML.

XHTML Strict DTD
Use this DTD when you want clean markup, free of presentational clutter. Use this together with Cascading Style Sheets (CSS):
<!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 because your readers don't have browsers that support Cascading Style Sheets (CSS):
<!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!

<!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 use the format <br /> or <hr/> to properly close them. Also included are:

<img ... />
<br />
<hr />
<input ... />
<meta ... />
<link ... />

Note: the empty space before the "/" is not necessarily required; it is used as a "safe guard" for older browser versions.

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

HTML Accesskeys

HTML attribute <a href="" accesskey=""></a> gives your clients the ability to set focus to your defined hyperlinks / values for your allotted definitions. As an example, a site might use this feature, select the Alt-h (Windows) or Cmd-h (Mac) keys simultaneously to set focus for this site's home page; "h" equates to "home". Select Alt-m / Cmd-m in conjunction with the "m" key sets focus for links to the University of Memphis web site; "m" equates to "memphis".

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

XHTML 1.0 became an official W3C recommendation January 26, 2000.

XHTML stands for Extensible Hypertext Markup Language.

XSL in Internet Explorer 5 is not compatible with the official W3C XSL recommendation.

Table Rowspans Made Easy

If you have a cell that spans vertically to the bottom of the table, past rows that might vary in number or are too numerous to easily count, just give it a rowspan that you know is excessively high; in the example below, 99. Browser specification states that browsers shouldn't create any extra rows.

	It
	doesn't
	matter
	how
	many
	rows
	are
	here.

Example:

<table>
   <tr>
      <td>&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

Great for HTML tables and Accessibility, H63: Using the scope attribute to associate header cells and data cells in data tables solves empty table header and data cells used in combination.

How to Incorporate Accessible HTML Frames (<frame>) and Inline iFrames (<iframe>)

Creating Accessible Frames, Inline Frame (iframe) Accessibility

WebAIM: Creating Accessible Frames and Iframes

When using hyperlinks, if you open a new browser window, alert your client that you're doing so; <a target="_blank" title="opens a new window">

Links to New Windows, Pop-ups, Other Frames, or External Web Sites

Example:
<td><a href="#" target="_blank" title="myMemphis portal (link opens new window)."> <img height="50" width="140" alt="myMemphis" src="#" /></a> </td>

It's all about semantics.

Creating Semantic Structure

Summary:
Do NOT use HTML tags when attempting to achieve visual effects.

Examples:

<h1> - <h6>
Do NOT use text formatting, such as font size or bold to give the visual appearance of headings - use actual heading for all content headings. Likewise, do not use headers to achieve visual results only - use <strong> or <em> tags or CSS styles to achieve visual appearances.
NOTE: Make sure your header tags are ordered correctly; ascending order.

<blockquote> - </blockquote>
Use blockquotes if the text within is a quote.
Do NOT use this tag for purposes of creating a visual indentation.
DO use CSS margins instead: <div style="margin:5%"></div>.

<b> - </b>
Bold tags connote visual emphasis, strong suggest semantic emphasis.
Do NOT use bold tags. They have been deprecated.
Do use <strong></strong> tags instead.

<i> - </i>
Italic tags connote visual emphasis, emphasis suggest semantic emphasis.
Do NOT use italic tags.
Do use <em></em> tags instead.