Headings and Paragraphs

You've learned that HTML provides structure and 0:00 meaning to content in the form of tags called markup. 0:03 When you write markup, 0:06 you're telling the browser how you want to display your content. 0:07 Remember what the page looked like earlier before we added markup? 0:10 It was one long line of text, and 0:13 that wasn't a very pleasant reading experience was it? 0:15 Structuring content with HTML, organizes your content and 0:18 makes your users' reading experience easier and more enjoyable. 0:22 Books, magazines, and newspapers organize text using titles, subheadings, 0:25 and paragraphs. 0:30 HTML provides similar elements to organize blocks of content. 0:31 The most common elements used to structure content are headings and paragraphs. 0:35 Headings add organization and 0:40 structure to the page by identifying sections of content. 0:41 So the site we're going to build is about virtual reality experiences. 0:45 So, to make the text, Experience VR, the main heading of the site, write an opening 0:49 tag in front of the text and place the closing tag at the end of the text. 0:54 h1 is a heading element and the 1 in the tag name means 1:00 that it's a level 1 heading, the main or most important heading on the page. 1:06 Usually, the first heading on a web page is a h1. 1:10 It's like the main headline in a newspaper or magazine article. 1:13 So, when you save the HTML file and refresh the browser, 1:16 you'll see the text Experience VR in large bold letters and 1:20 the text outside the h1 element appears below the heading. 1:24 Now that we've set the page's main heading, 1:29 let's place the rest of the text inside a paragraph. 1:31 Paragraphs in HTML are created using the p tag, so type an opening p 1:34 tag at the start of the text and place the closing p tag at the end. 1:39 Let's add one more paragraph below this one. 1:48 Type a set of p tags and write the text, 1:51 Virtual Reality is becoming well known as a form of entertainment. 1:54 But its also finding its way into fields like education, 2:06 industrial design, healthcare, and so much more. 2:17 You can also copy this text from the teacher's notes of this video. 2:26 I'll save the file, refresh the browser, and notice how the browser places each 2:30 paragraph on a new line and adds extra space to the top and 2:35 bottom sides to separate them from adjacent paragraphs and other content. 2:38 h1 is not the only heading available. 2:43 There are six heading elements in HTML, h1 through h6. 2:45 Each identifies a new section of content and represents a different level of 2:50 importance on their page, h1 being the highs level and h6 the lowest. 2:54 Back in our page, let's markup a new section of content for 2:59 blog entries using a level 2 heading. 3:03 You define a level 2 heading using the h2 tag. 3:05 So, below the bottom paragraph, type a set of opening and closing h2 tags, 3:09 and inside, the text, Latest VR Articles. 3:14 I'll give this a save. 3:19 And over in the browser the h1 is the highest level heading on the page. 3:21 So the browser makes it stand out from all the other text. 3:26 And an h2 is slightly less important. 3:29 So, the browser displays it a little smaller. 3:32 Now, from here, you could use an h3 tag to create a smaller heading, and 3:34 that's a subheading of the h2, an h4 tag for an even smaller heading and so on. 3:39 And if you place all the available headings next to each other on a page, 3:45 they would look like this. 3:49 From the largest or most important, to the smallest, or the one of lowest importance. 3:53 I'll go ahead and undo that. 4:01 And now, let's add a couple of blog entries below the subheading, or the h2. 4:03 We'll use an h3 to mark up the title, and paragraph tags for the text. 4:09 So, below the h2 I'll type a set of h3 tags. 4:14 And the text for 4:19 this one will be How Schools Use Virtual Reality to Improve Education. 4:20 Right below, I'll add a set of paragraph tags and 4:33 I'll paste in some place holder text as the paragraph text. 4:37 You can also copy these exact heading and paragraph 4:41 text snippets from the teacher's notes of this video or feel free to write your own. 4:44 I'll add one more log entry right bellow the paragraph, 4:47 again I'll type a set of h3 tags. 4:51 And the text for this one will be the Advantages of VR Simulation. 4:55 Add a paragraph tag down below. 5:09 And for this text I'll go ahead and just copy and 5:12 paste in the place holder text from above. 5:15 All right, so our page is starting to take shape. 5:20 And up next you'll learn about creating lists with HTML. 5:22