HTML Essential Tags Part 2

Welcome back to Educator.com.0000

This lesson is going to look at a couple more of the most important tags, in just an introductory way.0002

We are going to get into more depth with tables, lists, and forms.0010

This is the basic structure for a basic table.0019

This code here would have worked all the way back, as far as HTML3.0025

And it is not very semantic, in terms of being descriptive of what this content is, but it does have semantic meaning already built in.0032

Well, first of all, you should see hints, in the name of the element (the table element): tables are for tabular data.0045

Think in terms of charts, or like a multiplication table.0055

There is a really bad habit that Web developers have been having, of using tables to structure the layout of a document,0059

which is not tabular data; so it is non-semantic, and it has caused some problems.0066

So, don't do that; use tables for tabular data when you have charts.0072

The way that you write a table is: you start, always, with this table element.0077

And then, you have one or more table rows, and then each row has cells in it, which you mark with a table data element.0083

This table right here in code would look like this.0093

You can see: Content1, in this cell, is showing up right here in this cell here.0097

And this entire table row corresponds to this entire row here.0105

A row is horizontal, and a column is vertical.0112

Content3 and Content4 are down here, clearly.0116

The meaning of this is limited, in that it doesn't explain what the relationship between these are,0124

except that they are in rows and columns, and that they are in a table (so it is tabular data),0133

and that they are in individual cells, and the data of the cell is within these elements.0138

If we want to do slightly more semantic tables, we can get more advanced.0146

Before we go to that slide, let's look, really quickly, at the code I have prepared.0152

This is a simple table, and I will just show you, so that you can tell where and how to add in it.0156

Say we want to add an additional row; I'll copy that and then paste it, and we could add them in here.0165

And then refresh, and we have added a row quite simply.0178

Now, the way to add a column is: you can't just copy something and paste it--you have to add a new table cell to each row,0185

because each one of these rows is only two columns wide right now, so to add the third column, we have to add the cell to each row.0195

We would add it right here, for example; let's call this one New; and then here.0205

And then, actually, let's save and show what happens when you don't add the column to the last row.0223

There is no column cell there, so there is no cell, even though the row and the column make it so that there is a little space there.0231

Let's add it in; so, we have three new cells in the new column.0246

You probably saw right here that I have a multiplication table right here, as well.0262

This is the basic outline, where you have the numbers on the side, and then on the side here.0266

And then, as they correspond, you can get the value (3 times 1 is 3).0274

And this is hinting toward the more semantic use, where I need to indicate that this level here and this level here0280

