Advertisement
HTML & CSS

The 10 HTML Tags Beginners Aren’t Using

by

Let's go back to the basics for this one. Everyone reading this at least knows what HTML is. I believe that, no matter what experience level someone has, reviewing the foundation can help increase knowledge. It also helps to hone skills, especially with the constantly evolving technologies that drives the Internet.

There has also been a lot of talk of change with HTML 5. Every tag that I mention below is supported in both HTML 4.01 and HTML 5. While some of these tags are already widely used; I would like to challenge some of the ways that we use and think about them.


1. <!-- -->

Any book you read about programming will tell you that it is good to explain what you are doing. Why are comments a good idea? For that exact reason. It helps those looking at your code know what is going on.

For HTML, commenting can seem like overkill; however, it can be used to define sections, and can help keep your code organized and structured. Labeling the beginning and end of a section really helps with the workflow.

<!-- Beginning of Nav -->
	<ul>
		<li>menu item 1</li>
		<li>menu item 2</li>
	</ul>
<!-- End of Nav -->
<!-- Beginning of Main Content -->
	<p>This is the main content.</p>
	...

2. Table Styles - <thead>, <tbody>, and <tfoot>

When I think back to the earlier days of web development, the first thing that comes to my mind is <table>. I abused this so much. When using <table> correctly, for tabular data only, it is possible to define styles for column headings, footer rows, and the body.

As boring as it is, it really does feel good to create a well-formatted spreadsheet. (This is speaking outside of web development.) Why should we not carry that simple task of formatting into great design? Each tag can then be easily styled within the site's stylesheet.

Just to clarify: these three tags all affect table rows.

Item Qty
Sum 7
#1 3
#2 4

<thead>

Wrap table rows with <thead></thead>.

<tfoot>

Wrap table rows with <tfoot></tfoot>. The <tfoot> rows must also be above <tbody>. This is so that the footer row is rendered before the remaining data rows.

<tbody>

Wrap table rows with <tbody></tbody>.

<table>
	<thead>
		<tr>
			<td>Item</td>
			<td>Qty</td>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td>Sum</td>
			<td>7</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>#1</td>
			<td>3</td>
		</tr>
		<tr>
			<td>#2</td>
			<td>4</td>
		</tr>
	</tbody>
</table>

3. <optgroup>

Dropdowns are a great way to present data to a user for selection. They not only are conscious of screen real estate, but are familiar and easy to use. The great thing is with <optgroup>, it is possible to create categories (or we could call them headings) for your options.

<select>
	<optgroup label="Baseball Teams">
		<option value="Detroit Tigers">Detroit Tigers</option>
		<option value="Chicago Cubs">Chicago Cubs</option>
	</optgroup>
	<optgroup label="Football Teams">
		<option value="Detroit Lions">Detroit Lions</option>
		<option value="Chicago Bears">Chicago Bears</option>
	</optgroup>
</select>

4. Headings - <h1>,<h2>,<h3>,<h4>,<h5>, and <h6>

I know everyone uses heading tags. But, to be honest, I do not remember when the last time was that I used <h3> or lower though. I have no good reasoning aside from I didn't think about it and used something less semantic, like styling text in a <div>.

My point here is: Don't create more work for yourself. Remember to use all of the heading tags.


5. <fieldset> and <legend>

I like sites that have easy to find information with logically separated elements. I think it looks sleek. <fieldset> groups together form elements by drawing a box around them. It is also possible to add a caption to the form by using <legend>.

Fieldset Example
<form>
	<fieldset>
		<legend>General Information: </legend>
		<label>Name: <input type="text" size="30" /></label>
		<label>Email: <input type="text" size="30" /></label>
		<label>Date of birth: <input type="text" size="10" /></label>
	</fieldset>
</form>

6. <label>

This is possibly one of my favorite HTML tags. The label tag does not do anything for styling. It adds functionality.

<label> is used to define a label to an input element. So what's the big deal? When used, the label itself becomes clickable, making the corresponding input field active. This works for text boxes or radio buttons.




<form>
	<label>Name: <input type="text" size="30" /></label>
	<label>Male: <input type="radio" name="sex" /></label>
	<label>Female: <input type="radio" name="sex" /></label>
</form>

7. <blockquote>

If you are looking to create a dramatic effect to draw attention to a statement or sentence, you can use <blockquote>. White space is inserted before and after the element, by default. Margins are also added to offset the contained text from the other content.

This is also a great way to do things such as a traditional block quote. (I know that was horribly obvious.) Most times, when I write a tutorial, I take a direct excerpt from another site or source. I will use <blockquote> to set this apart.

This is what Nettuts+ uses for its blockquote styling.


8. <cite>

I don't want to say that <cite> is related to <blockquote>, but I know that I normally end up using them in conjunction.</p>

