Do you have web hosting, a text editor, and an FTP client?

In the first lesson, "Make a Website", we covered all the tools you need to get started. If you've got a text editor, an FTP client, and web hosting - you're ready to start with this lesson!

Learn HTML in 45 Minutes (Part 2)

This lesson expands upon the previous HTML lesson and aims to cover structure, forms, and tables.

Now that you know how to make a basic HTML website, we can now begin discussing how that site should be organized in terms of HTML structure. You may be thinking, "Why does the structure matter? As long as I can put what I want on the page, I'll be fine!" In a certain sense, you are totally correct! There is nothing inherently wrong about slapping everything into the HTML's body element and calling it a job well done.

However, consider the following case: you grab a newspaper and want to find the article written about your favorite movie. Much to your dismay, you find that the newspaper has gotten rid of all section titles, spacing, and identifiers. All that is left is the standard size text from left to right on every page, with no way to identify where one article stops and another article begins. This is similar to an HTML page without proper structure.

So, now that we've established that structure is an important, and often essential, element of website creation, we can move on to the fun stuff - writing some code! Let's review the basic structure of the HTML that you've seen so far:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First Website</title>
</head>
<body>
<h1>My First Website :)</h1>
<p>Hello world! This is my first website.</p>
</body>
</html>

In the above HTML, we have set up some basic structure by using the <h1> and <p> tags. However, these do a very poor job of structuring content, since they generally are not meant to contain other, different, elements within their scope.

The popular solution is to make use of alternative tags, which serve to dictate the structure, or flow, of a document. Some of the more popular options are <article>, <section>, and <div>. But what are the differences?

Want to know more about HTML structure?

To learn more about the three elements discussed above, other popular structuring elements, or pretty much anything relating to HTML, you can check out the official w3 documentation here. Or, to skip directly to the relevant structuring information, click here.

Now, let's see how these structuring elements can be used in our HTML! Suppose we wanted to add on to our existing HTML website. Maybe we want to specify a particular area for the greeting (i.e. the content of the existing <h1> and <p> tags). We could easily do that with a <section> tag like below:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First Website</title>
</head>
<body>
<section>
<h1>My First Website :)</h1>
<p>Hello world! This is my first website.</p>
</section>
</body>
</html>

Great! Now we have that section both cleanly and easily identified. Suppose we then wanted to have our site be dedicated to our favorite quotes. Since the quotes don't really depend on one another, but are each individually identified as quotes, what HTML element might we decide to use to structure each individual quote?

Exercise 1:

Which HTML element should we use to hold our individual quotes?

Which HTML element did you end up deciding on? If you chose to use the <article> element, congratulations! That probably would have been my choice, too. If you chose another element, don't worry - you weren't wrong either! In fact, there are reasons for and against any of the possible HTML elements. What's important is that you weigh the pros and cons of each option and understand why you chose a particular option.

Consequently, I'll explain why I would choose to use an <article> element. The individual quotes are similar to newspaper articles in that any one could be removed without affecting the meaning or understanding of the other quotes or the website as a whole. If we choose to use the <article> element, we get the following:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First Website</title>
</head>
<body>
<section>
<h1>My First Website :)</h1>
<p>Hello world! This is my first website.</p>
</section>
<article>
<h2>Wayne Gretzky</h2>
<p>You miss 100 percent of the shots you never take.</p>
</article>
<article>
<h2>Vince Lombardi</h2>
<p>It’s not whether you get knocked down; it’s whether you get up.</p>
</article>
</body>
</html>

Awesome - But wait! If we have a lot of quotes on our page, we will end up having a ton of different <article> tags on our page that are all directly within the <body> element. Suppose we wanted to later add other things to our website, but wanted to keep the quotes separate. Luckily, we can do that! We could use either the <section> or <div> elements discussed above to group these quotes. We may choose to use the <section> element since these quotes are are elements of a particular quote section. However, we may also decide that if we later add inspirational stories to our site, we still want them to be mixed in the quotes, rendering the quote section a little confusing. So, for the sake of flexibility, we will wrap the quote <article> tags within a <div> tag as follows:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First Website</title>
</head>
<body>
<section>
<h1>My First Website :)</h1>
<p>Hello world! This is my first website.</p>
</section>
<div>
<article>
<h2>Wayne Gretzky</h2>
<p>You miss 100 percent of the shots you never take.</p>
</article>
<article>
<h2>Vince Lombardi</h2>
<p>It’s not whether you get knocked down; it’s whether you get up.</p>
</article>
</div>
</body>
</html>

