HTML Tagstutorial 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.
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.
Similar to the
DOCTYPE line, the
<html> tag tells the browser that anything inside of it is HTML. Anything between
</html> will be rendered as HTML.
<head> tag contains stuff that you don’t want to show as content, but can contain stuff that the browser needs to know about.
<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
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:
<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
<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
<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:
I am writing html!
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).
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.
<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:
<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" />
<img> tag is a little different from the other tags we’ve seen so far, so notice a few things:
<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 to indicate that this is a self-closing tag.
- Instead, it contains an attribute named
srcthat points to the url using the equals sign
=followed by the URL inside
" "quotation marks.
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.
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>
Try to use all the tags we’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