An understanding of the basic HTML tags is the foundational skill in web development. If a website is a house, each HTML tag is like a brick giving it shape. Just as you can’t understand how to build a house without understanding how to put up a structure, you can’t understand how to build good websites without understanding HTML.
With web development being one of the best tech jobs of 2022, mastering the basic HTML tags is an ideal place to begin learning.
What Are HTML Tags?
You’re reading this article on a website. Have you ever wondered how the computer knows what content to display and how to display it? What is it that makes some text bold, italicized, and some contain a link to another webpage?
Part of the answer is HTML tags. Once upon a time, HTML was the majority of code on the Internet. While that’s changed, HTML is still a significant part of getting content on the web.
HTML is a markup language. After a person writes content, they’ll need to mark it up with HTML to do things like distinguish the title from the paragraphs. Most of this is done by inserting tags throughout the content.
What Are The Basic HTML Tags?
An HTML tag is a special keyword surrounded by the sharp brackets < and >, such as: <body>. Tags almost always come in pairs, with one beginning tag and one ending tag. The difference is that ending tags have an extra slash inside the brackets:
<example>The first tag is the beginning and the second tag is the end. </example>
Here are 10 common HTML tags that any web developer should know about, and they’re especially important for those just starting out with learning HTML.
1. <html></html>
This is the root element tag. It designates that everything between these brackets contains HTML code.
2. <head></head>
This tag distinguishes the head of the web page from the content. This is where you put Javascript code or give ‘meta’ information about the web site.
3. <title></title>
Have you noticed that browser tabs contain text that gives you an overview of the website? That text is written as the site’s title with this tag.
4. <body></body>
The body tag specifies the actual content of the website.
5. <h1></h1>
This is a heading tag, which creates a title by making text bigger and making it bold. There are six heading tags: h1, h2, h3, h4, h5, h6, in descending order of size.
6. <p></p>
This tag specifies that a given section is supposed to be its own paragraph. Browsers usually insert blank spaces between paragraphs, making the text easier to read.
7. <a></a>
This tag let’s us create a link with its ‘href’ attribute, like so:
<a href=www.somewebsite.com>Click here</a>.
8. <img></img>
The ‘image’ tag is how you insert images into a web page.
9. <div></div>
Div tags group multiple pieces of content into a single container, which allows you to do things like apply separate styling to just that content
10. <span></span>
Span is like a smaller version of div, used to style or interact with inline content. You could add just a couple of words to a particular class (<span class=’endorsement’>Text</span>) which, again, is great for styling and making the content more responsive.
This should be more than enough to get you started building fantastic websites!
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