Think of <cite> when you need to provide a citation for something. If you are fresh out of college, think of providing the list of your references at the end of your papers. Remember, in MLA format, book and periodical titles are to be italicized.

"We love beautiful typography, and we appreciate the efforts of designers who come up with great typographic techniques and tools or who just share their knowledge with fellow designers." - smashingmagazine.com

<blockquote>
	<p>"...this is some great quote." <cite>- someGreatPerson</cite>
</blockquote>

9. <dl>

Using lists is a great way to organize information. Everyone is aware of <ul>, but how often are <ol> and <dl> used? Perhaps the reference to "definition list" confuses some beginning coders into thinking that they can only be used when inserting terms and definitions - however, this is not really the case.

Types of Lists

  1. Unordered List (ul)
  2. Ordered List (ol)
  3. Definition List (dl)

What They Do

  • Unordered List (ul): A bulleted list
  • Ordered List (ol): A numbered list
  • Definition List (dl): A list with definitions to the elements

Reasons to Use Lists

  • Consistent styling
  • Easy to create
  • Very versatile

Each list type displays information in a valuable way. I don't think I need to explain <ul> and <ol>, but let's take a closer look at the structure of a definition list.

<dl>
	<dt>This is list item #1</dt>
		<dd>This is the definition of list item #1</dd>
	<dt>This is list item #2</dt>
		<dd>This is the definition of list item #2</dd>

Instead of only declaring a list type (<ul> or <ol>) and each list item (<li>), we use <dt> and <dd>. <dt> defines each list item and <dd> describes the above item.


10. &#39;(and other ASCII characters)

It is proper coding to use HTML ASCII codes when using any symbols. It's a bit more work, but it will ensure that the characters are rendered properly, and are not confused by the browser as part of a string or other markup. Have you ever come across some text on a webpage that didn't look correct? Maybe something like this: "I didn#%%!t use HTML to render the apostrophe."

The above example is forced, but I think it conveys the idea.

The character-sets used in modern computers, HTML, and Internet are all based on ASCII. - w3schools.com

w3schools.com has a great HTML ASCII reference page for ASCII characters. I encourage everyone to check it out and memorize a few of the most commonly used characters, like the apostrophe, quotes, ampersand, and the "at sign."


Thanks so much for reading!

Related Posts
  • Web Design
    UX
    Impress Your Visitors With a Web 2.0 Hit CounterCounter thumb
    If there's one way to show off how successful your site is, it's by letting your visitors know how many others have been there before them. Let's furnish a web page with a hit counter!Read More…
  • Code
    JavaScript & AJAX
    Working With IndexedDB - Part 3Indexeddb retina preview
    Welcome to the final part of my IndexedDB series. When I began this series my intent was to explain a technology that is not always the most... friendly one to work with. In fact, when I first tried working with IndexedDB, last year, my initial reaction was somewhat negative ("Somewhat negative" much like the Universe is "somewhat old."). It's been a long journey, but I finally feel somewhat comfortable working with IndexedDB and I respect what it allows. It is still a technology that can't be used everywhere (it sadly missed being added to iOS7), but I truly believe it is a technology folks can learn and make use of today. In this final article, we're going to demonstrate some additional concepts that build upon the "full" demo we built in the last article. To be clear, you must be caught up on the series or this entry will be difficult to follow, so you may also want to check out part one.Read More…
  • Web Design
    Email
    Creating a Simple Responsive HTML EmailEmail new rwd thumb
    In this tutorial I will show you how to create a simple responsive HTML email which will work in every email client, including all the new smartphone mail clients and apps. It uses minimal media queries and a fluid width approach to ensure maximum compatibility.Read More…
  • Code
    JavaScript & AJAX
    Working With IndexedDB - Part 2Indexeddb retina preview
    Welcome to the second part of my IndexedDB article. I strongly recommend reading the first article in this series, as I'll be assuming you are familiar with all the concepts covered so far. In this article, we're going to wrap up the CRUD aspects we didn't finish before (specifically updating and deleting content), and then demonstrate a real world application that we will use to demonstrate other concepts in the final article.Read More…
  • Code
    HTML & CSS
    Pure: What, Why, & How?Pure retina preview
    This tutorial will introduce you to Pure, a CSS library made of small modules, that can help you in writing completely responsive layouts, in a very fast and easy way. Along the way, I'll guide you through the creation of a simple page in order to highlight how you can use some of the library's components.Read More…
  • Web Design
    HTML/CSS
    Foundation for Beginners: Joyride, Interchange, Tables and PanelsFoundation thumb retina
    Let's further add to our Foundation arsenal by looking at the Joyride plugin, which helps guide users through your sites. We'll also look at pricing tables, standard tables and interchange; a novel responsive image tool. We'll cover the implementation of these features with a simple template which you can download and play with.Read More…