Text tags are some of the most basic, but also important tags you’ll use throughout your day-to-day web development. Depending on which type you use, text tags typically provide some sort of default styling in which the browser will render your content (headlines should be big and bold, paragraph text should be small and readable).

Text tags are also there to help you, as a developer, understand what kind of content is contained within them, so you can better understand your code.

For instance, let's say we want to display the text "Christopher Lis' Portfolio Site" on our site. We can wrap this text in any valid HTML tag, and the browser will render it accordingly:

<h1>Christopher Lis' Portfolio Site</h1>
<h2>Christopher Lis' Portfolio Site</h2>
<p>Christopher Lis' Portfolio Site</p>

Christopher Lis' Portfolio Site

Christopher Lis' Portfolio Site

As you can see, each of these tags works for rendering out our text, the difference is:

The default size and font weight in which the text is displayed
The syntax of the actual tags (h1, h2, and p)

Eventually, you'll see that the default styling applied to these tags can be changed based on your needs, but based on the current defaults, we are able to tell, just from our code, that the h1 tag's content should render large and bold, the h2 tag will render bold, but a bit smaller than the h1 tag; and the p tag will render out as if it were meant to be read within a paragraph.

Heading Tags

There are a total of six headline tags you can use within your HTML development:

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

The smaller the number, the larger your text will be rendered—so text within <h1></h1> will be rendered the largest, while <h6></h6> text will be rendered the smallest.

Heading tags are used to introduce some sort topic—they're big and bold, so they stand out when used next to standard paragraph text. If your content extends past 2-3 lines, it's probably a good indicator you'll want to use a <p></p> tag instead of a heading tag. Heading tags are great for catching attention, but when it comes to readability—large, bold text doesn't do well in paragraph format (there's a reason why paragraphs in books are typically printed in 12pt font [easier to read and digest content]).

Anchor Tags

Anchor tags allow you to link from one website to another. In code format, they look like this:

<a href="https://chriscourses.com/">https://chriscourses.com/</a>

Rendered out, the anchor tag looks like:

https://chriscourses.com/

This tag introduces the concept of an HTML Attribute, a predefined keyword, placed within an opening tag, that determines a specific behavior for the tag. Here, the href attribute determines what website you'll be redirected to when you click on the text "chriscourses.com."

The href attribute can be set to what's known as an absolute URL or a relative URL.

An absolute URL is a URL that contains all of the components required to form a visitable address on the web: a protocol http://, a domain name chriscourses, and a top level domain .com. Combined, these three components form an absolute URL which looks like:

https://chriscourses.com/

Absolute URLs are typically used to link to external websites, but what if we wanted to link to a different page on the same site we're developing? In this case it would make more sense to use what's known as a relative URL.

A relative URL is a small string of characters that determines what page a user should be directed to, relative to a site's root domain. It looks something like this:

/about.html

Notice, the protocol and domain name components are omitted from this type of URL (no http:// or chriscourses). A relative URL saves you the time of having to type in these additional components. By default, when used within an anchor tag, a relative URL will redirect you to a page called about.html, which is relative to whatever your root domain might be.

For instance, if my root domain was google, and I added the following anchor tag:

<a href="/about.html">About</a>

We'd automatically be redirected to https://google.com/about.html on click since about.html is relative to google.

An added benefit of using relative URLs over absolute URLs is that is that your link structure will remain intact during domain name changes. Say we wanted to keep our code as is, but change our domain name from google.com to chriscourses.com. If we were to use absolute URLs throughout all of our anchor tags:

<a href="https://google.com/">Home</a>
<a href="https://google.com/about.html">About</a>
<a href="https://google.com/contact.html">Contact</a>

We'd have to change each of these absolute URLs manually after we update our domain:

<a href="https://chriscourses.com/">Home</a>
<a href="https://chriscourses.com/about.html">About</a>
<a href="https://chriscourses.com/contact.html">Contact</a>

However, if we were to use relative URLs from the start:

<a href="/">Home</a>
<a href="/about.html">About</a>
<a href="/contact.html">Contact</a>

We wouldn't have to update any of our code after the domain switch, since by default, relative URLs are relative to whatever the root domain is.

5 Question Quiz

Layout Tags

Comments