DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
The Latest "Software Integration: The Intersection of APIs, Microservices, and Cloud-Based Systems" Trend Report
Get the report
  1. DZone
  2. Data Engineering
  3. Databases
  4. 10 HTML tags which are not used as often as they deserve

10 HTML tags which are not used as often as they deserve

Giorgio Sironi user avatar by
Giorgio Sironi
·
Aug. 04, 10 · Interview
Like (0)
Save
Tweet
Share
27.47K Views

Join the DZone community and get the full member experience.

Join For Free

Apart from the most common tags like <a> and <img>, there is a whole set of underused tags in the HTML specification with a rich semantic and potential power for markup. In the years before the advent of CSS, developers were justified in always using the same tags in order to control their presentation, which varied with the markup instead of custom rules. Just think of <b> and <font>.

Now that CSS are well-supported, there is no reason to not embrace the right tag for the right job, and start including the following tags in your markup. Browser support is also very good for the tags themselves: they're older than you think.

I'm not talking about fillers lyke <acronym> or <abbr>: I know they're not so useful and you'll never include one for every abbreviation in your body copy. These tags are not life-changing, but they make a difference in usability and code clarity. If you're unsure what would be displayed by some of the snippets, I encourage you to try them in your browser. They were tested and functional in Firefox 3.6.

1. <fieldset> is a way to group a set of form fields such as inputs or textareas. It's not a usability advantage to have long forms, but when you must you can divide the form in several sections using this block element.

2. <legend> goes hand in hand with <fieldset>: when you insert it into a fieldset, its content will be displayed as the title of the group of fields:

<form>
<fieldset>
<legend>My fields<legend>
<p>Enter your name... <input type="text" name="nickname" /></p>
</fieldset>
</form>

3. <label> has both a semantic and practical power which I commonly never seen employed for the good. A label should be associated with a form field in one of the two ways I will show. When the label is linked to the field this way, it acts as an extension for it; for example, clicking on the label of the checkbox will turn on and off the box itself. Instead, clicking on the label of a text field would give the focus to it and put the cursor in it, making the user ready to write. Thus, labels extend the clickable area available to the users.

But that's not all. Labels have also a semantic association with form elements, and as such are read out by screen readers when they access a form. There's no reason to invent styled <div> tags for your forms: put in labels instead.

You can link a label to a field by including the field in the label itself:

<label><input type="checkbox" name="agree" /> I agree to the terms and conditions</label>

Or you can use an id on the input tag which you refer to in the label. Which method you should use is a matter of simplifying the application of styles to both elements.

<label for="nickname">Nickname</label>
<input type="text" id="nickname" name="nickname" />

4. The <button> block element is by far more flexible than its cousin <input type="button"> and <input type="submit">. The reason is you can nest other tags in <button>'s content.

Thus you can go from a simple button:

<input type="button" value="A button" />

to a more complex one:

<button><strong>A strong button</strong></button>

5. <dl> stands for Definition List. It is the equivalent of <ol> and <ul> when the basic element is a tuple composed of two values: name and content. This were originally used for glossaries, but you can find many more creative solutions in the web.

6. <dt> is the definition term, used in the definition list above. Stay tuned for three rows to see a code sample which involves both.

7. <dd> is the definition content.

For instance, Zend Framework by default renders forms like this:

<form>
<dl>
<dt>Nickname:</dt>
<dd><input type="text" name="nickname" /></dd>
</dl>
</form>

And it's indeed a way to delete some of the <div class="label"> rules.

8. <optgroup> is used to group options inside a select element. When there are many <option> tags, a simple layer of hierarchy can go a long way in aiding the user in its choice. Only the options themselves would be selectable, but the optgroup labels would acts as a title for the group.

<select name="enemy">
<optgroup label="Milky Way">
<option value="Apophis">Apophis</option>
<option value="Anubis">Anubis</option>
<option value="Replicators">Replicators</option>
</optgroup>
<optgroup label="Pegasus galaxy">
<option value="Wraith">Wraith</option>
<option value="Genii">Genii</option>
</optgroup>
</select>

9. <blockquote> is a block element dedicated to quoting other sources. It's probably one of the most adopted of the tags described in this article. You can saygoodbye to <div class="quote"> if you haven't already.

10. <col> and <colgroup>, when inserted between a <table> tag and its contents, respectively act as placeholders for a column or a columns set. Whenever you want to apply column-based styles, instead of repeating classes on all the cells of the table you can simply organize them around columns:

<table>
<col style="background-color: grey;" />
<col style="background-color: blue;" />
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>

I hope you have gained some tips which you weren't aware of - feel free to add your commonly neglected HTML tags in the comments if you feel they would be actually useful.

HTML Database Label Form (document)

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • DZone's Article Submission Guidelines
  • How to Submit a Post to DZone
  • HTTP vs Messaging for Microservices Communications
  • How To Handle Secrets in Docker

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: