10 Stellar Web Resources for HTML5 and CSS3
How to Create Tables in HTML5
How to Create Headings in HTML5

Add Attributes to Your HTML5

Attributes introduce variety or specificity into how an element describes content or how that element works or behaves. Attributes let you use elements differently depending on the circumstances. For example, the <img> element uses the src attribute to specify a location for an image you want to display:

<img src="images/header.png" alt="header graphic" 
     width="800" height="160" title="banner graphic">

In this bit of HTML, the <img> element is a general flag to the browser that you want to include an image. The attributes handle all the fine details:

  • The src attribute provides the specifics for the image you want to use — header.png in this case.

  • The width and height attributes provide information about how to display that image on the page.

  • The alt attribute provides a text alternative to the image, which is useful because a text-only browser can display the text, or a text-to-speech reader can say it aloud for the visually impaired.

  • The title attribute creates a pop-up text message that appears over the image when a user moves the mouse inside its borders.

If you want to define attributes for any HTML element, they must appear inside the opening tag for that element, or inside the only tag for an empty element. They belong after the element name but before the closing angle bracket in that tag, like this:

<tag attribute1="value" attribute2="value">

HTML5 syntax rules decree that attribute values must always appear inside quotation marks, but you can include attributes and their values in any order you like within the opening tag or a single tag for an empty element.

Every HTML element has a collection of attributes that may be used with it, but you can’t mix and match attributes and elements however you please. Some attributes can take any text as a value because that value might be anything, such as the location of an image or a page to which you’d like to link.

Other attributes impose a specific list of values they can take, such as your options for aligning text in a table cell (left, right, center, and so on).

The various HTML specifications define exactly which attributes you can use with any given element, and which values (if explicitly defined) each attribute can take.

In HTML-speak, deprecated means that a tag or attribute should no longer be used, as it may become obsolete soon and will no longer be legal markup.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Anatomy of the <head> in HTML5
How to Specify Image Size in HTML5
How to Create Drop-Down List Fields in HTML5
How to Control Text Blocks in HTML5
How to Create Paragraphs in HTML5
Advertisement

Inside Dummies.com