The 10 HTML Tags Beginners Aren’t Using
Tutorial Details
- Technology: HTML
- Difficulty: Beginner
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>.
<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
- Unordered List (ul)
- Ordered List (ol)
- 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. '(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!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Good tips, but don’t forget to close your tags (I’m looking at you #5, #8). I know you’re offering helpful snippets that might not include the closing tag (like in #9), but we want beginners to have healthy tag-closing habits. Every ‘p’ deserves a ‘/p’.
Cheers,
Rob
Hey Rob,
Thanks for pointing that out. We wouldn’t wan the to be lonely…
Shoot! Forgot the tags get stripped… let’s try it again.
Hey Rob,
Thanks for point that out. We wouldn’t want the ‘p’ to be lonely…
I think these are great tips for the beginners. So nice article.
I think I should use and tags.
Beginners coders should know about these useful things, specially headings tags and ASCII characters.
Nice post!
I fully agree with @Ignas.
Nice Article. Thanks very much.
Beginners?
Beginners???
I agree, but sub-titled, might also be “…and for those that have forgotten…”
:)
Great post, and reminders/checklist-in-the-making Dan, thanks!
Great! I’ll put this in my bookmarks for now to take a look at when creating my next site. In the 5th part, though, shouldn’t there be a in the example?
Oh, the site swallowed the tag in my comment. I meant an end to the legend-element.
Thanks! Came across a few I rarely use…a good reminder to keep those tags in mind…
Great! This is exactly what I needed when I was a beginner…
Good tips for beginners, but it’s also a good reminder to those of us who have been doing this for a while as well.
For the ASCII thing, WordPress converts all the inputted single quotes, double quotes, mdashes, etc… to xHTML valid ASCII chars. Its why WP rocks.
Just a note on label for HTML5.
“For the label element the browser should no longer move focus from the label to the control unless such behavior is standard for the underlying platform user interface.”
http://www.w3.org/TR/html5-diff/
Take it for what it’s worth:)
Hmm — I wonder why they changed it…
I’m a little confused as well on it. In the actual spec you have this:
“For example, on platforms where clicking a checkbox label checks the checkbox, clicking the label in the following snippet could trigger the user agent to run synthetic click activation steps on the input element, as if the element itself had been triggered by the user:
On other platforms, the behavior might be just to focus the control, or do nothing.”
Which suggests that the behavior is still there. When in doubt, go by the spec, I guess;)
Well, it is standard behavior on both Ubuntu and Windows to check or select the form element in question when its label is clicked or otherwise “activated” so it does not really concern me.
I would say that it is the only way that makes sense, especially for users who are not used to Mice HID devices or has musclemotorical skill problems.
Or just for kids like my smallest sisters that insist on to holding the mice on the diagonal and clicking with their thumb, it is a miracle that they can hit the 512px wide firefox icon on the desktop ;)
Great list! I already new all of them (except optgroup which is great!) but i rarely use half of them! So this was a great reminder!
Am I the only one who still feels weird about definition lists? I mean, it’s not kosher to use tables for anything other than tabular data nowadays, but definition lists seem to be a bit vague still. I’ve used them in the past to display awards titles and corresponding recipients (for example), but even then, I wasn’t sure it was ‘semantic.’ Of course, semantics are not a deal breaker for me, but I’d still like to be able to say where my work stands on the issue — you know, before I go out and grab one of those nice validation badges ;)
Grant, think of <dl></dl> as marking the beginning and end of a (perhaps quite short) glossary, <dt></dt> as a way to identify each entry in that glossary, and <dd></dd> as a way to identify the contents as the definition of the preceding term. A list of awards is not a glossary, and the lists of winners are not the definitions of each award.
So each award is a subheading, and the list of winners is a simple list under that subheading. Depending on the circumstances, there are two semantically appropriate ways you could format that information:
- Put the awards at one level in an unordered list and the winners at the next level down. (I think I would use this approach only if you have a few awards and each list of winners is fairly short.)
- Make the name of each award a heading at an appropriate level (one level below the preceding heading) and list the winners of that award in an unordered list. (I think I would generally use this approach.)
I was hoping I didn’t fall into this category…thanks for the reminder.
is that correct to put an input field inside a label field?
i always use the “for” attribute of the label element to address the correct input via it’s id.
like
Name
sorry, stripped out tags.
here it is the code (i hope)
<label for="name">Name</label>
<input type="text" name="field_name" id="name" />
Either usage is acceptable according to the official specification from the W3C. You can either make the association explicit (using “for”) or implicit by wrapping the form element within the label. Since I do quite a bit of work with complex layouts and Java frameworks like Spring, I tend to use the explicit version.
One important thing to note with implicit usage is, “When a LABEL element receives focus, it passes the focus on to its associated control.” So if you have a bunch of text between the label and form field, the form field receives focus and that can cause some confusing behavior if you’re using some sort of dynamic javascript functionality based on when the form field receives focus.
Hi Claudio, hi David,
Actually; if you can, have a preference for explicit label (Claudio’s example) than implicit label (encapsulated form element as seen in this article).
“The HTML and XHTML specifications allow both implicit and explicit labels. However, some assistive technologies do not correctly handle implicit labels (for example, First name ).”
More info : http://www.w3.org/TR/2008/WD-WCAG20-TECHS-20080430/H44.html
ps : Usually, explicit labels make also things easier to style with css :)
good article – a question – why do you put the cite inside the blockquote? as i understand it, the cite is a referance to the quote, not a part of it. is this something you consider a best practice, or is this something in the specs that i’m unaware of?
You’ve forgotten th tag, when you’ve been talking about thead.
Oops… – My bad. That was a typo on my part. W3C does state that the “td element is not allowed in the thead element.”
Thanks for pointing that out.
I’ll be aware of the tags stated above at next time HTML coding =D
great article! some of these tips are great for organic seo purposes!
Great collection of the basis. I would have liked to have seen the secret trillogy of DL, DT and DD but otherwise a fine selection!
Hey Babs!
***DISCLAIMER*** – This is how I have always remembered these and have not looked up proper definitions if they are true abbreviations… But here is what I think of with the DL, DT, and DD tags.
I think of them meaning:
DL = Definition List
DT = Definition Term
DD = Definition Defined
So I create my list (dl) and have my word / term (dt) that I am going to define (dd.)
Any help?
Hi Babs,
I read an excellent article some years ago who really well explain how definition list works :
http://www.pompage.net/pompe/listesdefinitions/ [FR]
The article is in french but it was a tanslation of this original article:
http://www.maxdesign.com.au/articles/definition/ [EN]
Hope that helps but I’m sure it will.
Hi Guys,
I know how these list definition tags work, for formatting of address information, FAQs and glossaries they are fabulous tags to use. I was just expressing my dissapointment that these underused tags weren’t listed in this article.
But thanks for the source materials – I’m sure they will help someone out there ;0)
Babs
Nice article. I’m sure there are a lot of “experienced” developers not using these tags.
Although, for reasons of an IE nature, I prefer not to wrap labels around input tags.
It’s always good to go back to basics. Great article!
When advising beginners shouldn’t you make sure your own examples have all tags properly closed instead of learning them how to write bad code?
Good tips for beginners. Well done :)
Just one thing though, in the table section you should also use the tag within the section insead of
Ahh tags didn’t come out. Should be the “th” tag in the “thead” section instead of “td”
This is a great list and it’s reassuring to see that I use all of these tags, and in much the same way that you recommend. My only gripe is that while you outline how to implement the various tags for table headers and footers, you neglected to use table heading (<th>) cells! A better table would look like this:
<table>
<caption>Inventory List</caption>
<thead>
<tr>
<th scope=”col”>Item</th>
<th scope=”col”>Qty</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope=”row”>Sum</th>
<td>7</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope=”row”>#1</th>
<td>3</td>
</tr>
<tr>
<th scope=”row”>#2</th>
<td>4</td>
</tr>
</tbody>
</table>
I must have entered this comment concurrently with TiGR and Ed Moore’s similar remarks, because theirs hadn’t appeared when I wrote it. Glad people are on the same page, though!
This is an excellent list of tags and their uses, some of which are completely new to me. The examples really make it clear how and why to use them.
The only question I have is why does the footer need to be rendered before the body rows? Is there a reason for this?
Good question.
The only reason I am aware of is that W3C states it. Nothing like mindlessly obeying rules right?
All I know is that it forces the browser to render the footer row before the tabular data. Here is W3C’s page for it:
http://www.w3schools.com/html5/tag_tfoot.asp
I believe this is due to how tables are rendered in print design, with the header and footer on every page. Maybe it’s a carryover from that industry? By placing the header and footer before the body, you can determine how much area is needed for each, so that as the rows in the body are processed, you can take as many pages as necessary to print the complete table, with a header and footer on each page. Obviously the idea of “pages” doesn’t really translate to the web (at least not in the sense of 8.5″ x 11″ pages), but perhaps browsers load the header and footer first, then insert rows as the tbody is processed.
I would like to add that adding Comments to your html is good practice, but also makes it easier for someone to scrape your site.
I’ve had trouble with thead, tbody and tfoot across browsers. I forget which was the offender specifically but I think it was IE7 and below. You can still use the tags, just don’t use them to apply any styling or it will simply fall off in older browsers. It sucks because these tags make a lot of sense.
Nice article. I always try and use html comments especially when closing a div. This is even more helpful if you are using a cms like WordPress and in some cases the opening and closing div tags are in separate template files.
Nice article.
I guess beginners often missed the DOCTYPE declaration too which is very important.
Nice point Tashi.
I can remember when I was just starting out saying to myself: “I don’t know what this is… I don’t think it does anything. I’m just going to leave it out…”
*Smack! Oh learning the hardway.
Actually, the DOCTYPE is largely unimportant. It needs to be there and contain the string ‘html’, but other than that the browsers don’t really care.
This is a nice list. I believe that while you point out proper use of table tags, but I feel that it’s a bit overkill. tags with tags are spotty for styling and add additional bloat to tables in my opinion. Another thing I notice a lot of beginners doing is creating classes for everything instead of acknowledging the ability to “stack” classes. Perhaps that is for a different discussion though :)
I agree with you on the tables. You can also get very similar functionality by using the TH tag and TD tags correctly without the THEAD and TBODY tags.
Stacking classes is a tough one, with years of IE6 (particularly things like lack of working CSS display property) and the templating engines of CMSes, a lot of people have become accustomed to generally writing HTML without any semantic context (just DIV soup instead). See also: people who use DIVs and the float property to make “tables” because they think that tables are not allowable at all in modern web design.
Sorry, I did not insert the tags properly. Correction: <tfoot> and <tbody> add additional bloat to tables.
It may seem like bloat, but these tags actually add semantic structure to the table. You don’t necessarily need a footer, but if you’re properly using tables to display data, then a header is almost universally necessary to identify the column headings. Per my previous comment (which has an example of a properly formatted table), you should also identify which cell in a row is the associated heading, then use scope attributes appropriately. At the very least, these semantic tags provide useful information to individuals using assistive technology (e.g. screen readers), which can use them to identify the page contents more easily. It’s just good information design.
I think this useful for beginners and senior coders / developers… simply because it is well outlined and points where and how to use it. Keep in mind that there are a lot of backend developers who are asked to do some frontend development once in awhile and believe when I say php / java is easier than html for those… I know it because one of them :P
Great review for the new and experienced!
Also, I believe Pieter was trying to be helpful and not sinister by pointing out that “#5 and ” is missing a closing tag.
No harm, no foul!
Hmm, did anybody else notice that clicking the label for the text input doesn’t plop your cursor in the input box for #6 in Google Chrome? Now, it might be because I’m running 6b, but I don’t see this as a problem.
I loathe THEAD / TBODY / TFOOT. Don’t get me wrong; I understand the principle for their existance- I just feel that they add an unnecessary cluttering to table structure. It’s like tables have become their own little self-contained pages within a larger HTML document and that just doesn’t sit right.
Recently I’ve started using FIELDSET and LEGEND in my form designs; absolutely love them both. They just provide such a near-effortless way to organize forms and break them down into more easily manageable sections (from a user perspective)
I recently had a friend show me an ASP project he was working on where his form was fairly long, and not really stylized at all. A few fieldsets later and I showed him how his form could be broken down into categories of information, and what was an unwieldy beast became a very understandable and much more friendly kitten of a form.
Good stuff. A similar article on CSS would be nice. We’re beginners at everything you know! :)
Agreed with Arieh. Blockquote with site is not correct usage. You’ll notice that Blockquote gives you the quotes which go around your quote, yet you’ve added your own quotes and your citation ends up being part of the blockquote’s quote.
The main difference between the two (without using CSS) is that Blockquote is intended for longer quotations and indents the text from both the left and right sides of the coloumn.
I’m not sure why you think that the BLOCKQUOTE attribute ‘gives you the quotes which go around your quote’. The only thing blockquote does by default, is indent the entire contents within it by a tab or two. Anything else you see is because of CSS.
really I am beginner and its very help full article
thanx 4 sharing….
Good tips for beginners, as well as pro.
I’m now a daily visitor of net tuts, our team learned lot from you guys…
Hello
Nice article
I agree with William Murray, the semantic of the table exemple is not good.
–TABLES –
I see people griping that thead, tbody and tfoot add bloat to tables, but being a coder, I find them handy for things like addressing different sections of tables in jQuery.
As for styling, I try to only style th and td … another handy tip when styling tables is to remove cellspacing and only use padding, so borders are consistent and non-breaking.
– LABELS –
For coding purposes, explicit label tags are better. For example $(“label”).attr(“for); can be useful.
– FIELDSET / LEGEND –
Great replacement for containing forms within DIVs.
I’ve no idea where you got this impression from but you certainly shouldn’t need to substitute characters for their entities (particularly those that fall into the ASCII range) when using a document character encoding which reflects that of the content (e.g. UTF-8). Lets see how nettuts handles un-entity-encoded characters: Ä ä Ü ü ß Я Б Г Д Ж Й Ł Ą Ż Ę Ć Ń Ś Ź (view source, it might convert them… or not).
Really good to know ASCII.
Good article for beginners. Using headings (h1,h2,h3,h4,h5) correctly is VERY important from an accessibility/SEO standpoint. Think of your headings as an outline to your entire page. Imagine the content completely hidden and only the headings show up. Would your site make sense? If not, re-think the heading text. Screen readers will appreciate it.
I too think using HTML entities for everything is not perse a good thing. If using entities is needed, it often stems from not having your encoding setup correctly.
Using entities and ignoring characters outside of US-ASCII would then cause the developer to ignore the encoding issue, which might in the future turn into security problems (or further encoding problems).
In addition to that, these entities are illegal in normal XML documents, so it could become harder to re-purpose (parts of) your html for other types of documents.
So, in short.. using entities (yes that’s the name) other than < > & and " is in my opinion a bad practice.
100 push-ups for you!
thanks for the article, good point at the element, really could use it more myself :-)
r.