X
Home WebDev Web Developers WebDev Tips & Tricks HTML Tips and Tricks

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.