When we left off last section, we learned what happens when you add a <p> tag to our website. This is how we create a basic line/block of text, using the paragraph tag.

HTML is full of tags like this. We’re going to go through some of the more important ones that you will commonly see. While there will be some examples with pictures in this guide, it is extremely encouraged to try each tag out, along with reordering some to see what each one does.

Remember to add these tags into the <body> tags. Read through the last section to get a recap on how to view your changes

Headings

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Paragraph</p>

Headings are more ways to format your text. Above, you will see six variations of headings, <h1>, <h2>, and so on. On the right, you will see what this above code displays. For each level of heading, the text gets smaller and less bold, ultimately ending in the paragraph that we used in our previous example.

Links

<a href="<https://google.com>">Go to Google</a>
<a href="<https://wikipedia.com>">Go to Wikipedia</a>

Links are another incredibly important tag in website building. These are what bring you to other webpages, or (we’ll get into in a bit) different pages of your own website. At a first glance at the code, we notice that there’s a bit more going on. href="<https://google.com>" is inside our tag, with the letter a.

Firstly, a is what notates a link. The contents between the opening a and closing a is what will become the link. (This will be useful knowledge later.) Secondly, there is href="[<https://google.com>](<https://google.com>)" inside the tag as well. This is known as an attribute. Some tags require attributes to work, like links for example. This tells the link where to redirect when clicked. For this example, the first link will link you to “https://google.com” when you click on “Go to Google”, and the second link will link you to “https://wikipedia.com” when you click on “Go to Wikipedia.” Try playing around with this and see where you can link to. Also see which parts throw errors, like taking out the “https://” part.

Images

<img src="<https://acmutsa.org/assets/>
img/logos/cq-logo.png"
alt="Code Quantum" />

Images are another big part of website building. Here, we can see some more attributes, but there’s also seemingly no closing tag. But actually, there is. Having /> at the end is another type of closing tag. There is just no contents in it. This is typically how you create images in HTML.

Now we’ll talk about the attributes. First, there’s src, which tells you where you are getting the image from. This can be a link URL, like in the above example, or an image inside the project itself. See the below note for more about that.

The next tag, alt, is a failsafe for the image. If the image doesn’t load, or a narrator attempts to read the website, it will display/read the alt text.

<aside> 💡 To create an image from a downloaded file, you must import the picture into the same project folder that your code is in. Then, in the src, set it equal to path to the file. For example: src="myimage.png"

</aside>

Lists

<ol>
	<li>list item 1</li>
	<li>list item 2</li>
</ol>
<ul>
	<li>unordered list item 1</li>
	<li>unordered list item 2</li>
</ul>

There’s a couple new tags for lists. These are:

<ol> for ordered lists
<ul> for unordered lists
<li> for list items

Another thing we are seeing is nesting.

This is when opening and closing tags come into more effect. We can see in the above example two list items are in between the ordered list and unordered list tags. This means the lists contain the tags.

You can nest almost any tag within another tag. For example, we can nest an image in a link: