Check out a free preview of the full Complete Intro to Web Development, v2 course:
The "HTML Image, Form, and Table Elements" Lesson is part of the full, Complete Intro to Web Development, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Brian introduces HTML elements for displaying images, forms, and tables. Brian takes questions from students.

Get Free Access Now

Transcript from the "HTML Image, Form, and Table Elements" Lesson

[00:00:00]
>> An img, this is a self closing tag, it's our void tag. And it's an image, right? It makes sense, you don't have anything inside of an image. An image is in and of itself enough, it's a one atomic unit that cannot be broken apart. So yeah, we'll get to that in just a second.

[00:00:22] So you give an image a source, right, src. And it'll look something like this, img src =, this will be some sort of URL pointing to a picture that's being hosted somewhere on the Internet. And so every image needs a source and it also needs an alt, A-L-T.

[00:00:44] Going back to screen readers, obviously, if you're blind you can't see images. However, it can be really important what's in those images for someone to understand your website, right? If you're having, this is an arrow pointing at something or it has a other meaning to it. So you give it an alt, so that when the screen reader arrives to this particular image, it has some text to say about it, right?

[00:01:08] So let's actually just copy and paste this up here. Come back up here. So you have this little puppy picture that pops up, but let's say this image broke, right? It actually will show them the alt text, for whatever reason, if that image got moved or broken or something like that.

[00:01:33] So it also doubles as being a backup for it as well. But also if someone's using a screen reader and they tap onto this and it goes, they obviously can't see the picture. It'll say, this is a picture of an adorable puppy, right? So it's important to have descriptive alts as well.

[00:01:53] Every image tag should have an alt, 100% of the time, always. And again, that's being a responsible citizen, that's recognizing that the Internet is for everyone. So what is a subtle difference that often people have a hard time with when they're learning web development? Is you can actually put images on a page with CSS.

[00:02:23] So you don't have to use an img tag, you can put it on there via CSS. The only time that you wanna do this if it's purely decorative, right? Like if you have a background image on your page, right, that purely serves just to make your page look nice and it's purely for aesthetic value, then that's when you're going to use CSS to put the image on there.

[00:02:48] But if it's for something like real content, right? Maybe we have an adoption website for puppies, and we're putting that picture of the puppy up there. That should be an img tag, because it needs an alt tag, right? So the CSS version can't do alt text. So that's why it's really important that you need to use those img tags for everything that's not decorative.

[00:03:09] If it's purely decorative, then you can use CSS for it. Does that make sense? Okay. The other thing that's useful is for search engines, search engines will also read alt tags as well. Inputs, we were just talking about inputs, so this is an input right here. It's something that people can type into for like, if you're filling out a form, you wanna put first name and last name, you would use an input tag for this.

[00:03:45] There are many different flavors of input tags. If you don't put anything, it just assumes that you need a text input, which is the most common one, I would say. But there's also a color picker, there's a number input, there's a date input, there's a time input, file uploader.

[00:04:04] There's a bunch of them, more that I'm not thinking of as well. So, I haven't read the numbers, dates, colors, check boxes, radio buttons, a bunch of stuff like that. We'll see more of that in the next page as well, it looks like this. Text area, so what happens if you had to write an essay, right?

[00:04:28] You don't wanna write an essay in this, that would be terribly annoying, right? So it'd be useful if you could do something like this. Textarea/textarea, right? So I'm sure you've seen all these on websites, right. They're like this big and you can write a bunch of stuff in them, and then you can hit Enter and such, that is a text area.

[00:04:55] So it's a larger input that accommodates larger bodies of text in them. Now something you might point out to me at this point in time and you'd be absolutely right, is, why is that not a self closing tag, right? Inputs are self closing tags, so why aren't text areas?

[00:05:14] There's not a good reason, they just aren't, they're old is the real reason. Text areas have been around long enough that they were not made self-closing tags. Yeah, I mean, if you put something in here, it'll like seed that as like the beginning value, right? So you can put things in there, that would be like the initial value of whatever's in the text area.

[00:05:48] You don't end up using text areas very often, but it's good to know about them, they do exist. If you need long form text from a user. Inputs, text areas, select, select an option specifically. So like a drop down, right? I'm sure most of you have done select the state that you're from, and you click on it, and you find Minnesota.

[00:06:12] And then you click on that, right, that drop down is a select, right? And all the individual options in it are, you guessed it, options. So it will look like something like this, select, option, then you have Seattle, Portland, San Francisco, etc. And we'll get more into that later, but they have various values as well.

