Unlike most elements, the image tag is a specific reference in your HTML document to an image on your website. It is more like an advanced link to an image file. The HTML image tag actually retrieves the image and displays it in your web page. However, unlike most elements, the image tag requires an attribute in order to display an image. The opening and closing tags are a unique case in the sense that they are combined, <img />. The primary attribute of the img tag is src=””, where you would put the link to the image in between the quotation marks. Of course, the image tag has many other attributes, but this is the most important one you need to know to get started.
Show an Image
Pretty cool huh? Now, you might be wondering what is this width=”200″. The width and height are both attributes of the HTML image tag. I try to only use one or the other as this permits the browser to resize the image correctly. If you used them both at the same time and they are not the proper dimensions, it will stretch or shrink the image. The src is the attribute we set to the link to our image, /images/smiley2.jpg
Important Alt attribute
The second most important attribute for an image is called the alt attribute. The alt attribute is only activated when an image fails to load. If you ever remove or lose an image from your website, the alt attribute will step up and display its value to the browser. Additionally, search engines cannot read what an image is all about, so search engines use the HTML image alt attribute to “understand” it. In conclusion, always set the alt attribute and set it to a value that tells the user about the image.
The HTML table tag has done wonders for the internet as a whole. However, tables are often used as grids or containers, which is not the appropriate use of HTML tables. Tables are not very flexible and are primarily intended to show tabular data. The tags of a table require more opening and closing tags than the average HTML element. Let’s look at an example to see:
Three separate tags are involved in creating an HTML table, <table>, <tr>, and<td>. The <table> is simply the encasing of a table. To identify a new row, which must come first, you should use the <tr> tag. Inside of the table row tag, you can specify columns by using the <td> tag. Remember that you can access all of the accepted HTML attributes of every element by clicking the w3.org reference in the HTML Attributes references.
It’s worth mentioning that you must structure the table and table tags properly. All tr must be opened and closed inside the <table></table> tags. The th and td tags must be opened and closed inside the tr tags. If you do this incorrectly, you will have one messed up looking table.
Table Headers
Sometimes when creating an HTML table, you might want the top row to stand out from the rest as a heading. All you need to do is replace the HTML table column tag, <td>, with a table header tag, <th>. It is entirely possible to use these multiple times different rows to have multiple “sections” in your table. Table headers also permit you to have better control of your CSS.
Merging Columns
Sometimes, you might want to merge two columns to display your data correctly in a row. All we need to do is use the colspan attribute of the HTML table. Let’s merge two columns in one row.
When writing any document, lists provide quick bursts of information in the most efficient manner. HTML Lists are no different when used in an HTML document. In a browser, there are only two types of lists, ordered and unordered. Ordered lists obviously have a predictable layout such as numbers or roman numerals. The standard for ordered lists is numbers, but you can always modify that in the CSS. Unordered lists are generally small black dots that can also be changed in the CSS. Lists require two sets of tags. The encapsulating tag is <ol> for ordered lists and <ul> for unordered lists. The element inside that tag is the <li> where your content will go in between the opening and closing tags of the that li element.
HTML Ordered Lists
HTML Unordered Lists
Pretty easy to understand there, but what if we wanted to have another level in the list? You can create lists inside lists. You would simply just start putting <ul> with internal <li> inside the previous <li> elements. Alright, maybe that is somewhat complicated… example please!
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.
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.
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.
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
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.
