Hostwinds HTML Hype Part 2: Tag Talk

HTML Tag Talk Blog Post

Hi there! Get yourself ready for some more Hostwinds HTML hype because today we’re getting into the topic of HTML tags. Due to the fact we’ll be releasing a blog post in the imminent future (PPPSSSTTT….”imminent future” = tomorrow!) providing viewers with detailed instructions as to how to build a very basic blogging website from scratch starting with HTML, the Hostwinds Team thought it would be prudent to first give you a little synopsis/overview of pertinent HTML tags so we can refer to this post as we build our website. Without further delay, let’s begin with a definition of an HTML tag.

WAIT, important delay! I recommend taking a look at the previous Hostwinds blog post regarding HTML if the language is completely new to you:

Hostwinds HTML Hype

Okay, no more delays…here we go!

 

Definition of HTML Tags

I think I’ll let one of our Front-Line experts, Abigail, take this one. In the Knowledge Base guide she wrote entitled “How to Create a Custom Landing Page Using HTML and CSS,” she describes exactly what it is that tags do:

“Tags are how we identify different elements in our HTML document and will generally come in pairs. Most tags will have a start <>  and an end </>, some tags will not have the second tag and will end with a /> this is called an  ’empty element’, mainly seen on links and images.”

By the way, that guide can be found here:

How to create a custom landing page using HTML and CSS

The tags that amount to an HTML document go in order, denoting the content you’d like to place on your website from the very top to the very bottom. It is important to note that the content you put on your website via HTML tags does not go from left to right by default. In fact, it goes down the page in order by default. In other words, the second thing you display on your website will go directly below the first, the third thing you display on your website will go directly below the second, and so on.

Here is a sneak peak of the first HTML document we create in the website building blog series debuting tomorrow (to give you a better understanding of the way tags look on an HTML document before we proceed):

IMPORTANT NOTIFICATION: When the chunk of code I insert into these blog posts is too long to fit into the window, a little scroll bar will appear at the very bottom of such code when you hover your mouse over that area. You can slide the scroll bar to the right to view the entire chunk of code. Keep this in mind throughout this blog post as well as Parts 1 – 3 of this blog series.

 

Now, here are a bunch of HTML tags that you very likely see in an HTML document:

 

Types of HTML Tags

1. H Tags = Heading Tags

Anything between the <h1></h1> tags denotes an extra extra large heading.

Anything between the <h2></h2> tags denotes an extra large heading.

Anything between the <h3></h3> tags denotes a large heading.

Anything between the <h4></h4> tags denotes a medium heading.

Anything between the <h5></h5>  tags denotes a small heading.

Anything between the <h6></h6> tags denotes an extra small heading.

 

2. P Tags = Paragraph Tags

Within the opening and closing paragraph, one can place a decent amount of text. This tag is fairly self-explanatory. Place a paragraph of text between an opening and closing paragraph tag.

Example: <p>Here is a bunch of text I decided to put within my opening and closing paragraph tags.</p>

 

3. A Tags = Anchor Tags

Anything between the <a href=“”></a> tags denotes a link to another web page or site. The following example would display the text “Click Here to Visit Hostwinds’ Website” on your website and if your website users clicked on that sentence, they would be directed straight to Hostwinds’ website:

You can even link to another spot on the same web page you’re on using an anchor tag. For example, if I have a link at the top of my web page that says “About Me” and I want users to be directed to the portion of the page where I have a paragraph about me, I would type the following code:

Then I would give the <p> tag wrapping around the paragraph of text about me an ID like so:

The hashtag (#) in front of the anchor tag’s value (aka name) means it is targeting the ID of another element in the document. In this case, I am targeting the <p> tag’s ID. The <a> tag and <p> tag in this example create an effect on my hypothetical website that allows users to click a link that says “About Me” to bring them straight to the paragraph about me.

Quick Sidenote: Defining Classes and IDs

This brings us to another HTML topic: IDs!

Just to review, the id=“me” states that whenever I type #me (the # denoting an ID) in an opening anchor tag, I want to link to that line of code and do something with it. We’ll go into more detail about this later.

P.S. IDs are very important when linking your HTML code to your CSS code, as they are one of the ways to identify which individual HTML elements you would like to spruce up with your CSS code. Our ID example is one of many ways software developers use IDs.

Again, if someone were to click the “About Me” link at the top of my hypothetical web page, they will be taken immediately to that paragraph of text about me on the page. Cool, right!?! What’s that? I’m a total coding nerd? Oh, that’s absolutely no secret and no surprise to me.

Moving onto the next HTML topic: Classes.

Classes and IDs are both known as attributes. We’ll go over a bunch of other attributes later, but the important thing to know about attributes right now is this: They clarify things about the element. We already saw how adding an ID to an opening tag helps clarify what you want to do with the element and/or how you want to modify the element. Classes are also a way to target HTML elements.

The difference between IDs and classes was beautifully summed up by Hostwinds’ Art Director, Cole. Cole explained the following to me:

“If you are addressing an individual element, then you want to address it by ID. If you want something to be a repeatable style that is used for multiple elements, then you would use a class.”

In other words, tac an ID onto a tag if you want to target that element and that element only. Tac a class onto multiple tags if you want to target more than one element and modify them in the exact same way.

The following example illustrates how a class looks within an opening tag and how a class can be helpful when modifying your HTML elements with CSS:

Let’s say you have the following code on your website:

Now, let’s say you want to make only that heading and that paragraph within your website the color hot pink. In order to specify that you want to only modify those two elements, you could give them the same class name (also called the “class value”) like so:

You can now target this class in your CSS document (which we’ll go over when we in Part 3 of this blog series as we create a CSS document to make the HTML documents we are making in parts 1 and 2 of the blog series prettier) and command the browser to make elements with the class value (aka class name) “ClassName” hot pink!

When you assign the same class value to multiple elements, you are telling the browser to do the exact same thing to those elements and only those elements.

Although there are common practices and naming conventions in regard to choosing the value of your IDs or classes, it is up to you what you name each of your classes or IDs.

 

Back to the Anchor Tag

One more cool thing you can do with an anchor tag:

You can send your users from one of the web pages on your site to another using an anchor tag. For example, let’s say I have a hypothetical website called “Erin’s Photos & Music.” When I am coding the homepage, I want to give my viewers the option to click a link that takes them to a web page that has my photos on it. I also want to give my viewers the option to click another link that takes them to a page that has my music playlist on it. I named the HMTL file for my photos web page “photos.html” and the HTML file for my music web page “music.html.” My anchor links on the homepage would look like this:

I am geeking out so hard right now on all this coding stuff! Okay, let me pull it together so we can learn more. Okay, I’m good.

 

4. Br Tags = Break Tags

& Hr Tags = Horizontal Line Tags

The <br> tag expresses a space or break between two parts of the web page. This tag can also be typed <br/> and it is known as a self-closing tag. <br> is also an example of what is referred to as an Empty Element. There is nothing (aka no content) between or inside the break tag, so the element itself is empty.

<hr> tags represent a horizontal line separating two elements on your web page. <hr> tags are also self-closing tags.

 

5. Ol Tags = Ordered List Tags

& Ul Tags = Unordered List Tags

Here is another awesome group of tags. The list items (denoted by <li></li>) between the opening and closing <ol> (ordered list) tags will appear on your website with numbers to their left. The list items between the opening and closing <ul> (unordered list) tags, however, will just appear in order without numbers to their left.

<ol></ol> = ordered list opening and closing tags

<ul></ul> = unordered list opening and closing tags

Example of an ordered list of reasons why the Hostwinds blog is the greatest:

This is how that would appear on your website:

1. The Hostwinds Blog is hilarious.

2. The Hostwinds Blog is informative.

3. The Hostwinds Blog is unique.

Whoa, so much bragging on my part there! Don’t worry, we’re moving on from boasting to a fun tag – the image tag!

 

6. Img Tags =  Image Tags

The image tag is another example of a self-terminating tag, as it requires no closing </img> tag.

An image tag looks something like this:

The “src” part stands for “source” aka where the image comes from (aka the file path to the image).

Notice the “alt=” section of the image tag above. This is where you want to write a small amount of text that will show up as a placeholder for your image in the event such image can’t be displayed on the page for some reason.

We will go over some more file path information in the next blog post so you can make sure your browser will know how to grab the images you’d like to present on your website.

 

7. Button Tags = …Button Tags!

Button tags represent a button on your web page that users can click to direct them somewhere else or to generate a pop-up, for example.

Button opening and closing tags: <button></button>

Between the opening and closing button tags, type what text or image you want to have inside the button (such as “Click Here to View My Photos”).

 

8. Table Tags = …Table Tags!

If you’d like to place a table on your website, simply use the following tags to organize the rows and information in the table (<tr></tr> tags stand for “table row” tags and <td></td> tags stand for “table data” tags):

 

9. Nav Tags = Navigation Bar Tags

Navigation bar opening and closing tags: <nav></nav>

Place links that you want to appear within a navigation bar between the opening and closing <nav> tags. This is where those anchor tags come in handy. Why, you ask? Anchor tags or button tags are typically situated between opening and closing <nav> tags, as links to various areas of one’s website are contained within a navigation bar.

An example of a chunk of code that constitutes a navigation bar:

 

9. Header Tags = …Header Tags!

& Footer Tags = …Footer Tags!

Anything between the opening and closing header tags is something that goes in the header of your web page.

Header opening and closing tags: <header></header>

Anything between the opening and closing footer tags is something that goes in the footer of your web page.

Footer opening and closing tags: <footer></footer>

 

10. Div Tags = Division Tags (, but we just call them “div tags”)

How could I forget this very crucial tag! Div tags break up sections of your web page so you can better specify which part of the page you want to target with your CSS or other code. For example, let’s say again you have the following code on your website:

Now, let’s say, again, you only want to make that heading and that paragraph within your website the color hot pink. In order to specify that you want to only modify those two elements, rather than making them the same class, you could put div tags around them like so:

That way, when you edit those two elements with CSS, you can target the <div> tag and modify the whole chunk of code between the opening and closing div tags.

P.S. Div tags are also known as containers because they contain and block off certain elements so you can more easily define what you want to do with such elements.

That concludes our HTML tag talk, but there are many more HTML tags one can employ. Although we went through a lot of the most important tags, I highly recommend looking up the list of HTML tags.

Another Tip: Check out the “form” and “input” tags that allow your website’s viewers to fill out forms and send in information within your website.

 

Nesting Tags

Nesting is the name for the process by which we place tags within other tags in an HTML document. Allow me to explain further. When you place <p></p> and <img> tags within the <body></body> tags of your HTML document, you are nesting those tags between the opening and closing tags because you want all those tags to be within the body of the web page. Anything you do to spruce up your body tags with CSS, for example, will also apply to every tag nested within the opening and closing body tags.

The following tags can be placed within <p></p> tags:

<u></u> tags = underline the text

Example:

This would show up on your website as:

I want to underline this part of the sentence.

<strong></strong> = bold the text

Example:

This would show up on your website as:

I want to bold this part of the sentence.

Example:

That image tag is nested between an opening and closing anchor tag.

There is so much more to cover as far as HTML goes, but I love HTML because you can sort of learn as you go with this language.

 

HTML Happiness

All done with our HTML tag talk. Now we are ready to make a website together starting with an HTML document. The anticipation is making me squirmy! The Hostwinds Team is excited to reunite with you tomorrow when we begin this website building journey together!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.