Last week, you became a web developer! Good work! We started going over the different types of elements that HTML uses to structure a document so that it can be read by an internet browser. But, HTML uses elements for just about everything! This week, we'll cover four different types of elements, how to use them, and by the end, you'll be adding content to the page you created last week!

If you just found this series, check out the series page, or if you need a refresher, go to last week's article!

Text Elements

Text makes up a majority of the internet, and one of the most basic things you will put on any page is text! Since we need to be able to format that text, HTML offers us elements to wrap around this text and provide our content with some organization.

The Paragraph Element `<p>`

To add regular text to our page, we will place that text between an opening and closing <p> tag! Check out the example and try it for yourself!

<!DOCTYPE html>
<html>
<head></head>
<body>
  <p>This is some regular body text.</p>
  <p>And here's some more!</p>
</body>
</html>

Why do we call it a 'paragraph'? Well, if we place two of these elements, they will each appear on different lines, effectively making a paragraph. If you're looking at a news article online, each time you see a new paragraph, you're looking at a separate <p> element!

Headings

Our page would look very bland if everything was body text, and one of the best ways to help our users take in the content on our site is to mark it with informative headers. HTML has 6 different heading elements, and their syntax is not too hard to remember!

<h1>Title</h1>
<h2>Subtitle</h2>
<h3>Heading</h3>
<h4>Subheading</h4>
<h5>Section</h5>
<h6>Subsection</h6>

By default, your browser will make an <h1> heading the largest and the <h6> heading the smallest, but when we get into CSS, you'll see that this doesn't have to be the case.

With headings, we also have a few rules to follow about using them:

Each web page can only have one <h1> tag.
Use headings sequentially: <h2> after <h1>, don’t skip to <h3>.
Use all of your headings to describe what the page is about!

Your web page will still render if you don't follow these rules, but your document will no longer be well-formed. We follow these rules because it makes it easier for a browser to read your page and interpret it, and it makes it much easier for search engines to know what the important information on your page is!

Creating Lists

We can also structure information on our pages in lists. HTML offers two kinds of lists: an ordered list and an unordered list. You would probably know them as numbered and bulleted lists, respectively. To create a list, you will nest list item elements inside the list type you choose! Here are a couple of examples:

<ol>
  <li>Item 1</li> <!-- 1. Item 1 -->
  <li>Item 2</li> <!-- 2. Item 2 -->
  <li>Item 3</li> <!-- 3. Item 3 -->
</ol>

<ul>
  <li>Item 1</li> <!-- • Item 1 -->
  <li>Item 2</li> <!-- • Item 2 -->
  <li>Item 3</li> <!-- • Item 3 -->
</ul>

In most situations, you will use the unordered list, unless it is necessary that the information is sequential, like in recipe instructions.

Adding Images

So far, all we have on our pages is text, but to make our pages more interesting we can add images, audio, or video! HTML has elements for those too!

To add an image to our site, we will use the <img> element. This element is unique from the elements that we’ve learned about so far in a couple of ways. First, this element is self-closing, meaning that it doesn’t wrap around other elements, and we only need to use one tag. This element also requires an attribute, which tells our browser how to interpret it! HTML elements can take many different types of attributes, but the <img> element requires a src attribute that takes the URL or path of the image you want to display!

<img src="urlofyourimage.com/image.jpeg"/>

And there you go! An image on your web page!

Challenge

Now that you've got some new elements under your belt, here's a challenge for the week! Make your own "About Me" page. Use at least two different heading levels, a list, a paragraph of information about yourself, and include a picture! Make sure to use the appropriate elements and open it on your web browser!

See you next week!

HTML Elements