☰

What are some of the common html tags that we use as web developers/designers?

Hello again everyone! Today we're gonna be going over 20 essential html tags that really help to organize and structure your website!

Structuring tags

These tags are just used to structure things in your html document to make it more readable and easier to understand!

<head>

This is a head tag. All the important information about the document is stored inside this tag, links to style sheets, scripts, the title of the webpage, etc.

<body>

This is a body tag. This is where all of the content of your website goes. Everything that the user sees goes in here, don't forget to put your scripts inside this tag as well!

<footer>

This is a footer tag. You can think of this as a small conclusion of your website, all of your contact information or any links to other websites can go in this section. This is always at the bottom of the website

<title>

This is a title tag. This is put inside the head tag, defines the title of your webpage (the text at the top of the tab)

<section>

This is a section tag. This tag is used in the body tag, and it helps to define individual sections of your webpage. Usually the background, text, or focus of the element will change from section to section.

<script>

This is a script tag. This tag is used in the body tag. You can store your javascript elements/code in here to spice up your website. Or you can link to front-end libraries/other scripts!

Text Tags

<h1> to <h5>

This defines big lettering/headings of areas, with <h1> being the highest and <h5> the least.

This is an h1 tag

This is an h2 tag

This is an h3 tag

This is an h4 tag
This is an h5 tag

<p>

This is a paragraph tag. Best used for groups of small text where you need to write a paragraph

<b>

bold text

This is a bold tag. This is used to make text bold

<i>

italic text

This is an italic tag. This is used to make text italic

<u>

underlined text

This is an underlined tag. This is used to make text underlined

<a href = "">

linked text

This is a link tag. This is used to make text link to somewhere else

listed tags

These are the tags that help to create a list in your html document

<ul>

  • This is an unordered list
  • This is list uses bullet points, to denote seperate list items!

<ol>

  1. This is an ordered list!
  2. It keepts track of items inside the list using numbers

<li>

This is a li tag, used to create items inside of a list

<div>

This is a div tag. This tag is used to store elements together, you can think of this as an alternative version of the section tag, except more customizable!

<button>

This is a button tag. This tag is extremely versatile! The button tag is used to create buttons on your website that can be used for anything from linking to other pages, creating interactive effects, or opening/closing a menu!