Basic Tags¶

HTML Tags are like atoms, and due to this, when we talk about a tag with content inside it, we call it an Element. The word “Tag” refers specifically to the HTML code in the format of <tag>.

You already know some basic tags from before, <html>, <head>, and <body>. These are structural and usually, only contain other tags. Tags can contain as many other tags as you like, and form what we call a Nested structure.

We can think of each tag as a box, which can contain many other smaller boxes, which themselves eventually contain useful bits and pieces. All tags can be nested, but some tags are useful only for creating an easy to navigate structure.

In the head, the <title> tag is used to change the title of the tab on the browser. This is useful for when humans have more than one page open, and should contain a short and meaningful title for the page.

<head>
   <title>My Wonderful Page</title>
</head>

Some useful content tags for the body are <p>, <h1>, <a>, <img> and <br>. Notice that in HTML, the more commonly used tags are very short. This is so that large web pages can be written faster, and so that HTML documents can be shorter and quicker to download.

<p> stands for “Paragraph”, and means that we want to display some simple text.

<p>Hello, world!</p>

<h1> stands for “Heading, size 1”, and means that we want to display a large text heading. <h2> is a slightly smaller heading, and the numbers go up to <h6> in most browsers, each time getting smaller.

<h1>Large text</h1>
<h2>Fairly large text</h2>
<h5>Smaller text, but bigger than a paragraph</h5>

<a> stands for “Anchor”, and means that when the user clicks on this content, they should be sent to another web page. <a> tags can wrap multiple elements, such as a <h1>, or a <p> tag, and will make the whole element click-able.

As a reminder, the attribute “href” stands for “Hypertext REFerence”, and tells the computer where to send the human if they click on it.

<a href=”https://google.com”>
   Google
</a>

<a href=”https://google.com”>
   <h1>Big Google!</h1>
</a>

We’ll cover a few more tags in the next post: Self Closing Tags