[00:06:36] And that'll be the value that's actually sent back to your server if they select that. So if I select Seattle, it's gonna send back this version of Seattle. So the next one is a form. A form is for if you have like a large form that someone's filling out that has first name, last name, state address, etc, etc, that has a bunch of different inputs.

[00:07:07] You wanna gather that up all into one place, you use a form as kinda like the container for all of that. There's more to forms, we're not necessarily gonna get into that today, because there's a lot of stuff that you can get into with forms. And it's not particularly interesting, in my opinion.

[00:07:23] [LAUGH] But yeah, forms are for grouping together inputs, text areas, selects, those kind of things. Tables, so tables get a really bad rap in HTML because back before we had useful amounts of CSS, we used to layout websites using tables. Imagine trying to like paint a picture using Excel, and that's what writing websites using tables felt like.

[00:07:56] We're way beyond that now, we haven't used tables to lay out things in a decade, I would say. But people still have this aversion to using tables because they're so traumatized by back then. You should still use tables if you have a table of data, right? If you have something that you would use Excel to display, then use a table, that's totally fine.

[00:08:19] If you're trying to lay out a website, do not use tables. [LAUGH] So a table is like the container for the entire table. A tr is one row and a td is one cell. So right here, I have a table. In fact, we can just copy and paste that and see what it looks like.

[00:08:42] Let's go back up here. Right, so I have (0,0), (1,0), (0,1), and (1,1). And let's just put these on different rows so you can kinda see what that looks like. Okay, so the table contains the whole table, right? One tr is one row, right? Table row follows. And then you have one td is one individual cell here, right?

[00:09:25] So I have (0,0), which is there, and then (1,0) is here. Then you have another tr, so it's the next row down, (0,1) (1,1) right there, make sense? So something that you'll kind of find just with HTML and CSS in general is we start at the top left and we work our way right and then we go down, right?

[00:09:48] So the first one we put on here is the top left one, that's also how a bunch of stuff works in CSS. So just get used to usually that the point (0,0) is gonna be the top left of whatever you're working with. So if I were to put, Let's say another table row in here, it would go underneath it, right?

[00:10:13] Sure enough, it does. Rather it's this one is 2, 0 and 1 and 2, anyway. And then if I put another td right here, Right there, yeah, make sense? Cool. So that's tables, and yeah, so there are many more tags. And I didn't even necessarily cover all of the useful ones.

[00:11:04] There are things like nav and header, and footer, things like that. And article, and section, and a bunch of stuff like that. So for example, you have something that's like article, it's something that you put an article inside of, it's very descriptive what's inside of it. It acts just a div, like the way it mechanically works, it works exactly like a div would work.

[00:11:28] But what's nice about it is if someone's scraping your website like Google, they'll instantly knows, this is an article. This is something I can throw into where I would display an article. So it's useful for machines that are reading it. So if you use useful HTML, machines that are consuming it will know a little bit more about your website, and will be able to rank you higher in Google or be able to scrape your website in interesting and useful ways.

[00:11:57] And also screen readers will be able to read it more readily. So there's a bunch more, this will get you started, but you'll be learning HTML tags, probably for at least a little bit. Any questions about anything that we've talked about so far? Please?
>> So when I did the button in two different browsers, it looks different.

[00:12:20] A, is that something that you ever have to be aware of? And B, is my hypothesis correct that it's sort of like emoji between like Android and Apple kind of thing?
>> Yep, the answer is yes to both of your questions. [LAUGH] So it's something you should be aware of, usually that's okay.

[00:12:41] But when you use CSS, you can make them look the same across operating systems and browsers, and all that kind of thing. But yes, it will look different by default if you don't change anything. You will almost always change something. What's the other question?
>> And then, is it just the difference in the browser the same as an emoji looks different between Android and an iPhone for example?

[00:13:08]
>> Yes, it's the browser that's making those different. It's the browsers more or less trying to have convergent looking things, but a lot of it is up left up to them. Google and Chrome tends to make things look more like Google, right? So it's more like material design, it's more flat, those kind of things, whereas Firefox is has its own way of thinking, Edge has its own way of thinking.

[00:13:33] So it's those kind of details are left up to the browser vendors. It's a good question. In fact, that's actually one of the fun slash horrifying parts of being a front end developer is making things look the same across browsers. That's something that you constantly, constantly battle with is, this works in Firefox, but it doesn't work in Chrome.

[00:13:56] How many times have you said that? I've said that literally yesterday, if we're being honest. [LAUGH] I literally had to fix something for that very reason. So it's one of the common problems that we deal with is cross browser problems, and the worst by far these days is mobile Safari.

[00:14:17] I spend so much time fixing things for mobile Safari. It used to be Internet Explorer. But luckily, not many people use Internet Explorer anymore, so. Good questions.