Now, we have a structure that sets up space for our introduction section and our quotes area, identified by the <section> and <div> tags, respectively. And as you may have noticed, a great thing about the structuring elements is that they are able to be embedded within one another, allowing the flexibility to structure and sub-structure to your heart's content!

Exercise 2:

  1. Try adding your own structuring elements to your website!
  2. Which ones did you choose? Why did you choose them?
  3. Are any of your structure elements embedded? Why did or didn't you choose to embed your structured elements?

Now that you've had some experience with structuring HTML in a clean and maintainable way, let's move on to learning about one of the most important HTML elements: forms! Forms allow websites to accept input, capture responses, hand responses off between the client and the server, and so much more. Take your favorite website, for example. Suppose it's one of the popular social media sites, like Facebook, Instagram, or Twitter. Each of these requires a login, right? Well, the login area is a form! Or perhaps you need to submit information for your online food order. Most likely, the company is using a form to receive your requested food!

In order to make a form, you first need to start with the opening and closing form tags, <form> and </form>, respectively. These tell the HTML document that everything you wrap within these tags is to be part of the form, as demonstrated below.

<form>
**content of the form goes here**
</form>

When it comes time to decide what should be included within the form, you have a myriad of options. One of the most popular elements within a form is the input element. As you might expect, the input element is identified with the <input> tag. However, unlike other elements that you've encountered before, the <input> tag doesn't have a corresponding closing tag (such as </input>) within the HTML standard. This is because, unlike other elements such as <p>, <form>, <section>, and so on, an input element should never have content outside of the tag, itself (we call this a void element). To see an example, of what this looks like, let's look at the code below.

<form>
<input type="text" name="textInput" />
</form>

From the example above, there are a couple of things to note. First, you'll see that unlike the <form> tag, the <input> tag ended with a "/>" rather than just a ">". While this is not required, this is often done for void elements in order to clearly indicate that the element is complete. Also, we have added name="textInput". This specifies the name attribute of the input, which allows the form to identify and use the information, which will be touched upon later. Next, you'll notice that we have added the type="text" within the input element. This is our first example of the way in which an input element can present itself! As you might expect, it allows this input to accept text, as you can see in the working example below.

However, the input element is not limited to just text input. In fact, there are tons of different input type attributes that can be used to better construct your form. Some of the most popular are listed below and include example code and a working example for you to test out (we have left out type="text", since it was already covered above).

Checkbox

Checkboxes are a great input type, since it allows users to select from a set of options that are predefined by you, the developer! In order to define the options, however, you need to add an extra element outside of each checkbox. Here, we have decided to use the <label> element, which is standard practice for labeling inputs within a form. Another benefit of the checkboxes input type is that the user isn't just limited to just one checkbox - rather, they can choose to click as many (or as few) checkboxes as they please. Test it out for yourself!

  <form>
  <input type="checkbox" name="inputCheckbox" /><label>Check me!</label>
  <input type="checkbox" name="inputCheckbox" /><label>Check me, too!</label>
  </form>
  

File

As the name suggests, the file input type allows users to upload a file. This is useful for any website that requires users to upload a profile photo, or deals with any filesharing functionality.

  <form>
  <input type="file" name="inputFile" />
  </form>
  


Be careful with file uploads!

While the file input type is incredibly useful, it should also be handled with care. Remember: any file they upload will then be present within your website's file system! This can cause problem including, but not limited to, your website running out of storage and the possibility of a user uploading a malicious file to your website. The main lesson: be careful and read up on proper file practices!

Password

Above, I mentioned that a popular use of forms was for website logins. You may have noticed that on most websites, the password is blocked out whenever you type something in. One way to accomplish this is through the password input type! It functions in the same way as a text input type, but hides the actual content behind black circles for security. Check it out below!

  <form>
  <input type="password" name="inputPassword" />
  </form>
  

Radio

The radio input type is another useful tool for giving your users options to choose between. However, unlike the checkbox input type, radios allow you to limit the user's selection to a single choice among multiple options. (Try it yourself below - you'll notice that you can only select one at a time! If you try to select the other one, it unselects the first one you chose!) The key to enabling this functionality is to make sure that each radio button (that you want to have as a particular option) has the same name attribute. In the example below, both radio buttons have name="inputRadio". This guarantees that for all radios with a name of 'inputRadio', the user will only be able to select one.

  <form>
  <input type="radio" name="inputRadio" /><label>Choose me!</label>
  <input type="radio" name="inputRadio" /><label>No, choose me!</label>
  </form>
  

