Tables, Comments & Hard Returns

[00:00:00]
>> Tables, sometimes you have tabular data like this, right?. Maybe you're making, I don't like the standings of the current NBA teams, the way you have that in the tables. This is the Utah Jazz, they have this many wins, this many losses, and that would be a table of information.

[00:00:18]
Something that you could use a spreadsheet for, tables are really useful for that kind of stuff and we call that tabular data. And so I just wanted to show you here how you would lay one out. So I have a table tag, and inside of that table, I have a body cuz you can also technically have a thead.

[00:00:40]
And I'll just show you that, If you wanna see. So here, we can have another table row, which is a tr, and this will have td of, I don't know, some heading. And this would have a td of some other heading. Okay, and so now I have, if you're doing a spreadsheet, you can name the different columns.

[00:01:12]
That's what a thead is for, is to name all the different columns here. So I don't know, maybe this is names and points. Imagine that we're doing trivia night or something like that and you're keeping track of Team 1's points or Team Awesome, and they have 50 points.

[00:01:35]
Well, let's just make it Harry Potter, my wife would be so happy that I used the Harry Potter analogy. So this is Ravenclaw, obviously, and this is Slytherin, I think I spelled that correctly. I'm a Ravenclaw, so I would typically put myself as winning, but my wife is a Slytherin, so I probably should make her win, so a Slytherin's win, just by the fact that I'm afraid of my wife.

[00:02:03]
So you can see here I kind of just created a basic spreadsheet inside of my code using this table tag, right? So the thead to express what the column names are, and then I just used this to express which is which. So tr stands for table row and td stands for, I think it's table definition, but it's like a cell, it's an individual cell in whatever your table is.

[00:02:36]
So there are so many more tags, right? There's many, many, many tags. I've shown you probably, I'm gonna guess 75% usage will be these very tags that I've shown you, but there's still some other ones that sometimes you will throw in for various different reasons. And actually, throughout this course, we'll use more of them, like article tags and section tags and things like that.

[00:03:01]
But one thing I wanna emphasize to you, technically you could use a div for anything, right? You can make everything, 100% of your tags on your page could be a div, right? A div is cardboard box and you can make various different cardboard boxes into your cardboard fort of a website.

[00:03:18]
But it's important to use the thing that matches it the closest, right? So if I start using headings, right, if I have an h1 on a site, then some sort of assistive technology, like a screen reader, can go find the h1 on the website to tell a blind or a hard of seeing person, this is the name of the website.

[00:03:39]
Cuz it's going to look for h1s on your page. This is called writing semantic markup or semantic HTML. By just following those kind of best practices, all of the assistive technology will just work for free and you don't have to do a lot of work to make your site work for everybody.

[00:03:55]
Otherwise, you have to do a ton of work to say, all right, screen readers, come here, this is what this does, this is what this does, and it's really hard. I'll leave it at that. Try and choose tags that match your meaning, that's my plea to you. And then take the Frontend Masters course on accessibility, which will really gets you into depth of how to do the best kind of markup, in addition to a bunch of other really cool stuff.

[00:04:23]
So I just wanted to show you one here for fun cuz I just entertained myself with it. Do you remember the MySpace, GeoCities, Angelfire days, where we would have scrolling text? There is technically a tag here called the marquee tag. It's old, it's deprecated, which means it's been removed technically from HTML.

[00:04:43]
But still, Firefox and Chrome still understand the marquee tag. I love that it's super janky. And they do that on purpose, because it's actually how it used to look, right? If you look at this in Chrome, it's actually nice and smooth, which is not how it used to look.

[00:04:57]
It used to be janky, and it needs to be janky for it to be correct in my eyes. So there's a bunch of stuff like that, there used to be a blink tag. The blink tag has gone away, thankfully, cuz it was annoying as hell. There's a bunch of other ones that we could talk about, but yeah, I like the Marquee tag, that one always entertains me.

[00:05:17]
So let's talk about comments. VS Code get all this context built into our brains while we're writing some code, right? So you have all these thoughts, I'm doing this, I'm doing this, I broke this, I fixed this, and you get all this built-up context in your head. And then you leave, and you go back and you come back the next day, right?

[00:05:37]
And you've lost all that context. Imagine it's like writing an essay and you do a bunch of research, and then you leave and you try and come back and continue your essay a week later. You've lost all that context, you have to work again to regain all of that context.

[00:05:53]
That's hard, right? So there's a thing that coders can do called comments. And actually, you can see I spoiled that, this is a comment right here. You can leave comments in your code that never gets shown to the user, right? But it's actually just left there for future coders and your future self to be like that's why I did this thing, right?

[00:06:12]
So if I wanted to leave a comment here of, this is from Harry Potter or something like that, I can actually just put a little comment here of angle bracket !--, which you can see, this is my ligature that I was talking about. This is actually just an angle bracket, an exclamation point, and two dashes all next to each other, right?

