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
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/"
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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<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.
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. For example, to use this feature at this web site, 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 defined for this site are:
- Accesskey "1": Main Content
- Accesskey "2": Search
- Accesskey "3": Main Navigation Bar
- Accesskey "H": Home
* one exception - University of Memphis pages incorporate home page access key as "M".
- 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.
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 border="1" bgcolor="#cccccc" cellspacing="1" cellpadding="1">
<tr>
<td width="10%" bgcolor="red" rowspan="99"> </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>
How to include Flash without using the <embed> tag
Embed Flash or Die Trying
What is the HTML object tag
How to incorporate accessible inline frames <iframe>
Creating Accessible Frames, Inline Frame (iframe) Accessibility
When using hyperlinks, if you open a new browser window, alert your client that you're doing so; <a target="_blank">
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>
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.
|
Facebook 
YouTube 
Twitter