Exercise 3:

  1. What happens if you forget to include the proper name attributes on the radio buttons?
  2. Suppose you are at an ice cream shop's website and you can choose a type of ice cream and a single topping. How would you go about creating this using an HTML form and radio buttons?

Remember to try the exercises yourself before looking at the answer!

For the first question, the answer is that the radio buttons will fail to guarantee that only a single option is selected. If the radio buttons have different names (or no names at all!), you would be able to select them all.

For the second question, there are potentially many solutions. The one I suggest is that you create a form with two different sets of radio buttons - one set for the type of ice cream and one set for the type of topping, which you can see an example of below.

  <form>
  <input type="radio" name="iceCreamRadio" /><label>Chocolate</label>
  <input type="radio" name="iceCreamRadio" /><label>Vanilla</label>
  <input type="radio" name="toppingRadio" /><label>Sprinkles</label>
  <input type="radio" name="toppingRadio" /><label>Chocolate Chips</label>
  </form>
  

You'll notice in the example that by naming the type of ice cream inputs as 'iceCreamRadio' and by naming the type of topping inputs as 'toppingRadio', we were able to accomplish our goal! This guarantees that the user can only choose between chocolate and vanilla for the type of ice cream and between sprinkles and chocolate chips for the type of topping, while still allowing them to choose both a type of ice cream and a type of topping!

Reset

As the name suggests, the reset input type just resets, or clears, all the data inputted into the form where it resides. This is useful in cases where a user may want to just start from scratch in order to avoid having to manually clear the form for him/herself. Too see this in action, enter something in the text input below and then click the reset button!

  <form>
  <input type="text" name="inputText" />
  <input type="reset" name="inputReset" />
  </form>
  

Submit

Finally, we come to the submit input type. The submit input type is the button that allows users to submit the form (as the name suggests), which will include information about all of the input elements within that form. Try it out yourself below!

  <form>
  <input type="text" name="inputText" />
  <input type="submit" name="inputSubmit" />
  </form>
  

Uh oh! If you tried the above example, you may have noticed that nothing really happened (save for a page "refresh"). This is because we haven't told the form what to do yet upon submission. In order to do this, we need to add the following two attributes to the form element: action and method, which gives us the following code:

<form action="/formSubmit" method="GET">
<input type="text" name="inputText" />
<input type="submit" name="inputSubmit" />
</form>

What the action attribute does is to instruct the website to go to the path indicated (in this case, /formSubmit) in order to handle the data being submitted. This then requires that you actually have the specified path defined and an appropriate file capable of handling the form data. (This will be covered more in future lessons.)

As for the method attribute, this just instructs the website as to how the information should be sent. In this case, we have specified to send the data using GET. Most of the time, you will see one of two options being used: GET or POST.

Want to learn more about GET, POST, and others?

If you're curious as to what GET and POST do, along with the other options that may be used to send or receive data, you can check out the official Internet Engineering Task Force (IETF) documentation, found here.

In order to give demonstrate that forms do submit the values inputted, I have included a small demonstration below. But first, take note of the URL of this page. Remember it? Okay go ahead and submit the form!

<form action="" method="GET">
<input type="text" name="name" />
<input type="submit" name="inputSubmit" />
</form>

Nothing happened, right? Actually, wrong! Check the URL again! You should now see that at the end of the URL, there is now a section at the end, which looks like ?name= followed by whatever you typed in the input field (hopefully your name). But how did it work, exactly? Although the details of this will be covered in later lessons, I'll give you a brief answer for now.

First, you'll notice that we stayed on the same page, but just added on to the URL. This is because we specified the form action to be empty (action=""), which keeps us on the same page as before. Then, you might ask how it knew that we inputted a name. This is because of the name attribute on the text input that we submitted. You'll notice in the example HTML that it states name="name". If we were to change this to name="somethingElse", then we would see that ?somethingElse= would be appended to the URL upon submission, rather than ?name=. Essentially, the form submits all of the input elements and identifies the data it submits by whatever name attribute you specified for each input type.

Exercise 4:

  1. If we have multiple inputs in a form, how do each of them get displayed upon a form submission using the GET method?
  2. What happens if we forget to add a name attribute to an input element and then submit the form?
  3. (Note: These questions are not answered below! Researching questions yourself in order to find answers is a useful skill that should be practiced and refined!)

Great! So now you have a general idea of how to create forms with a variety of content, as well as the basics of form submission. Now, we'll turn to the topic of HTML tables. Luckily, HTML tables are quite a bit less complex than forms and are relatively easy to construct.

