Beginner’s Guide to HTML: Part 2 – 21 Common HTML Tags and What They Do

It’s time to start building!

Now that you know how to set up an HTML document, it’s time to get familiar with common HTML tags that will be most useful in putting your project on the screen. For those of you who missed Part 1 of this series, tags are the building blocks of HTML. Opening and closing <tags></tags> that share a name make up an HTML element that becomes part of the DOM and can be altered by other languages like CSS and JavaScript. 

This module will focus on the first and most important tags you need to learn to become an expert in Hypertext Markup Language. If you’d like to learn how to connect a CSS stylesheet to your HTML document, I’ll be including that process at the end of the article.

Remember From Part 1

For those of you who missed Part 1 of this series, here are some principles that will help you understand what you’re doing:

  1. Tags are the building blocks of HTML. 
  2. HTML Elements are made up of opening and closing <tags></tags> that share a name. 
  3. When a set of tags is placed between another set, the outer set becomes the parent element and the inner set becomes the child. Multiple children inside the parent element are called siblings. You can have as many generations of tags within tags as you need to.
  4. Content should be placed between the opening and closing tags, like this: <p>This text will show up on the screen.</p>
  5. Elements become part of the DOM (Document Object Model).
  6. Languages like CSS and JavaScript work with HTML by can altering the DOM.

Every HTML document starts the same way, and it’s good to practice so that you understand how the language works. But sometimes it’s just a pain to set up an HTML document the same way every… single… time. And for those times, here’s some boilerplate code to get you started so you can focus on implementing these elements!

Boilerplate HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Example Website</title>
        <link rel="stylesheet" href="./style.css">
        <link rel="icon" href="./favicon.ico" type="image/x-icon">
    </head>
    <body>
        <h1>Hello, World!</h1>
        <p>Welcome to my website, where you’ll find all the awesome stuff I do.</p>
        <script src="index.js"></script>
    </body>
</html>

Simply copy the code above into your preferred text editor and you’re off to the races! Here’s a link to Visual Studio Code, the best choice for most developers. To start seeing results, simply enter any of the elements below between the <body></body> tags and give them values inbetween the opening and closing tags of the element, like this:

<body>
    <h1>This Example Is About Buttons!</h1>
    <p>Buttons are useful on the web.</p>
    <p>Whew! I’m tired. Gonna take a nap.</p>
    <h2>On second thought…</h2>
    <p>I guess there’s not much info here, why don’t you read about buttons on W3docs?</p>
    <form action="https://www.w3docs.com/snippets/html/how-to-create-an-html-button-that-acts-like-a-link.html">
         <button type="submit">Visit W3docs</button>
    </form>
</body>

I will be publishing a complete list of HTML tags and an accompanying cheat sheet in a future article, but these will serve you well for general-purpose websites of moderate complexity.

The most important thing when you’re first learning is to have fun with it. Get creative! Use images, make a shopping list, write out the instructions to cook an eggplant, create a form that doubles as a spy-recruitment quiz. Learning should be fun. Take what you learn here and roll with your imagination!

Photo by Hal Gatewood on Unsplash

Common HTML Tags

Sections and The Almighty Div

Section:

<section>
    <div>
        <p>...There's some paragraph text in here.</p>
        <p>...Oh, really? There's some in here, too.</p>
    </div>
</section>

Sections are exactly what they sound like: sections! Instead of letting your elements sprawl all over the page, these elements help break up the page into manageable chunks.

Division:

<div>
    <p>...Whoa, there's paragraph text everywhere!</p>
    <p>...You're not kidding!</p>
</div>

If there’s one tag that could rival the paragraph in terms of overall use, it’s the div tag. It stands for division, and is technically supposed to help divide up the page into useable blocks with smaller components inside, like a subsection.

Often, though, it’s used as a default or catch-all tag. For instance, you can use a blank div (or almost any tag, really) as a placeholder item or a simple game element like a box, wall, or even a simplified game character. Just give it some width and height attributes and a background color, and you’ve got yourself an element that can serve almost any purpose!

Photo by Wesley Tingey on Unsplash

Text Styles

Programming languages have a concept of string data. This is readable text as opposed to integers or boolean data, which I won’t get into for the sake of your concentration at this point. In most cases, a string of text placed between opening and closing tags will be rendered, and the default font family and size will be applied to it automatically, provided that no external styles affect the element.

Titles and Headings

The heading tags are programmed to be displayed as much larger than body copy. The purpose of this is to give a clear visual hierarchy among the contents of each webpage. There are six heading tags, and they look like this: 

Heading 1: 

<h1>I’m a Title, Aren’t I Magnificent?</h1>

