We looked at the essentials of the HTML5 language in my post detailing the boilerplate, elements, comments and tags and we rounded that up by explaining divs, spans and attributes. Hopefully you got around to practicing and made some HTML documents of your own. If you didn’t, It’s never too late!
Advanced HTML: Where we stand and where we’re going
You may feel like you aren’t learning a lot, or that the pages you can design right now don’t look special or exciting (which is an understatement). However, don’t forget that we haven’t touched on CSS at all just yet. If you are not sure what CSS is, I recommend checking out this post where I explain it briefly.
Today we’ll be making big strides, and this post will be very long because of that, so get a cup of coffee and get ready! I will start with HTML tables, followed by forms and form validation. We’ll also talk about labels, which are exactly what the name implies, a caption for another item.
Let’s start with tables
As you probably know, a table consists of rows and columns which contain and display content. There are several ways of creating a table with HTML, but the method I will outline below is the recommended way to do it. The reason for this is that this method adds semantic meaning to your table.
Let’s take a look at a table I created in HTML:
<!DOCTYPE html> <html> <head> <title>iconicdevs.com Tables Demo</title> </head> <body> <h1>Lets create some tables!</h1> <table border="1"> <thead> <th>Table Head 1</th> <th>Table Head 2</th> <th>Table Head 3</th> </thead> <tbody> <tr> <td>Some data</td> <td>Mora Data</td> <td>Extra Data</td> </tr> <tr> <td>Iconic</td> <td>Developers</td> <td>Is</td> </tr> <tr> <td>An</td> <td>Amazing</td> <td>Blog</td> </tr> </tbody> </table> </body> </html>
It starts with the <table> tag. This tag should encapsulate all elements for your table, which include the headers, rows and columns. When creating a table, you can give it a simple border as I have done, however, normally you would style the table using CSS and not using HTML.
The table head
Next up is the <thead> tag. If you would take a look at this CodePen, you can see the results of the above HTML markup. The <thead> tag encapsulates the table headers. These are the bold headers in the first column. You use these headers to define what content is expected in the row. For example, if your table is about Pokémon, you could have headers for their name and type.
The table body
Then comes the <tbody> tag, which as you can probably distillate from its name, encapsulates all other elements for the rest of the table. After that, you finally get to the content. The <tr> tag, which you could read as table row, defines how many rows your table will have. Within each row, you can add content using the <td> tag. You can fill this tag with normal text, but also with hyperlinks and images.
Like I mentioned in earlier posts, the best way to master HTML is not only by reading these posts, but also by practicing with everything you learn. So let’s get to it! With everything you have learned up until now, try to recreate an HTML document from the image below (reverse engineering).
Some notes in regards to the exercise: these are the images of Bulbasaur, Charmander and Squirtle. As for the links in the “Evolves Into” column, it doesn’t matter where they link to, as long as they work. Lastly, you’ll probably run into a small inconvenience with the images when you’re done. Try to figure out how to resolve it once you come across the problem.
When you’re done, feel free to share your solution in the comments using a CodePen!
Creating forms with labels and validation
Another important element of HTML is the forms element. Forms can be used for all sort of things. There are contact forms, registration forms and login forms. Take a look at the following code for a simple registration form:
<!DOCTYPE html> <html> <head> <title>Let's make some forms!</title> </head> <body> <h1>Login</h1> <form action="http:/iconicdevelopers.com" method="GET"> <label for="username"> Username: </label> <input id="username" type="text" placeholder="Enter some text." required> <label for="password"> Password: </label> <input id="password" type="password" placeholder="Enter your password." required> <label for="email"> Email:</label> <input id="email" type="email" placeholder="email" required> <input type="Submit" value="Submit"> </form> </body> </html>
You can view the same code in this CodePen to see what the form looks like, or you can copy and paste it into a text editor and play with it yourself. Whatever you choose to do, let’s go through the code first.
Explaining the code above
Everything starts with the <form> tag. The <form> tag encapsulates your entire form, including the labels. Within the <form> tag, there is an action and a method. The action is the URL that processes the information that is entered into the form. The method refers to the method a browser uses to submit the form. There is the POST method, which sends the data to a server, and a GET method, which sends the data entered in the form as a URL variable.[ecko_alert color=”blue”]For now, the most important thing to remember is that both the action and method attributes don’t matter. In order to actually use these specific attributes, you need a database to store and process the information in. This is advanced material outside the scope of HTML and CSS and will be explained in a future post.[/ecko_alert]
Next up is the <label> tag. A label is simply a caption which can be positioned in relation to another element. In this example, I made three labels captioned “Username:”, “Password:”, and “E-mail:”. The real interesting part in this example is the <input> tag.
The <input> tag is used to create interactive controls for web-based forms in order to accept data from the user. In my example, you’ll find an ID, which is the name for the input. It does have more uses though, but we’ll get to that in the near future. You’ll also find a placeholder. The placeholder represents the text that you see inside of a text box and is usually used to show what kind of input is expected.
Input type and validation
More important than the ID and placeholder is the type. The type defines which input can be entered and is expected. For example, if the type is “button”, then a clickable button will be made. If you use the type “mail”, a text box that accepts only an email is created, and so forth. For a complete list of all possible types with the <input> tag, check out this attribute reference.
We have missed one important piece of markup. Take a look at the last part:
<input id="username" type="text" placeholder="Enter some text." required>
The part right behind the placeholder is called the “required” attribute. It specifies that a user must fill in a value before submitting a form. This is what is called validation. Validation checks whether or not (a part of) the form has been filled in (correctly). If not, the user will be alerted and the form won’t be sent. This is used pretty much everywhere. If you try to register on Facebook, but don’t fill in your email, it will tell you that it is required.
It was a long post, but hopefully you got a lot out of it! The best thing to do now is to practice with the many different input types and create some forms of your own. Also, make sure to combine it with what you’ve learned in my earlier posts and you can create a great HTML page.
Like always, feel free to show me what you’ve come up with and leave a comment below!