Tutorials / HTML Tutorials / HTML Tags

HTML Tags

tutorial html

Now you know that an HTML file contains tags that tell your browser how to display content. For example, you might use the <h1> tag to show a heading, or the <p> tag to show a paragraph.

There are a ton of HTML tags, and programming in HTML means choosing tags and combining them to make a webpage.

Example

As a starting point, here’s an example HTML file:

<!DOCTYPE html>
<html>
	<head>
		<title>My First Webpage</title>
	</head>
	<body>
		<h1>Happy Coding</h1>
		<p>Hello world!</p>
    <p>Here are my favorite animals:</p>
    <ul>
      <li>Lions</li>
      <li>Tigers</li>
      <li>Bears</li>
    </ul>
    <img src="https://happycoding.io/images/stanley-1.jpg" />
    <p>Learn more at <a href="https://happycoding.io">Happy Coding</a>!</p>
	</body>
</html>
Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

Let’s go over these tags one by one.


Document type: <!DOCTYPE html>

This line tells your browser that it should treat the rest of the file as HTML. Technically this isn’t an HTML tag, but you should still add it as the very first line in your HTML files. If you don’t, things might not look right.


HTML content: <html>

Similar to the DOCTYPE line, the <html> tag tells the browser that anything inside of it is HTML. Anything between <html> and </html> will be treated as HTML.


Page info: <head>

The <head> tag contains information that you don’t want to show as content, but is still important for the browser to know.


Tab title: <title>

The <title> tag sets the title of the webpage, which the browser shows as the label of the tab.

The title does not show up in the content of the page, because it’s inside the <head> section.


Content: <body>

The <body> tag contains all of the content that will show in your webpage.

The rest of the tags mentioned below should go inside the <body> tag.


Headings: <h1>

The <h1> tag is a heading and is rendered in large bold text on its own line.

There are other heading tags: <h1> is the biggest, <h2> is the second-biggest, down to <h6> which is the smallest.

<h1>Content of h1 tag</h1>
<h2>Content of h2 tag</h2>
<h3>Content of h3 tag</h3>
<h4>Content of h4 tag</h4>
<h5>Content of h5 tag</h5>
<h6>Content of h6 tag</h6>

Content of h1 tag

Content of h2 tag

Content of h3 tag

Content of h4 tag

Content of h5 tag
Content of h6 tag

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.


Paragraphs: <p>

The <p> tag tells the browser that the content is a paragraph. Any content between an opening <p> tag and a closing </p> tag will be rendered as a block of text. So this:

<p>Space: the final frontier. These are the voyages of the starship Enterprise. Its continuing mission: to explore strange new worlds. To seek out new life and new civilizations. To boldly go where no one has gone before!</p>

<p>You are traveling through another dimension, a dimension not only of sight and sound but of mind. A journey into a wondrous land whose boundaries are that of imagination. Your next stop, the Twilight Zone!</p>

Is rendered as this:


Space: the final frontier. These are the voyages of the starship Enterprise. Its continuing mission: to explore strange new worlds. To seek out new life and new civilizations. To boldly go where no one has gone before!

You are traveling through another dimension, a dimension not only of sight and sound but of mind. A journey into a wondrous land whose boundaries are that of imagination. Your next stop, the Twilight Zone!


Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

The <p> tag might not seem very important, but HTML ignores whitespace between tags. That makes it hard to split your text up into paragraphs. Try modifying this example to not include the <p> tags to see what I mean. You’ll see that the text gets combined into one big block of text, which makes it harder to read. Use the <p> tag to split your text up into smaller chunks!


Lists: <ul> and <li>

The <ul> tag creates an unordered list, which is a list with bullet points in front of each item. The <li> tag is a list item inside that list. For example, this HTML:

<ul>
  <li>Cats</li>
  <li>Dogs</li>
  <li>Lizards</li>
</ul>

Is rendered like this:


  • Cats
  • Dogs
  • Lizards

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.


Images: <img>

The <img> tag lets you add images to your webpage. To use the <img> tag, you need to know the URL of an image file. For example, I know I have an image located here: https://happycoding.io/images/stanley-2.jpg

So I can use it in an <img> tag like this:

<img src="https://happycoding.io/images/stanley-2.jpg" />

Note: You can also use a relative path. For example, if your image file is next to your HTML file, you can use a path like <img src="image.jpg" />, without the rest of the URL. This is handy if you’re writing HTML using a file on your computer!

The <img> tag is a little different from the other tags you’ve seen so far.

  • The <img> tag does not have any content.
  • It also doesn’t have a closing </img> tag. Instead, it has a slash / at the end of the tag. This is called a self-closing tag.
  • Instead of content, it contains an attribute named src that points to the url using the equals sign = followed by the URL inside " " quotation marks.
Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.


Links: <a>

The internet is made up of a bunch of webpages that all link to each other, forming a web of pages. You can link to another page using the <a> tag.

The <a> tag has an href attribute that points to a URL, and content that specifies the text. The browser shows that text as a link, and when the user clicks it, the browser navigates to the href URL.

For example, this HTML:

<p>Learn more at <a href="https://happycoding.io/tutorials/html">Happy Coding</a>!</p>

Is rendered like this:

Learn more at Happy Coding!

Note: Similar to images, you can also use a relative path for the href attribute. So if you have an HTML file named other-page.html that’s next to the current file, you can use a link like this:

<a href="other-page.html">My Other Page</a>

This comes in handy if you’re writing HTML using a file on your computer!


Finding Other Tags

This tutorial introduced a few of the tags you’ll see most often, but there are a TON of other tags. Check out W3Schools or Mozilla Developer Network for a complete list.

When you’re coding, a big part of the process is looking information up and learning more as you need it. Don’t try to memorize every single HTML tag! Instead, get into the habit of searching for tags when you need them, and then reading through documentation to learn more. Experiment, see how it works, and then add it to your code!

For example, let’s say I wanted to highlight a section of my webpage, but I wasn’t sure how to do that. I would search the internet for terms like “html highlight tag” and read through the results. I might find the W3Schools page for the <mark> tag, and I’d read through that and try it out to see how it works. Then I’d write something like this:

Some of <mark>this text</mark> is highlighted!

And it would display like this:


Some of this text is highlighted!


Being able to search the internet, read documentation, and experiment are all very important skills when you’re writing code. Rather than trying to memorize a bunch of tags, try to practice that process!


Nesting Tags

You might have noticed that in addition to text content, HTML tags can also contain other HTML tags. For example, you could have an <img> tag inside an <li> tag inside a <ul> tag, which would show an image in a bullet-point list.

This is called nesting tags, and it happens all the time in HTML. When you build a webpage, you’ll need to choose the right combination of tags to specify your content exactly how you want to.

But note that it doesn’t make sense to nest certain tags. For example it doesn’t really make sense to have a <p> tag inside the <head> tag, since the <head> tag is only for stuff that isn’t shown to the user.

This will become more obvious as you practice more, but it can be confusing so I wanted to mention it now.


Homework

  • Try to use all the tags you’ve learned so far in your webpage. List a few of the things you enjoy, add a picture of your cat, etc.
  • Look at W3Schools and Mozilla Developer Network to find some other tags. A lot of programming is using resources like these and trying things out. Try to figure out what the <hr> tag does. What does the <details> tag do?



Comments and Questions

Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!