Malaysia organizations don't realize severity of cyberattacks http://t.co/PUCv68Rd
25 minutes ago by ALLsecuritySoft on twitterZDNet / Techguide / Web Development
Using title attribute to provide more data about HTML elements
Summary
The ability to provide additional information is especially helpful with HTML forms where tooltips can be used to let the user know what is expected in user input.
Events
Echelon 2012
June 11 and 12, 2012
University Cultural Centre, National University of Singapore
Startup Asia Jakarta 2012
June 7 and 8, 2012
12th Floor, Annex Building, Wisma Nusantara Complex, Jl. M.H. Thamrin No. 59 Jakarta 10350, Indonesia
MMA Forum Singapore
April 23-25, 2012
Grand Hyatt Singapore
While the current version of HTML has been around for years, there are various nuances that many developers overlook. These features can be used to enhance an application and developer productivity.
The feature that generated a lot of discussion during one of my recent projects is the title attribute available with most HTML elements. The title attribute allows you to provide the user with a clue to an element's function; this is called a tooltip.
Here's a look at the title attribute's various uses.
Standards
The title attribute should not be confused with the title element, which is used to assign a title to a Web page. The title element should be used on all pages, as it is displayed in the browser title bar and is the first element relayed via a screen reader.
<html> <head><title>Sample Page</title></head> <body> ...
The title attribute is available in most elements. It is not a new feature; the HTML 2.0 standard describes it as being used to display text prior to accessing a destination resource via an anchor link. You can use the title attribute with all elements except base, basefont, head, html, meta, param, script, and title. Usage is optional; it isn't required for any element.
<a href="http://www.zdnetasia.com" mce_href="http://www.zdnetasia.com" alt="ZDNet Asia News" title="Read the latest news">News</a>
Nowadays, the title attribute is available in most elements along with the anchor, as the following textbox illustrates.
Enter: <input id="sample" type="text" value="enter text" title="Please enter text." />
Tooltips
Given the fact that the title attribute is optional, there are no definitive rules for when it should be used or avoided. The basic premise is to use it to provide additional information that is not essential. This information is often called a tooltip.
A tooltip is a small pop-up window that appears when the mouse pointer hovers over an element. The text disappears when the mouse moves away from the element. Most browsers treat the title attribute in this manner, so the tooltip term has become standard language (although not part of the HTML standard). For this reason, you may want to use the tooltip term when discussing the title attribute with other developers. Tooltips allow you to provide visual clues for page elements, along the lines of pop-up help.
Usage
It is best to keep text short when using the title attribute. One reason why is because most browsers will cut off long text.
I like to use the title attribute to provide more information on links (for instance, where it will take the user) and additional information on other elements. When using optional features like it, you should keep in mind the question of whether the text adds something useful; some long descriptions of images are meaningless to users.
Accessibility
There is some inconsistency among browsers concerning how to support the title attribute. When the title is used to provide tooltips, it does require the use of a mouse or pointing device to provide the necessary functionality. Users with a keyboard will not see the tooltip. Furthermore, screen readers usually have title attributes disabled by default so they are not processed by the reader.
Users may enable title attributes to have them processed. For this reason, do not include the title attribute in your accessibility plans.
Working with images
A quick search of the Web yields lots of discussions of the use of the title attribute with the IMG element. Problems arise since the ALT attribute provides the same functionality in Internet Explorer.
The key issue to remember in this scenario is the ALT attribute is for alternative text (i.e., a description when the image is not available). This is how it is defined in the HTML standard, so use it as a basis for developing a site as opposed to using the browser for design decisions. It is processed by screen readers, so not using the ALT attribute does not meet accessibility guidelines. Most ALT attributes should be empty because they are merely for illustrative purposes.
ASP.NET
If you work with ASP.NET, you may be familiar with the ToolTip property available with most of its Web controls. The following snippet shows it used with the TextBox control.
<asp:TextBox ID="txtTest" runat="server" ToolTip="Enter text here." />
When the page is rendered in the browser, the ToolTip is translated to the title attribute. This is true for all elements. The following snippet shows the previous line's rendered HTML.
<input name="txtTest" type="text" id="txtTest" title="Enter text here." />
Guide the user
Using the title attribute (or tooltips) allows you to provide additional information about an element. This is especially helpful with HTML forms where tooltips can be used to let the user know what is expected in user input. Browser-specific quirks like using the image ALT attribute to provide tooltips is not advised, so just stick with the standard approach.
Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.
Resource Centre Useful content from our premier sponsors
Web Development TechGuides
Creating a liquid layout for an Agile Platform theme
Working with Visual Studio 2010 from command line
Key to making applications discoverable
Easily connect to RavenDB data via C#
Use qTrace to replicate errors for QA testing
Tips on making sure your apps work for mobile users
RavenDB, a database alternative for .NET developers
Importing existing database schemas as Agile Platform entities
5 persistent Web application myths
Improve page performance with Microsoft Ajax Minifier
ZDNet Asia Live
News: Radio Costa Rica by EnjoyIT 1.0: Radio Costa Rica allows you to listen to a great var... http://t.co/BLzVT5As http://t.co/1Dhcy6ki
25 minutes ago by CostaRica_VIP on twitterThe key for mobile operators is identifying the applications that are popular with subscribers on their network. They can then work partn...
2 hours ago by camcullen on Experience trumps content in apps monetization
Experience trumps content in apps monetization | ZDNet http://t.co/gBXcjbGd
2 hours ago by DennisOosterman on twitter
Experience trumps content in apps monetization - ZDNet Asia News: "What we are doing currently is not to monetiz... http://t.co/S2EZtd8m
2 hours ago by kennyfabre1 on twitter
Malaysia organizations don't realize severity of cyberattacks: "Minister Maximus Johnity Ongkili said at the Sec... http://t.co/bgVlOBvx
4 hours ago by Bug2Hunt on twitter
#security Malaysia organizations don't realize severity of cyberattacks: "Minister Maximus Johnity Ongkili said ... http://t.co/hkFb4zrI
4 hours ago by Wiredsec on twitter
Malaysia organizations don't realize severity of cyberattacks http://t.co/EEEmRM3j via @zdnetasia
4 hours ago by RedDragon1949 on twitter
Malaysia organizations don't realize severity of cyberattacks - ZDNet Asia News http://t.co/YpNMYgb5
4 hours ago by RedDragon1949 on twitter
Malaysia organizations don't realize severity of cyberattacks http://t.co/FFems54Q
4 hours ago by mytech_pro on twitter
China solar cell makers seek Taiwan partnerships http://t.co/p5Hh7kJD
5 hours ago by Export2China on twitter
Big data acquisitions pave way to fast, effective innovation http://t.co/hdiEfBsz via @zdnetasia
5 hours ago by jowoodley on twitter
Integration, focused investments to propel Windows Phone: By Kevin Kwang , ZDNet Asia on May 23, 2012 (2 hours a... http://t.co/E7tsZbHJ
7 hours ago by Easyforexdotcom on twitter
Integration, focused investments to propel Windows Phone http://t.co/u9TqjQ8C
7 hours ago by ashvin_9 on twitter
AsiaClassifiedToday. Integration, focused investments to propel Windows Phone - ZDNet Asia: S... http://t.co/47tdjZyG #asia #google #biz
8 hours ago by ChemarieMonica on twitterSo much as we know , MTK6575 extremely integrated frequency1GHz ARM Cortex-A9 processor, the superiority of 3G / HSPA Modem, and help the...
1 day ago by y15822137359 on 5 SaaS adoption speed bumps to avoidI reckon your view: "CRM is strategy, not software", if a company replicating the approach uses in ERP implementation into CRM, what they...
2 days ago by wykoong on Gartner: Mobile CRM gives better ROI than socialThis video will teach you about the Excel fill handle but also provide you with a workook to download... http://www.youtube.com/watch?v=...
3 days ago by TradeBrother on A quick fill handle trick for Microsoft Excelwaiting...
5 days ago by eapete on What should count in a company's market value?Boy, you've opened a can of worms now.
Wait for the rants & raves.
I was puzzling before this whether to replicate the success formula we executed for a financial institute, and come out with a standard s...
5 days ago by wykoong on Drop the egos, copy ideas, then innovateKeep up with ZDNet Asia
Facebook 
RSS Feeds 
Newsletters 
Twitter Whitepapers
Understanding Awareness in Mixed Presence Collaboration
SUSE Linux Enterprise Server on the IBM PureFlex System
IBM® PureFlex™ System: The Future of Datacenter Management by Ptak, Noel & Associates LLC
Businesses are ready for a new approach to IT
IBM PureFlex System for consistent SAP solution hosting and management
Downloads
Web Development News
Inside ZDNet Asia
Sponsored
Threats and malware know no boundaries. Neither should your web security. See how far Blue Coat Unified Web Security goes to protect your network.
Echelon 2012 - The Awesomer Tech Event in Asia
Echelon 2012 – SEA’s longest running tech startup event goes Awesomer. Catch 50 of Asia’s most promising startups & over 40 international speakers on June 11-12.
Startup Asia Jakarta showcases new product-ready tech startups. Plus: hackathon, exhibition, and speakers. Use promo code CBSi50 for 50% discount.
ZDNet Asia Intelligent Singapore video series
Featuring inteviews with CXOs who define "intelligence" in their markets and reveal how their companies drive business efficiencies through ICT.
Regarding the title attributein img tag
While developing my application, in IE 7.0 I found the title attribute or at attribute in img tag flickers or blinks for a while when placed on certain location while moving the cursor over the image. But this does not happen in IE 6.0. Can you please help me on this issue.