Div and Span Tags

Div tags and span tags are very common HTML elements that are growing in popularity due to their flexibility. HTML div tags are more specific for organizational tasks like setting up the layout of your page, which are preferred over tables because of their fluid like nature. Span tags are used more to permit customization of text and are often used inside other HTML elements to customize a certain piece of content from the rest. For instance, if you see my green text that refers to code, it is a span tag. The internal layout of this page is created with div elements.

HTML Div Element

The div element is a block level element, much like the paragraph tag. However, like I mentioned above, the div is more for creating internal structures in your document. Let’s see what in the heck I am talking about.

Example
<div> I am a div!</div> 
<div> Me too!</div> 
Result
I am a div!
Me too!

HTML Span Element

The HTML span element is an inline element, which means that it can be used inside a block element and not create a new line. If you ever want to highlight some text inside a paragraph, wrap that text in a span tag and give it a class. Span tags are often used to incorporate a specific CSS style to differentiate certain parts of content.

Example
<p> Something here is <span style="color:#900;"> special</span> , but which one?</p> 
Result

Something here is special, but which one?

The span tag is inside the paragraph tags, and I added the style attribute to the span element that tells the browser to show the text as red. Remember it is not ideal to embed styles inside the body, but it illustrates my point. Instead, I would typically create a class for a specific purpose, but we will get to that in the CSS tutorials.

References

Forms

HTML forms could have their own category because they have many elements that have to work together in order for the form to work. Forms are the primary way users pass information to the server. The HTML form is encapsulated by the <form> tags and all of the inputs will fall in between the opening and closing form tags.

Forms are extremely useful because of the web 2.0 movement when sites became more and more user driven. Believe it or not all of the tutorials and categories on this website were inputted by forms that I created. If you have ever heard of content management systems (CMS), you are currently reading the results of my own construction of a CMS that operates with multiple forms and more complicated stuff (We will get to that later).

Now don’t get too excited. Since this is a HTML tutorial, our forms will be virtually useless. You generally need a server-side language like PHP, ASP, or ColdFusion to do something with the user’s inputted data.

The Many HTML Form Inputs

Like normal, we won’t cover them all, but we will get you into the swing of things.

  • Text Fields – Allows the user to input text data in a one line field
  • Radio Buttons – Allows the user to select one option from multiple options
  • Checkboxes – Allows the user to select many options from multiple options
  • Submit Button – Allows the user to send the data
Example
<form> 
    Your name:<input type="text" name="yourName" />  
    <input type="radio" name="group1" value="1" /> Pick me! 
    <input type="radio" name="group1" value="2" /> No pick me! 
    <input type="checkbox" name="checkBox1" value="1" /> Pick me! 
    <input type="checkbox" name="checkBox1" value="2" /> Pick me too! 
    <input type="submit" value="Send Data"/> 
</form> 
Result
Your name: Pick me! No pick me! Pick me! Pick me too!

Not the best looking form, but it will do. Typically, the form tag will have several attributes including the name, action, and the method. The name attribute is only to differentiate one form from another on the page. The action attribute is set to the page where you will pass the data (generally, this will not be an HTML page). Finally, the method attribute will determine how you want to send the data. Don’t worry about this for now.

Text Field

Let’s get into the inputs. You probably already noticed that they are all defined with an input tag and different type attributes. Technically, there is a textarea tag for multi-line text inputs that is not in an input tag, but we are not going to cover it in this tutorial. The first input is one of the most common input type attribute values, the text type, which is short for text field. It is fairly simple to implement, but you should definitely name it so that you can tell it apart from any other text fields in the form.

Radio Buttons and Checkboxes

Form radio buttons and checkboxes require their own explanation. Radio buttons are abstractly thought of as groups where we must concretely type them in with the same name attribute as their brother to make them a family/group thing. If you didn’t give them the same name you would defeat the purpose of a radio button, which is too present multiple options but only allow one to be selected. Put the input type set to “radio” in order to tell the HTML document that it is a radio button. Another attribute that you should give to the radio buttons is the value attribute. Your server will receive this value from the user. Checkboxes are the cousins of radio buttons. However, a user can check as many checkboxes as they like. You don’t have to name them the same, but when you get to processing the data on the server-side, you will be glad you did.

Submit Button

Last but not least, is the required submit button. Setting the type attribute to “submit” will give you the very powerful command to send the data. It is recommended to only have one submit button and you should always assign a value to it. The value attribute shows the user text and it is also the value sent to the server. Whew! Take a breather, you earned it.

References

Fieldsets

One of the most overlooked tags in HTML is the fieldset tag. If you have been reading these tutorials, you can see that I love the fieldset tag in HTML. There are a few reasons why the fieldset tag is so great. One of the reasons is that it creates a clear division of content. So, I provide examples in these tutorials, which means I need to show you that the example is different than the rest of the text. Using a fieldset, I create a box around some content. Another great reason is that I can label the content using some important identifier (legend tag). You might notice in the tutorials that I use fieldsets with legends for examples and results so that you can easily see the difference between them.

I honestly have no idea why websites do not use HTML fieldsets as much as I do. For those users with visual impairments that need to use a screen reader, fieldsets provide the same benefit as the label element in a form tag. Also, I expect fieldsets to rise in popularity as they are so effective at classifying content. I suspect that fieldsets might contribute to the future of the semantic web as they can give additional context to the content inside the fieldset.

Fieldsets are different from div tags, but they are more similar to tables without the table’s annoying static structure. Tables can have headings that allow users to understand what a particular row or column is describing. Well, the legend tag inside a fieldset is exactly like a table header. The legend tag contains the word example or result in my tutorials, which tells you what is in the block of code. How much more annoying would it have been if I just used a div without labeling any of the content with a legend or a heading tag? You probably would not know the difference between my examples and the results of those examples in action. I promise you that fieldsets are extremely useful in terms of usability and design. Let’s see how to create the HTML fieldset with a legend:

Example
<fieldset>
    <legend>I add context to what is below me</legend>
    Oh,  the irony of using a fieldset to show how to create a fieldset in HTML
</fieldset>

I must admit it is a little confusing for me to explain fieldsets to you using a fieldset, but I am certain that the fieldset structure will aid your learning process. Just like most other tags in HTML, the fieldset tag has an opening and closing tag. The fieldset tag is different in that it has an internal legend tag. As I said before, the legend tag tells the user about what is in the fieldset. After the legend, you can include any content you would like. I also have found these useful to use in forms for the very same reasons I listed at the top. Remember that your users are the most important thing about your website. Make it easy and organized for them to read. They will thank you for using fieldsets and legends.

HTML Quiz

The standard HTML Quiz

HTML documents are core of all web development. The HTML quiz was created for you to test how well you understand the markup element’s and attributes. The quiz is relatively easy with no major surprises, but it will be able to determine if you have a core understanding of HTML. After you know the basics of HTML you can move onto the CSS tutorials and complete the CSS quiz.

Start the HTML Quiz

HTML Tests and Exams

Currently, we only have the standard HTML quiz that is not intended to be a professional test. In the future, there might be the possibility to integrate a testing system into After Hours Programming, but we are not currently working towards that goal.