Styling tables

In order to include borders for the tables shown in this lesson, I have added some CSS. For those willing to wait, they can learn how to create this CSS (and other, similar CSS) by looking at our CSS tutorials. However, if you are just curious what the code used to add the borders is, I have included it here:

table, th, td {
  border: 1px solid black;
}

To begin, we'll introduce the table element, <table>. Easy, right? Now suppose you wanted to add some data to the table (after all, what good is a table without any data?). It's important to know that HTML constructs tables by rows first, then columns - or perhaps more accurately, by creating rows and then specifying which cells are in each row. To create a row within an HTML table, you'll use the <tr> element and to create a cell within the row, you'll generally use the <td> element.

<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>
Cell 1 Cell 2
Cell 3 Cell 4
Cell 5 Cell 6

With this information, you can easily create a table like the one you see above, by using the corresponding code. However, this is pretty plain. Suppose we wanted to add title to the columns in order to tell us more about what each column includes as well as to make it more clear which cells are headers for the columns. No problem! We can make a slight alteration to our code, as shown below.

<table>
<tr>
<th>Cell 1</th>
<th>Cell 2</th>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>
Cell 1 Cell 2
Cell 3 Cell 4
Cell 5 Cell 6

By changing the first row's elements from <td> to <th>, we were able to specify that those cells were column headers, which then made them bolded. While this is great, there is actually a better way. What we can do is actually set up a formal structure within the table, as you see below:

<table>
<thead>
<tr>
<th>Cell 1</th>
<th>Cell 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</tfoot>
</table>
Cell 1 Cell 2
Cell 3 Cell 4
Cell 5 Cell 6

Here, we introduced the <thead>, <tbody>, and <tfoot> elements. Although these elements do not change the appearance of the table, they serve to structure the data in a meaningful way for you, the developer. By using the <thead>, you are able to clearly demonstrate that all cells within the scope of the <thead> are part of the tables header, and are most likely column titles. With the <tbody>, element you are stating that all elements within make up the bulk of the data represented by the table. Finally, the <tfoot> element allows for the clear understanding that all data included is some type of result, conclusion, or calculation data derived from the <tbody> data.

Now that we have the basics of the HTML table, suppose you wanted to add a caption to the table, but don't want to use another HTML element outside of the <table> scope. You're in luck! You can use the HTML <caption> element to include a caption for your table, as you can see below.

<table>
<caption>Caption here!</caption>
<thead>
<tr>
<th>Cell 1</th>
<th>Cell 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</tfoot>
</table>
Caption here!
Cell 1 Cell 2
Cell 3 Cell 4
Cell 5 Cell 6

The benefit of the table caption element is that it automatically resizes the caption text to fit the width of the table. However, this could lead to some unintended results if your table isn't very wide, so be careful!

Exercise 5:

Suppose we had a table that needed to have data span multiple cells, either by row or by column. Any idea how this might be accomplished? (Search online for the answer!)

Hopefully, if you searched online you were able to find out that there are attributes that allow you to specify how many cells you want a particular cell to span in either the horizontal direction or vertical direction. These attributes are aptly named rowspan and colspan. First, let's look at a case where we want to span multiple rows.

<table>
<caption>Caption here!</caption>
<thead>
<tr>
<th>Cell 1</th>
<th>Cell 2</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 5</td>
</tr>
</tbody>
</table>
Caption here!
Cell 1 Cell 2
Cell 3 Cell 4
Cell 5

As you can see, by using rowspan="2" on Cell 3, we were able to have it span multiple rows; then, when we added Cell 5, it automatically filled in the missing section. So, unlike the examples above, Cell 5 did not occupy the bottom left position in the table. Rather, it moved to the bottom right of the table, since it was the only open space in its row. We see similar things happening when we span multiple columns.

<table>
<caption>Caption here!</caption>
<thead>
<tr>
<th>Cell 1</th>
<th>Cell 2</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</tbody>
</table>
Caption here!
Cell 1 Cell 2
Cell 3
Cell 4 Cell 5

As you can see, colspan allows Cell 3 to now span multiple columns, thereby occupying its entire row in this case. As a result, if we wanted to maintain the two columns per row for our table, we had to move Cell 4 to the next row.


Great job! Let's review what we've covered today:

Congratulations for completing this lesson! Hopefully now you understand how to use HTML more effectively. Make sure you try each of the exercises in this lesson and explore a bit for yourself online in order to solidify your understanding of HTML structure, forms, and tables. Make sure to stay tuned for additional lessons!