WebDev - Web Developers

University of Memphis Photo
Web Developer Resources - HTML Tips and Tricks Related Topics:

HTML Tips and Tricks

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 the word is to the start, 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.

top of page

Meta description tag:

  • Create unique descriptions for each page, using keywords specific to that page
  • Keep the description text between 25 and 150 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.

top of 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

top of page

Meta content-type tag:

UTF-8 most common choice used; more international.

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


top of page

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="http://www.mysite.com/product.htm" />


top of page

Always add a trailing slash to sub-folder references:

If you link like this: href="http://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="http://www.w3schools.com/html/"


top of page

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.


top of page

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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Web Page Title</title>
<meta name="description" content="University of Memphis ..." />
<meta name="keywords" content="university of memphis, memphis, 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" "http://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" "http://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" "http://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 <table> tags require summary="" property to validate as XHTML 1.0; and end the summary with a period! for web page readers.


top of page

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.


top of page

Rowspans Made Easy (1)

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 border="1" bgcolor="#cccccc" cellspacing="1" cellpadding="1">

<tr>
<td width="10%" bgcolor="red" 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>


top of page

How to include Flash without using the <embed> tag

Embed Flash or Die Trying

What is the HTML object tag


top of page

How to incorporate accessible inline frames <iframe>

Creating Accessible Frames, Inline Frame (iframe) Accessibility


top of page

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 width="140"><a href="https://my.memphis.edu/" target="_blank" title="myMemphis portal (link opens new window).">
<img height="50" width="140" alt="myMemphis portal logo" src="images/mymemphis.jpg" /></a>
</td>


top of page

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 truly 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.
Do use <strong></strong> tags instead.

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


Text Only | Print | Got a Question? Ask TOM | Contact Us | Memphis, TN 38152 | 901/678-2000 | Copyright 2014 University of Memphis | Important Notice | Last Updated: 
Information Technology Services | 100 Administration Bldg. | Phone: 901.678.8888 | Email: UMTech@memphis.edu
Last Updated: 3/23/14