Hey, welcome to my blog post on 10 HTML tags that every beginner should know – from a beginner on the same journey as you! If you’re just starting out in coding HTML, these 10 HTML tags will be essential in helping you create well structured and eventually visually appealing web pages. When you combine these tags with 10 Most important CSS concepts every beginner should know, you will be off to a great start on your coding journey! So without further ado, let’s jump into the 10 HTML tags every beginner should know.
Basic HTML Document Structure tags
While this section includes 3 tags, I have grouped them because these are the 3 tags you need to add to every HTML document to get it to function correctly. Without these tags, you don’t have a working HTML document.
The HTML tag
Is the most important tag in an HTML document, it tells the web browser that everything that follows is HTML code. The <html> tag must be the first thing in your document and must be closed with the </html> tag.
The Head tag
This tag goes within the <html> tag and contains information about the document, such as the title, keywords and a description. It’s not essential to include this information, but it’s good practice, and can help your document rank higher in search engine results. See the <title> tag below. You can learn more about what to include in your head tag here
The body tag
This tag goes within the <html> tag. This is where you will add all of the content, text and images to your site.
So those were the three basic HTML document structure tags, now let’s move on to the tags that will help you format your content.
For a code example on the basic HTML document structure and a more detailed explanation of all of these tags click here
The Title tag
This tag could technically also be part of the basic document structure of an HTML document as it is required to be included in your <head> tag.
The title tag is used to add a title to your document, which will be displayed in the web browser tab and in search engine results and is a great tool to use for search engine optimisation (SEO).
Now that we have covered some of the more structural and required tags, let’s look at some HTML tags that will help you add content to your website.
As the name suggests, heading tags add headings to your content. There are six different levels of heading tags, <h1> being the most important and <h6> being the least important.
Heading tags should structure your content and make it easier for both people and search engines to understand what the content is about.
You should only use one <h1> tag on each page, as using more than one can be confusing for both people and search engines.
To get a more in-depth understanding of all of the heading tags that you have available to you in HTML and code examples, click here
Once you have added important headings to your webstie you would want to add more detail in the form of content. Adding content is mostly done through paragraph tags, which are up next.
The Paragraph tag
The paragraph tag or <p> is used to create paragraphs of text in your document and tells the web browser to start a new paragraph. Paragraphs should be used to break up your content while making it easy to read and easy for search engines to understand what each paragraph is about.
You should not use more than one paragraph tag per paragraph, as this will confuse both people and search engines.
Bonus tip: You can create spaces between the text in your paragraph tags by using the line break tag or <br>.
The Image tag
Almost every site on the internet, well the good-looking ones, has some form of a picture on them, be it a header image or a featured image. For that reason, the <img> tag cracks the list of the 10 most important HTML tags ever beginner should know.
The <img> tag is used to add images to your website, which can be used in the following ways:
- As a standalone image
- In a table
- In a list
- In a form
The following example of how you would add an image to your website using the <img> tag:
<img src="images/header.jpg" alt="10 HTML tags every beginner should know">
The <img> tag is one of the few HTML tags that do not require a closing tag.
A vital part of the <img> tag is the src attribute, which specifies the location of the image on your computer. The alt attribute is used to provide a text alternative for people (and search engines) who cannot see the image.
The following are a few things to keep in mind when using the <img> tag:
- The src attribute should always include the full path to the image, including the filename.
- The alt attribute is required and should always be used to provide a text alternative for people who can’t see the image; this is done to make your website more accessible to people with disabilities who could be using a screen reader.
- The image size will be based on the size of the image file and the dimensions that you specify in the tag.
The Link tag
Like most websites have pictures, most websites have links on them, either to internal pages, like you would find on a menu, or external sources. This is where the <href> tag comes in.
The simplest way to use the <href> tag is to type in the web address you want the link to go to, between the <a> and </a> tags.
For example, if you wanted to create a link to the Google homepage, you would type this:
<a href="https://www.google.com/">Google</a>
This will create a link that says “Google” and if clicked, will take the user to the Google homepage, just like I have done.
Another way to use the <href> tag is to create an anchor link.
Anchor links are used to create a link that will take the user to a specific spot on the page, rather than to a new page altogether.
To create an anchor link, you need to first add an id attribute to the element you want to be the anchor.
For example, if you wanted to create an anchor for the paragraph below, you would add the id=”test” attribute like this:
<p id="10Tags">10 HTML Tags every beginner should know</p>
Next, you need to create the <href> tag and add the “#” symbol followed by the id of the element you want to be the anchor.
For example, the link for the paragraph above would look like this:
<a href="#10Tags">This is a paragraph</a>
The above code is used when you click on a menu item and are taken further down the same page rather than being directed to a new page.
If you are unsure about an id attribute, you can read our article “What are the different types of attribute” here.
The Button tag
Have you ever seen a website with a button that you can click? I’d bet your answer is “no”, which is why the button tag is included in our list of 10 HTML tags that every beginner should know.
The <button> tag is used to create buttons in HTML.
For example, the code for a basic button would look like this:
button>Submit</button>
The above code would create a button with the word “Submit”. Bear in mind that we are only dealing with HTML, so no matter how much you click this button, it won’t do anything just yet.
You can add basic HTML functionality to the button by adding a link to the <button> tag which would look like this:
<button>Go to Home page <a href="www.yourhome page.com">Go to the next page</a> </button>
In the code above, the button will now take the user to the next page when clicked.
You can add a few other attributes to the <button> tag, such as the type of button and whether or not it is a submit button.
We won’t go into too much detail here yet. For now, you can learn more about buttons in the official HTML5 documnetation here
So, why would you want to add buttons to your website?
Buttons are a great way to keep a user engaged on your page. If you have a website where the user needs to take an action, such as making a purchase or signing up for a service, adding buttons can make the process easier and more user-friendly.
The Three list tags
In HTML are the unordered list, ordered list, and description list.
The unordered list ( <ul> ) creates a bulleted or numbered list and the items in the list are marked with <li> tags.
The unordered list is the most basic type of list and it can be used to create a list of items with no specific order.
The ordered list ( <ol> ) creates a numbered list and the items in the list are marked with <li> tags.
The ordered list is useful for lists that need to be in a specific order.
The description list ( <dl> ) creates a definition list and the items in the list are marked with <dt> and <dd> tags.
We have written a much more detailed article on Lists in HTML with code examples that you can check out here if you are interested.
The Table tag
The table tag is used to create a table in HTML. Much like an excel table, the <table> tag is best used when you want to display data in a grid. In the past, the <table> tag was to add structure to a website; however this is now not required and is considered a bad practice for a host of reasons. With the addition of flexbox and, more recently, CSS grid tables are no longer required for design.
Adding tables to your website is still a good idea for search engine optimisation. Tables are still the best way to display data in a grid, making it easy for both humans and search engine crawlers to understand. Tables can be very fast to load, as they don’t require any extra scripts or stylesheets.
In order to add a table to your website, simply add the <table> tag and then start adding your data inside the <tr> and <td> tags.
Where <tr> defines a table row and <td> defines a cell of a table that contains data.
Finally, on our list of 10 HTML tags that every beginner should know, we have the <form> tag.
The Form tag
The <form> tag is used to create a form for user input. The form can contain text fields, checkboxes, radio buttons and more. The form can be submitted to a server for processing, and the results can be displayed to the user. The form can also collect data from the user and store it in a database. Other code such as JavaScript may be required to add functionality to a <form> tag.
When to use the Form Tag
The <form> tag can be used in any HTML document. It is most commonly used in the document’s body, but it can also be used in a header or footer.
What the Form Tag Can Do
The <form> tag in HTML can do many things, including:
- Collect user input
- Submit the data to a server for processing
- Display the results to the user
- Store the data in a database
Conclusion
So those were the 10 HTML tags that every beginner should know, I hope you found this post helpful and that it has given you a better understanding of HTML tags.
I hope this article inspired you to take that leap and start learning to code. Click Here to meet other new coders like you and join our community.
Happy learning!