H1 is considered the title heading and will appear largest on the screen. H2 through H6 are respectively smaller and are used to further delineate hierarchy throughout complex pages.

Heading 2: 

<h2>I’m a Subheading and Therefore Just As Helpful and Important As… Some People.</h2>

Most of your headings should be H2s. That’s because browsers assume that an H1 tag should be considered the title of a piece, and more than one in the same article can confuse them. Use H2s to break up your whole piece into smaller chapters.

Heading 3: 

<h3>I’m a Sub-Subheading and I Help Out Sometimes.</h3>

If H2s are chapter headings, then H3s are sections within each chapter. In most of my articles, H3s end up announcing tools, techniques or other items that fall into a larger category within my topic.

Heading 4: 

<h4>I Prefer the Term “Underprivileged” to “Useless” Thank You Very Much.</h4>

Now were getting into headings that aren’t used very often. Most articles are designed to be simple to read, and as such, don’t need more than two or three levels of organization. But for those deep subjects (like a few I’ve written on), H4s, H5s, and H6s exist to help you break down difficult concepts for your readers.

Heading 5: 
<h5>I Try But Nobody Really Cares What I Get Up To… I Like Meercats. What’s Your Favorite Color?</h5>

If you’re using an H5, you may want to consider whether there’s a clearer way to format your information. But sometimes there just isn’t, so feel free to use an H5.

Heading 6: 
<h6>Oh I’m Just a Bill, Yes I’m Only a Bill, and I’m Sittin’ Here On Capital Hill… Damn, that’s catchy! Oh, Uh… Yeah, I’m a Subheading I Guess. Who’s Asking?</h6>

I think I’ve used an H6… maybe once in my (admittedly short) career so far, and that was just now above this paragraph to show you what they look like. But hey, it’s your article, not mine. 

Photo by Finn Mund on Unsplash

Body Text

If you remember from school, the main content of a piece of writing is called the body. In graphic and web design, it’s generally any text that’s not a heading, a navigation link, a button, or some other format that isn’t part of the main text. 

Paragraph: 

<p>I’m a paragraph. You’ve probably seen me online. Yeah, I’m famous. People tell me I go on too long, but I know I’m growing on them. I’m the paragraph… I mean, who hasn’t had their eyes all over me. Some people even come back for a second look. Anyway did you want an autograph, or…?</p>

The paragraph tags house the main copy (text) of your page. In most cases, you can think of paragraph text like the default, and other tags as variations on the default. 

Link: 

<a href=”https://studiooriley.com”>Don’t you wish you were somewhere else right now? Why don’t you go there?</a>

Links are the highway part of the term, “information super-highway.” You place your anchor text (the visible text) between the tags, then use the “href” attribute to specify a destination URL. We’ll cover this and many other attributes in the next part of this HTML series, but links don’t function without URLs, so I included this one to give you a useable example of the <a></a> tags.

Span: 

<p>I’m a simple paragraph, minding my own business.<span>Hi, I’m the span for this paragraph. I have a very particular set of skills. You could say I specialize in inside jobs.</span> Nothing to see here. *Whistles whimsically</p>

Spans are interesting. They’re almost more like a subtag than a tag. They’re specifically designed to go inside other tags to single out certain sections that should be styled differently from the rest of the element. Say you want to underline a single sentence in your paragraph and leave the other sentences untouched. A span would accomplish that for you by allowing you to add a class or ID to the text it contains and style it separately, however you wish.

Bold: 

<p>Alone, we are weak, <strong>but together, we are strong.</strong></p>

The <strong></strong> tags allow you to emphasize certain text within a paragraph, heading, link, list, or other text element.

Line Break: 

</br>

The line break tag does exactly what the name suggests, placing the text after it one line down in the same paragraph. This is useful when you want a new line, but don’t want to create a whole separate paragraph for it in your code.

Ordered List: 
<ol>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ol>

The ordered list lets you make numbered lists. They’re great for text that describes processes or concepts that are best represented in a logical or chronological order.

Unordered List: 
<ul>
    <li>A List Item</li>
    <li>Another List Item</li>
    <li>One More List Item</li>
<ul>

The unordered list allows you to create lists that render in bullet points instead of numbers. These are great for lists that don’t need to be represented in any particular order.

List Item: 
<li>Thing 1</li>
<li>Thing 2</li>
<li>Thing 3</li>
<li>Thing 4</li>

List items go between ordered list tags or unordered list tags, as shown in the examples above. They allow us to show information in a quick and succinct manner, preformatted to show that it’s distinct from normal paragraph text.

Photo by Pinho . on Unsplash

Media and Downloads

