Structuring the Document

00:00 You can add structure to your index.html file by adding HTML tags for your content. To start, you can add heading tags. These are used to separate headings and subheadings on a webpage. Wrap Hello World Wide Web with an h1 tag.

00:16 So H1 opening tag. Then at the end of the sentence, h1 closing tag. h1 is reserved for the main headline of your website.

00:26 Usually, you’ll only have one h1 element on the page. You can wrap an h2 around about me links. So about me on line 13 h2 opening tag.

00:37 And then then at the end of the sentence, h2 closing tag. Line 17 where it says Links h2 opening tag. And at the end of links h2 closing tag.

00:49 These headline elements help section your HTML document and make it easier for screen readers to navigate your content. Now that you have the heading tags added, you can go ahead and add the paragraph tags.

01:00 Because the paragraph tags represent blocks of text, you’ll want to add them around the blocks of text that you already have, so you can add around This is my first website.

01:11 I’m a Python programmer and a bug collector.

01:16 And then lastly, My favorite websites are.

01:21 You may have noticed that all you have left is a list. To properly structure your HTML for a list. You can use either an unordered list element or an ordered list element.

01:31 The unordered list will give you bullets, and the ordered list has numbers. For this, you may find the unordered works best. First, wrap the chunk of text with the unordered list tag ul.

01:45 Make sure to indent your list so that it’s inside the tag, and then add your closing tag. Now, for each list item, you’ll want to wrap it with a list item tag or li.

01:57 So realpython.com will be inside an li tag, python.org will be inside an li tag.

02:05 And lastly, pypi.org will also be inside the li tag.

02:10 Now that you have properly structured HTML, take a look at the browser to see what this looks like.