CodeUhi

HTML Tags (HTML Part 2)

HTML Tags (HTML Part 2)

Cody Uhi's photo
Cody Uhi
·

2 min read

Tags Tutorial (HTML Part 2)

Intro

In my first post, I shared with you the code snippet that you see below. We're going to talk about what all these symbols mean and how you can use them to structure your page.

<!DOCTYPE HTML>
<html>
    <head>
        <title>Hello</title>
    </head>
    <body>
        <h1>Hello</h1>
    </body>
</html>

Anatomy of a Tag

A tag is like a code word that you can type that tells the browser to structure the content a certain way. When we talk about "writing code", we mean that we write certain keywords that have special meaning and are interpreted according to that meaning. In HTML, these tags make up a lot of the code that goes into telling the browser how you want the page to look.

Tags usually have an opening tag and a closing tag. The opening tag signals that a tag is beginning and everything within that tag is part of the tag content. The closing tag signals that anything that comes after it is not part of that tag's content.

An opening tag starts with a < symbol, then has the tag code word (i.e. - head or some other code word) then a > symbol. Altogether, this looks like <head>.

A closing tag also starts with the </ symbols, then has the tag code word (just like the opening tag) then a > symbol. Altogether this looks like </head>

From our example, we see a few different tags being used. There's <html>, <head>, <title>, <body>, and <h1>. Some tags, like <img/> and <br/> are self-closing, meaning that you write the tag and all of its content is self-contained within the tag. We will explore some of those later.

Outtro

Thanks for joining for this explanation of HTML tags! Follow for more examples of using different tags to make a webpage look the way you want.

HTML5HTML