Exploring Common HTML Tags

Quick reference

• 00:05 Now it's time to start learning actual HTML tags.
• 00:07 And for a while here we're just going to start talking about different tags so
• 00:10 you get an idea of the common ones that are used.
• 00:13 So we've already used a few here and I'm gonna start by talking about them.
• 00:17 This <h1> and this <p> tag.
• 00:19 Let's start with the <p> tag.
• 00:20 P, I mentioned earlier, stands for paragraph.
• 00:23 And any time you have any kind of text, a little bit of text or a lot of text,
• 00:27 it's a good idea to wrap it in a <p> tag.
• 00:30 Now, we can see why this is important, we need to generate some dummy text.
• 00:34 And whenever you're creating a website, there's something called lorem ipsum text.
• 00:38 And it's just gibberish, if you go to Google and type in lorem ipsum generator,
• 00:42 pick any one you want and let's say we want one paragraph of gibberish.
• 00:47 Click this generate and here it is.
• 00:49 It's generated all this gibberish.
• 00:51 We can just copy and paste this.
• 00:53 So, if I copy this, come back here and paste it in.
• 00:58 Now I haven't wrapped this text in anything at all.
• 01:01 I'm just gonna save this and come up here and click reload and
• 01:04 it just sorta runs it all across there.
• 01:06 If I do the same thing.
• 01:08 But I first wrap it in a <p> tag.
• 01:12 And I'm just gonna move this down and save this.
• 01:15 Well it looks pretty much the same cuz we haven't done any formatting, but
• 01:20 it sorta wraps all this stuff together.
• 01:22 And we can do different things with it and we'll see that as we move forward.
• 01:25 Let's get rid of that.
• 01:29 We also talked about the <br> line break tag that just does exactly what it sounds like.
• 01:37 It creates a break and moves everything down, without it.
• 01:41 These two things will be right next to each other.
• 01:47 Another tag is the <pre> tag and this is kind of a weird tag.
• 01:51 You see it like right here, it put this all on one line and
• 01:56 that's what HTML does, except in the <pre> tag.
• 02:00 Here, whatever formatting you give it, this is
• 02:04 very weird, right?
• 02:12 Now if we save this, you would think like, the A and
• 02:16 the B this would all be smooshed up on one line.
• 02:19 But since we wrapped it in a pre tag, all the formatting stays the same.
• 02:24 So that's very useful for a certain design type things that you need
• 02:28 to move your text around into a clearly define sort of thing, so that's the <pre> tag.
• 02:33 We also have this <h1> tag.
• 02:34 And h1 stands for heading one.
• 02:36 And what that does is it creates this big heading text.
• 02:40 Well, there's five or six other heading tags as well.
• 02:44 So you can go <h2>.
• 02:46 This is H2.
• 02:49 <h3>.
• 02:50 This is H3.
• 02:52 All the way on down to <h4>.
• 02:56 This is H4.
• 02:57 And <h5>.
• 03:00 This is H5.
• 03:03 Bear with me.
• 03:03 We're almost done.
• 03:04 And finally <h6>.
• 03:06 This is H6.
• 03:09 Now if we save this, hit reload, you can see.
• 03:12 You get progressively smaller headings.
• 03:14 Now, this is not something you use just to resize text.
• 03:18 This is something you use to create emphasis.
• 03:21 You're telling the web browser,
• 03:22 you're telling Google, you're telling the world that this is a headline.
• 03:26 So this is a slightly less important headline and
• 03:29 this is a very much less important headline, this H6.
• 03:32 So if you wanna change the size of text,
• 03:35 just because you wanna change the size of text, don't use an h tag.
• 03:39 Well use a different font size tag or we'll use CSS, but if you want to create,
• 03:45 for instance, a title of a blog post or something, you would use an <h1> tag.
• 03:49 If you're writing an article, the title of the article, you would wrap in an <h1> tag.
• 03:54 A subheadline in an article or a blog post might be an <h2> tag or an <h3> tag.
• 03:58 To tell you the truth, <h4> through <h6>,
• 04:00 I can't remember ever actually using those tags.
• 04:03 You generally just use <h1> and <h2> sometimes you'll use <h3> but not often and
• 04:08 so that's the header tags.
• 04:09 So this heading tag, the <p> and the <pre> tag, as well as a line break tag.
• 04:16 Tell the truth, you don't often use this <pre> tag either,
• 04:18 but it's kind of an interesting thing, so I thought I'd show it to you.
• 04:22 I'll go ahead and delete that for now.
• 04:23 So in the next video, I wanna talk about text formatting,
• 04:26 should be a lot of fun and that's all for this video.

Lesson notes are only available for subscribers.