Lesson 2: HTML Tags

There are a handful of HTML tags, and we already covered a few (html, body, head). As I previously mentioned, tags are used to define the structure and layout of your site. Tags come in pairs: one is an opening tag and the other is a closing tag.

For example, the <p> tag is to define a paragraph. There are also a handful of heading tags that are used to define titles/headings. There are 6 levels of headings in HTML (1-6), and you can define them as followed:

<h1>Main heading</h1>
<h2>Subheading</h2>
<h3>Level 3 heading</h3>
<h4>Level 4 heading</h4>
<h5>Level 5 heading</h5>
<h6>Level 5 heading</h6>

Test the above code in your code environment, and you’ll see that as the heading numbers increase, their font size decreases. This indicates the importance of the tag. An h1 tag should be used for important titles, while headings of levels 2-6 should be used for less important headings/titles.

Another common HTML tag is a div tag, which is used to group related HTML elements together. For example, lets say you want to include an introduction about yourself in your site, followed by a list of your hobbies:

<div>
	<h1>Hi, my name is Mike</h1>
	<h2>I'm currently in grade school and my favorite food is Pizza</h2>
</div>

<div>
	<h1>My hobbies</h1>

	<ul>
		<li>Basketball</li>
		<li>Swimming</li>
		<li>Drawing</li>
		<li>Running</li>
	</ul>
</div>

As you can see from the above example, there are 2 div tags used. The first div tag groups information about the person, Mike. The second div tag is used to introduce and list Mike’s hobbies.

The above example also included 2 new tags, ul and li. The ul tag is used to create an unordered list (there is also a tag to create an ordered list), and the li tag (li stands for list item) is used to create lists of items. The ordered list tag is ol (ol stands for ordered list), and its created similarly to a ul tag:

<ol>
	<li>Basketball</li>
	<li>Swimming</li>
	<li>Drawing</li>
	<li>Running</li>
</ol>

Try the different types of list tags in the code editor to the right. As you can see from the display output, ul tags display the list items as bullet points, while the ol tag displays them as numbered lists.

Most of the tags in HTML have simple abbreviations that helps you remember their usage, so when you see a tag you’re not familiar with, you can roughly guess it’s usage by how its included in an HTML document.