Paragraph Tags2:40 with Treasure Porth
The most common way to split up text into more manageable, visually appealing parts is with a paragraph tag.
Images add a lot of interest and flare to web pages, but 0:00 most websites still have lots and lots of words on them. 0:03 Without proper structure, 0:06 your browser would display these words as massive unreadable walls of text. 0:07 The most common way to split up text in a more manageable visually appealing chunks, 0:12 is with a paragraph tag. 0:16 Paragraph tags are pretty much what they sound like they're used to split 0:18 up text in a paragraphs. 0:21 If we look at this background info area on our profile website 0:22 these two paragraphs are wrapped in paragraph tags or p tags. 0:27 It creates a bit of space between these two paragraphs 0:32 making it much easier to read. 0:35 This space is created because paragraph tags have a default margin value. 0:37 Margin is a CSS property. 0:41 We'll talk more about margin in the CSS part of this course, but 0:43 basically it's a way you can control the amount of space between elements. 0:47 Let's go back to index.html, find these p tags, and 0:51 delete them just to see what happens. 0:54 When we refresh, 1:07 you can see that these two paragraphs are now all squished together. 1:08 So, let's undo, to bring these paragraphs back. 1:13 And for the sake of experimentation let's add another sentence below these 1:19 paragraphs to see what that looks like. 1:22 So, right here, I'll just type this is a third paragraph. 1:25 Refresh and you'll see that this looks okay. 1:32 Because this second paragraph has a bottom margin 1:36 that's creating space between these two elements. 1:39 But let's try adding a fourth paragraph. 1:42 I'll type, This is a fourth paragraph. 1:45 Refresh and we can see that the browser doesn't recognize that we want this 1:52 content on a new line. 1:57 It doesn't know that it's a new paragraph. 1:59 So it displays as if these two lines are bumping up next to each other. 2:01 By default, text-wrapped and 2:04 paragraph tags will always display on their own line. 2:06 So let's put these paragraphs into paragraph tags. 2:09 Save, refresh and there you go, paragraphs. 2:29 In the next video I'll introduce HTML's most valuable player 2:32 the tag that makes the interconnected web possible the link tag. 2:36
You need to sign up for Treehouse in order to download course files.Sign up