[00:06:40]
And then as soon I hit backspace here, this is just my font combining them all into one gliff. It's called a ligature, and I left a link for it in the previous section or one of the previous sections, okay? And so this is a comment. And the way you finish a comment is like this, a dash dash, and then angle bracket, then right-pointing angle bracket.

[00:07:08]
So if I combine these into one, it makes just a really long arrow, these things together all make a comment. And this can be multiline as well, right? So I can have more stuff here. And this can just be whatever you wanna put here, there's no legal stuff to put in a comment.

[00:07:23]
It's all just whatever stuff you would wanna put. So again, what I could have put here is, These are the scores from the Harry Potter houses or something like that, right? And now, if I come back later to this code, I can see, okay, that's what I was thinking when I did this, right?

[00:07:51]
That's the point of comments. And throughout this course, we'll do a lot of commenting, we'll show that on CSS, we'll show it in JavaScript. It's really important for you to leave these little future notes to someone, it's like, this is why I did this. If you're writing code and you know later that this is gonna be unclear why I did it this way, you'll wanna leave a comment of, I did this this way for this reason.

[00:08:12]
So that when you come back to it, you're not gonna say, why was Bryan such an idiot two days ago? Believe me, it happens all the time, comments will help you a lot. So that's what comments are. I'll give you a warning, right, leaving comments like this. If I put an h1 saying Title of the Article and then I leave a comment right underneath it that says, this is the title, by putting it in h1, I know it's the title, right?

[00:08:42]
So don't leave comments everywhere just for the sake of comments. If you're gonna leave a comment, make it useful, right? Some things are just very obvious, they don't need comments. So somewhere of the balance of between way too obvious and leaving no comments, right? You wanna make sure that you're leaving an appropriate amount of comments.

[00:09:03]
Okay, so I just wanted to give you a note on hard returns. So this is something that I struggled with when I was learning HTML, so hopefully, I can kind of help you not do the same things I did. If you write this in your HTML, what do you expect to happen?

[00:09:26]
I personally, if I didn't know HTML previous to this, I would expect it to be, this is some text, a space, this is some more text, right? I'd expect there to be a paragraph between the two of those. That's not actually how HTML works. HTML is actually going to squish this into one paragraph.

[00:09:44]
In fact, you can see that right here. So this actually squished it together all into one paragraph. So yeah, this squished it together into all one line, because HTML is not going to respect the whitespace here. So how would I get that split correctly? Well, I'm gonna show you two different ways to do it.

[00:10:06]
There's a kind of a correct way to do it and there's kind of an incorrect way to do it. You'll see both, and I wanna implore you to use one of them, but I'll show you both ways to do it and you can make the decision yourself. The correct way of doing this is this is two paragraphs, right?

[00:10:20]
This is two paragraphs of text. We expect it to be two paragraphs, therefore we should just use two paragraph tags, right? So we should do it this way. This is some text, some space. Well, actually, the space there isn't even important. Just the fact that it's in two different paragraphs will make it so that these work the way that we expect.

[00:10:44]
So just make it two different paragraphs rather than than trying to make this into one paragraph, okay? I want you to do it this way, this is what I'm asking you to do, I hope you do it this way. Now, I'm gonna show you how to do it the wrong way.

[00:10:56]
If you really have to do it in one paragraph for some reason, there is another tag called the br, which stands for break. This will make a break in your text. This is the old way of writing HTML, people used to write a lot of HTML. I will tell you that if you go to Netflix.com, there are zero break text.

[00:11:17]
So modern HTML programmers do not use break, they'll just put this into multiple different paragraphs. But I show you this for two reasons, one, sometimes you might have some constraints that this might be useful to you, and two, you will definitely see it on the Internet. If you're Googling how do I do this, it might show up in one of the answers, and I don't want you to be startled by something that you didn't see or anticipate before.

[00:11:47]
So this is correct. Do two paragraphs tag. This technically works, but I'm gonna say incorrect. So br tags used to be very common. If you go to old websites, they'll still exist. But it's not anymore, most websites don't use them at all anymore. And this is just kind of a common theme with HTML, CSS, and JavaScript for that matter, is we're trying not to break the Internet.

[00:12:20]
So every time that we, and I say we as in the collective community. Every time that they release new versions of HTML and CSS and JavaScript, they add things to the language and to the new capabilities, but they don't take away old things. Because they want websites from 1995 to work.

[00:12:43]
If you launch a website today, you anticipate and you want that your website will work for 30 more years, 50 more years, and that's what they want. So that's the positive thing, is websites never break. The negative thing is we are now left with a bunch of really old stuff that still technically works, and it becomes less clear what's the correct way of doing this.

[00:13:06]
So a break tag is one of those things that's leftover from an ancient era of all these different things. So this is not the preferred way of doing it. I'm telling you that because it is in there, it exists. You'll find lots of stuff like this and we don't use it anymore, but it is there.