Foundation HTML5 with CSS3

(Steven Felgate) #1
The Document

Older versions of HTML didn’t offer the charset attribute, instead relying on the http-equiv attribute with
a value of content-type to declare a document’s character set along with the content type, like so:
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
This has been supplanted by the charset attribute in HTML5 so it’s no longer necessary to declare
character sets using an http-equiv attribute. However, some older browsers don’t recognize the
shortened charset declaration from HTML5 and so may fall back to a default character encoding, ignoring
the meta element entirely. If you need to cater to older browsers that may otherwise have trouble
rendering special characters, you should still declare your character set with http-equiv. You can use
both methods together—charset for modern browsers and http-equiv for older browsers—just be sure
to declare the same character set both times.
The http-equiv attribute only accepts a handful of predefined values, whereas the name attribute is more
extensible and can hold almost any value you like (whether any browsers will understand or use your
made up name value is another matter). You can learn more about http-equiv and its accepted values
from Sitepoint’s HTML reference (http://reference.sitepoint.com/html/meta/http-equiv).

Metadata for Search Engines


Web search engines like Google, Yahoo!, and Bing employ programs that endlessly crawl the Web,
reading documents and following links, cataloging the immense variety of web content in order to help
people find what they’re looking for amidst the vast sea of information. These programs—affectionately
called “robots,” “spiders,” or “crawlers”—are simple user-agents that parse HTML, and meta elements can
give the robots additional information or special instructions.
If, for some reason, you’d rather not have your web page indexed by search engine robots, you can ask
them politely not to index it and not to follow any outbound links from your page:
<meta name="robots" content="noindex, nofollow">
Or, as you’ll more likely desire, you can ask the robots to please index the page and follow all its links
(they’ll probably do so even without this meta element, but some added encouragement doesn’t hurt):
<meta name="robots" content="index, follow">
You can also include other metadata useful to search engines, such as offering a set of related keywords
and a descriptive summary of the page:
<meta name="keywords" content="capes, masks, tights, superhero, costumes, gadgets">
<meta name="description" content="Power Outfitters manufactures and sells costumes,
accessories, supplies, and equipment for the contemporary costumed crime-fighter">
But beware: you’re now heading into the murky waters of Search Engine Optimization (SEO), and there’s
plenty of conflicting and downright harmful advice out there about best practices. Early search engines
paid a lot of attention to keywords in a meta element, so some unscrupulous characters would “game the
system” by loading their meta elements with dozens (or even hundreds) of keywords that weren’t relevant
to the page’s content but would cause that page to appear in results for searches on unrelated topics, all in
an effort to lure visitors under false pretenses. This practice of “keyword stuffing” soon became so
widespread and destructive—a search engine isn’t effective when the results aren’t what people are
Free download pdf