tutorials / html / html-tags

HTML Tags

tutorial html basic

Now you know that an HTML file contains tags that mark the content so the client knows how to render that content.

There are a ton of HTML tags, and programming in HTML is often a matter of choosing the correct tags and combining them to make a webpage.

As a reminder, here’s a basic example of an HTML file:

<!DOCTYPE html>
<html>
	<head>
		<title>My First Webpage</title>
	</head>
	<body>
		<h1>Happy Coding</h1>
		<p>Hello world!</p>
	</body>
</html>

Let’s get started by going over these tags.

Document type: <!DOCTYPE html>

This line tells the browser what type of document it is. 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 will render incorrectly.

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 rendered as HTML.

Page info: <head>

The <head> tag contains stuff that you don’t want to show as content, but can contain stuff that the browser needs to know about.

For example…

Tab title: <title>

The <title> tag contains the title of the website, which the browser displays as the name of the tab. Note that this does not show up in the content of the page, because it’s inside the <head> section.

Alternatively, you can type a file:// url into your browser to open the file. For example, if I saved my index.html file onto my desktop, I would type file:///C:/Users/Kevin/Desktop/index.html into my browser to open the file.

Anyway, when you open the file, you should see a page that looks like this:

Content: <body>

The <body> tag contains all of the content that will be shown to the viewer of the file.

The rest of the tags in this tutorial should go inside the <body> tag.

Headings: <h1>

The <h1> tag is a heading and is rendered in bigger and bolder 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 client that the content is a paragraph. Any content between an opening <p> tag and a closing </p> tag will be rendered as a paragraph. So this:

<p>Hello world!</p><p>I am writing html!</p>

Is rendered as this:


Hello world!

I am writing html!


Code Editor

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

Notice that the content is rendered as two separate lines, even though we only entered it as one line. That’s because we’re using two separate <p> tags, and the content in each tag is rendered as a paragraph. By default, a paragraph is rendered as a block of text that gets separated by other blocks of text with a blank space between them. In other words, our markup (the <p> tags) tells the client (your web browser) how to render the content (as two paragraphs).

Other Tags

That covers the tags that we’ve seen so far. But there are a TON of other tags. Check out W3Schools or Mozilla Developer Network for a complete list, but I’ll add a couple more that you’ll probably see pretty often.

Lists: <ul> and <li>

The <ul> tag signifies an unordered list (which is a list with bullet points in front of each item), and the <li> tag is a list item inside that list. For example:

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

Is rendered like this:



Code Editor

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

Images: <img>

The <img> tag allows you to 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: http://HappyCoding.io/tutorials/processing/images/images-1.png

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

<img src="http://HappyCoding.io/tutorials/processing/images/images-1.png" />

The <img> tag is a little different from the other tags we’ve seen so far, so notice a few things:

Code Editor

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

Nesting Tags

As you’ve seen, tags can contain content and other 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 is completely normal. 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.

Example

Here’s an example that contains the tags we’ve talked about so far:

<!DOCTYPE html>
<html>
	<head>
		<title>Example Webpage</title>
	</head>
	<body>
		<h1>This is a title!</h1>
		<p>This is a paragraph.</p>
		<p>This is another paragraph.</p>
		<ul>
			<li>This is a list.</li>
			<li>It has bullet points.</li>
		</ul>
		<img src="http://HappyCoding.io/tutorials/processing/images/images-1.png" />
	</body>
</html>
Code Editor

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

Homework

Next: CSS