(although I can't select vertically)--this column here are headers to the table.0289

This is the code for that; and I have given that a caption, and this thead tag.0299

That takes us into the realm of slightly more semantic tables.0309

The semantic table is the same, except you add some more information.0315

You can start by adding a caption, right after the first table element.0321

And then, probably the most important thing is the thead element, which everything contained in here will be marked as: a head element, or head data.0326

So, head1 and head2 show up in bold, although they can be styled differently.0338

The importance is not the way it looks, but the fact that this is the part of the table that will define everything else in that row or column.0343

And then, th (instead of td) stands for table header; but it is basically the same as a td cell, except it has the semantic meaning that it is the head.0354

This is fairly simple; we just have two columns and two rows, and they vertically correspond down; so, Content2 is corresponding to head2.0366

And then, the caption describes the entire table.0379

It can get more complicated in that example I showed you, where we not only want the head level here--this first row--0386

to be a header, but we want the first cell in each row to also be a header.0395

We have this thead wrapping the table row, indicating that the entire row is a header.0401

And then, each of the cells has the th (table header instead of table data tag).0407

But when it gets to the tbody, which is the main content, we still need to indicate that the first item in each row is a header.0414

We can use this th element, and that tells us that each one of these is the heading in the table.0426

And if we want to get even more semantic, we can look at the caption.0441

I didn't save it correctly.0458

It shows up right down here; and the caption will describe everything in the entire table.0463

So, the caption actually applies to the whole table.0469

And there are some more complicated rules, but we won't go into it right now.0472

But for a semantic table, the basics are caption, table head, and a table body; and then making use of the table header (versus table data) cells.0477

Lists are very useful for automatically having the browser put bullets or numbering of lists that you have.0498

There are two different types that are most commonly used: ordered lists and unordered lists.0509

And they are just what they sound like: unordered lists would have no ordering, so they are just bullet points, usually.0514

And then, ordered lists--you think most commonly of things that are in a specific numbering, like 1 through 8 or something.0523

But it is defined just as any list where the ordering matters.0532

You could even have an ordered list for something as simple as...say you have a list of states that you have been to;0537

but you indicate, in the paragraph before the list, that the first item in the list is the state that you were born in.0545

That suddenly gives what would otherwise be a random and unordered list an ordering that is important,0554

because the first one needs to be the one that you were born in.0560

So, you would use the ordered list tags for that, even though it doesn't really matter beyond the first one.0563

And you can still style it so that it looks like bullet points, instead of numbering.0571

Let's look, really quickly, at what this looks like so far.0577

Here is the List Examples code; I'll pull it up in the browser.0582

Here is an ordered list, and you can see that I didn't put in any numbering (besides this content: item1, item2, item3).0592

But the browser has automatically numbered them for me.0600

And there are ways to set this to start at any number that you want, or you don't even have to have numbers--you could have bullets.0603

And an unordered list, similarly, adds bullets for you automatically.0611

The syntax is that you always have the <ol> to begin with, and that goes around all of your list items.0618

And then, you have to end the tag; so, the content of the list is all of the list items.0627

And then, each list item is usually put on its own line; and you put the content between the beginning and ending tag of the element.0632

And because the computer knows that the previous list item ended when the next one begins, the ending tags are not technically required.0641

So, if I refresh this, it won't break anything--nothing changed at all.0653

Even though I removed all of the ending list item tags, it is just that logically, as you go through it, this is the first list item;0657

and then, as soon as it reaches the next one, it knows that it has reached the next item.0667

So, it doesn't need to be explicitly told that the list item ends.0670

I usually put them in, just for the sake of consistency.0674

And I am always worried that there is going to be a bug or a syntax error that I let in.0679

And then, the closing tags will help your computer figure out what the correct semantic meaning should be.0685

In case there is a bug or a syntax error, I can recover gracefully.0694

And you can add as many items as you want, really.0700

And it goes all the way up to 9, because there are 9 items.0708

Now, you can nest lists: say you have three lists here--one of states, and then one of cities that are inside New York, and then another list of cities.0713

And you want these cities (which are cities that are inside New York City) to be seen as being underneath New York City.0729

And you want these cities, which are in New York (the state) to be seen as underneath New York, the state.0739

Right now, these three lists are all unordered lists, because their ordering doesn't matter.0743

The first one and the second one and the third one down here...they are just in a row.0751

But what you can do is take out and put it inside the list item for New York.0759

And I am putting it right here, inside of this closing tag (not on the outside, because that would put it in nowhere land).0767

Let's put it on the inside and save; refresh.0774

Now, the browser will automatically pick a styling that makes sense of this.0786

You have these nested underneath, and they are clearly cities in New York.0794

And you can nest as many times as you want, actually, as long as you are not causing syntax error.0800

This is another unordered list, and we are going to put it underneath New York City right here.0804

And this is tabbing it incorrectly for me, because it is a bit confused; but it should look like this.0818

When I save it, now Bronx and Manhattan correctly show up as inside New York City.0827

Definition lists are very similar to normal lists, except that they have a different semantic meaning.0850

They will define terms and then give the definition.0858

And you may not run into this a lot, but if you ever do have a list of definitions, this would be the correct syntax to use.0862

You wouldn't use the normal list elements, because we have these special elements specifically for definition lists.0870

So, this is pretty much the same: instead of ul or ol (for unordered list or ordered lists), you have definition list.0880

And then, instead of just having list items (there is only one type of list item in unordered and ordered lists),0889

you have two types of list items: dt and dd (Definition Term and Definition Description).0895

And you need to always have one of each, and then you can have as many definition descriptions as you want.0902

So, this would be like, for example, in a dictionary: you have multiple definitions for the same term.0909

And then, you can have as many of these terms in a list as you want.0914

In fact, let's create one right now: dl for Definition List; let's say HTML--we are going to define this term.0922

And then, the description of it is....0953

Let's go to refresh; and it has marked it up in such a way that the description is indented from the term.0972

And it is clear that there is some sort of interesting relationship here.0985

Other browsers may do it differently; other user agents may do it differently.0990

And just for the fun of it, let's add another term, just so that you can see what it looks like with multiple terms.0995

There we go.1026

Forms are essential for any time that you are going to be getting feedback from the user.1033

And they are pretty simple; there are just a few basic types of forms that you use all the time.1040

And they are all specified, actually, by an attribute in the input element,1046

except for the text area--and there is another one called the select element, with options.1053

But we will cover that in the advanced forms lesson.1056

For now, we will just look at these: you have where the form element begins, and then you put all of your inputs inside of it.1062

And the types that you will see most often are text, radio, checkbox, and submit.1071

You are probably familiar with them already; they look like this.1079

This is a text box; this is a radio button; and a check box.1082

The difference between these is that the radio buttons--only one will be selected, whereas in the check boxes, you can select multiples or none, usually.1088

Text area is the larger one, and Chrome actually lets you size this; and you can usually use CSS to resize it, as well.1096

And then, the submit button looks like this.1105

You can also use the button element, which is an input element and needs a value.1116

If you ever need a button, that is the element for that.1141

Now, this is the way that, in HTML4.01, most forms will show up.1147

But HTML5 has introduced a lot of new functionality that can take it to the next level.1153

You can use either for beginning; you might want to just stick with these simple ones and not worry too much about getting into the more advanced HTML5 syntax.1160

But if you wanted to, you can go into HTML5 code and do some more advanced things.1170

Here, we have labels for each of these inputs that are specified in the code with the label tag.1177

And the label tag has this attribute for, which indicates which input it is going to.1188

The browser styled them right next to each other like this; you will see, I didn't have to insert these line breaks manually, like this.1195

It just sort of did it automatically (put them, labeled, right next to each other); and then, I put the line break at the end to bring it over--1203

whereas, up here, if I put name like this, and then a space, it is going to not look as nice.1211

The formatting doesn't quite fit the same way.1222

But the main advantage is that, when you get into more complicated forms, or if you have a screen reader,1227

the label is associated in a way that is clear to the computer.1235

So, this name 1 that this label is for corresponds to the ID of the input that is right here.1242

This is just a simple text input, except that I made it required.1249

And this is the shorthand notation for it: required="required".1254

So, if I try and submit this without typing anything into this required name field, it just blinks and then highlights this field, because I didn't fill it in.1263

I'll click it again; it is indicating that I need to fill this in.1275

Now, you can also use the new email tag, which is actually an attribute.1280

You can give it a type attribute of email, and it will know that it is an email address.1288

And it will require whatever you have put in here to conform to some email syntax.1296

And also, you have given it this attribute placeholder, which fills in the input with a little example text that is grey.1303

And then, when I click on it, it disappears.1314

So, it just gives you a hint at what should go in there, and you can specify whatever you want.1316

The range is a new tag that lets you specify a range with this dial.1325

And this is still experimental at this point; we may have other ways that it is displayed.1333

For example, if you were to open this in Firefox right now, you wouldn't see this range dial.1342

You would actually see a text box like this, but it would still be expecting a range of data, rather than just regular text.1347

And then, lastly, this is the date input, and it is going to expect something in date format.1359

So, if I type something that is not date format, and then hit Submit, first of all it is going to complain that I haven't filled out the name;1369

once I fill out the name and hit Submit, it is going to complain that I don't have something in date format in the string here.1380

In this element, I just put "string!" which is not the right type of input.1388

In the future, we may even have HTML as part of the browser, where you click on a little date functional thing here1396

that will pull up an actual calendar, and you can select the date you want.1405

And that will be all controlled with various attributes in the form.1410

This is the basic overview of forms; there is obviously a lot more that you can look into,1424

especially when you are looking at other types of inputs.1432

HTML5 is working really hard to get a lot of those covered and have a natural way of doing it1437

that doesn't require a lot of styling and work--that just kind of happens automatically.1442

But if you wanted to stick with the simple forms, you can use those, as well.1448

And that should be the last slide, so thanks for watching Educator.com!1457