Blancer.com Tutorials and projects

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.

Detroit Tigers
Chicago Cubs

Detroit Lions
Chicago Bears

<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: 

		<label>Name: <input type="text" size="30" /></label><br />
		<label>Email: <input type="text" size="30" /></label><br />
		<label>Date of birth: <input type="text" size="10" /></label><br />
	</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.

Name:

Male:

Female:

<form>
	<label>Name: <input type="text" size="30" /></label><br />
	<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.

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!