In HTML, there’s a tag for everything. And if somehow you can’t find the tag you need, you can just make one up! That being said, some tags are preprogrammed to take certain attributes, and won’t work without them, like the following.

Image: 

<img src="frowningclown.gif" alt="Frowning Clown" width="42" height="42" style="vertical-align:bottom">

The image tag takes a source attribute (src=””) so it knows which folder or server to pull it from, an alternative text attribute (alt=””) to help with accessibility, and various optional attributes like width (width=””), height (height=””), and style (style=””), to name a few. 

While it’s possible to add images in other tags using various methods in CSS and Javascript, this dedicated image tag is designed to simplify the process. Images are all over the web, and this is the easiest way to tell a browser to render them in HTML.

Video & Source: 
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
</video>

To add a playable video to your site, you use the video tag with attributes for width, height, and controls. The controls attribute specifies that video control buttons should be shown, like play and pause. 

Inside, place source tags with source (src=””) and type (type=””) attributes to specify where the DOM can find the video file. Here’s an article on the .ogg file type if you’re unfamiliar with it.

Audio: 
<audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
</audio>

The audio tag works much the same way as the video tag, but make sure to use audio file formats in your source attributes!

Photo by KOBU Agency on Unsplash

Forms and User Input

The better you get at web development, the more everything becomes about collecting, storing, sorting, and displaying user data. Forms allow us to ask questions and collect answers for nearly unlimited purposes. Here are the first few tags you should learn about if you want feedback from visitors to your site.

Form: 
<form>
    <label for="fname">First Name:</label><br>
    <input type="text" id="fname" name="fname"><br>
    <label for="lname">Last Name:</label><br>
    <input type="password" id="lname" name="lname">
    <input type="submit">
</form>

The above would render a basic form with two questions and a submit button. Each element in the form must go between the form tags in order to be included. Let’s talk about what each of these elements does. 

Input: 

<input type="text" id="lname" name="lname"><br>

You’ll notice in the Form example that each input has a label tag above it. Labels can come first or second. The order doesn’t matter because which input field each one applies to is taken care of using names. Each input field should have a unique name that the label can reference. 

Label: 

<input type="password" id="lname" name="lname">

A label is text that goes above each input field. As long as the names match, the label and the input field are connected. 

Button: 

<button type="button” onclick=”doSomething”>Click Me!</button>

Or…

<input type="submit">

There are actually even more ways to make a button, but these are the two most common and straightforward methods. The first way takes a type attribute (type=””) and an on-click attribute (onclick=””). There are three types of button which you can learn more about here

  1. submit – Submits form data to a specified destination.
  2. button – No default behavior, requires JavaScript (JS) code to determine an action.
  3. reset – Resets form fields and controls to their original state. 

The on-click attribute’s value is the name of a JavaScript function. I’ll be writing a JS series soon, so stay tuned for that. For now, suffice it to say that you can write a function in JavaScript that can be executed when a user clicks a button that references its name in HTML.

The second way is to simply use another input tag and give it a type of “submit” or “button!” This creates a button that will submit your form or perform the action specified by the JS file for your project.

Moving On

There is much to learn of HTML, too much to focus on as a beginner. I recommend that you get familiar with these 21 tags before jumping into more complex ones. Remember, you can make up tags as you go if you like. If it’s useful to you, you can create hamburger tags and tugboat tags, and the HTML document will work fine as long as you use the correct syntax. 

In the near future, I’ll be releasing more articles, diving deeper into HTML concepts like forms. In the meantime, I’m going to fulfill another promise and teach you how to connect a CSS document to an HTML document. With this final piece of information, you’ll have leveled up as a web developer because you will have proven your ability to unify two powerful languages!

Photo by Maik Jonietz on Unsplash

Connecting a CSS File in HTML

This is pretty simple, actually. Remember the <head></head> tags in the HTML boilerplate code? The link to your CSS document goes in there in a link tag, like this:

<link rel="stylesheet" href="styles.css">

You can copy that line of code, paste it somewhere between your head tags, and replace the value in the href attribute with the path to your own CSS file. Once you’ve done this, your HTML and CSS are connected and you can start styling your elements! Visit this link if you’d like to begin learning Cascading Style Sheets!

Wrapping Up

Part 3 will be all about attributes. If you know anything about photography, you can think of HTML attributes kind of like metadata for each element. If you know rather less than that about photography, you can think of them simply as a way to specify information about elements, like their names, whether they’re downloadable, or if they’re connected to a JS function.

Thanks for reading! If you have any questions, feel free to leave them in the comments. I always answer comments, and if enough people have the same question, I’ll write an article to answer it!

Leave a Comment

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