Introduction
By the end of this article you will get a grasp of the most commonly used tags in the HTML language. I myself find myself using these tags just about every time I am writing any Front-End code. At some point they will become muscle memory as you won't have to keep going back and forth on searching what tags are meant for what. The purpose of this guide is to help you understand HTML from a beginner's prospective. Please feel free to leave any feedback or questions in the comments and I will do my best to respond to them as soon as I can.
Table Of Contents
When it comes to HTML elements, a few are very commonly used and should be considered to get comfortable with them as we will be using them a lot in our web developing career. Do not get discouraged if you ever see something new that you have never seen before. The only way to get better at something new is by simply redoing or trying new things to understand better. So please make sure to take your time and go at your own pace when following along. We will be going over a few HTML tags that we should be comfortable using since they are commonly used on every HTML document. Let us get started.
Headings
We've all seen headings! Every page will usually have some type of heading tag on the page. When it comes to headings we can think of them as titles for our sections. There are six levels of headings so that means we have six heading tags to work with, all having their own size and reasoning. Here is a list of our heading tags. The order they go is from biggest to smallest.
<h1> </h1> // Biggest heading size
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6> // Smallest Heading size
When we search things on the web, our heading tags help search engines identify key words inside our web pages to help users find our website. Search Engine key words are very important as they help bring traffic into your site so there are some practices to follow when it comes to using our heading tags.
It is recommended that we only use one <h1> tag inside our html file as this would identify as the whole pages' purpose. When users search your page, they usually skim through it quickly to see if they find what they are looking for. So using headings will help you target your users and help them locate sections in your page quickly. So make sure to pick the right heading size when trying to make a title pop.
Paragraphs
The most commonly used HTML tag would probably be the <p> tag, since this defines our paragraphs or any words wrapped between it. Here is a quick example of using the <p> tag.
<p> Our p tag will define this as a paragraph on the browser </p>
Surrounding our text inside of our <p> tag will tell the browser the type of markup style we are trying to use for the user. This tag is used just about everywhere when it comes to displaying text.
Text Formatting
There are a few tags that provide additional styles to our text if we are ever trying to get a different feel for our readers. We can surround our text with a few tags that can help us achieve this.
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
<p> <b> - Bold text </b> </p>
<p> <strong> - Important text </strong> </p>
<p> <i> - Italic text </i> </p>
<p> <em> - Emphasized text </em> </p>
<p> <mark> - Marked text </mark> </p>
<p> <small> - Smaller text </smaller> </p>
<p> <del> - Deleted text </del> </p>
<p> <ins> - Inserted text </ins> </p>
<p> <sub> - Subscript text </sub> </p>
<p> <sup> - Superscript text </sup> </p>
As you can see, these tags are able to be wrapped within other tags. Allowing us to define text meaning just about anywhere.
Line Breaks
There are few ways to create space inside our html file. When ever we try to add a new tag, our browser automatically adds that tag onto a new line. When ever we need to divide our sections on our html with a simple line we can add a <hr> tag which will create a thematic break or in other words changing the subject. Here is a quick example of it in use.
If you are just trying to create a new line instead of dividing sections, for example when writing a poem. We can use our <br> tag to create a break line. This can come in handy sometimes.
<h1>The br element</h1>
<p>To force<br> line breaks<br> in a text,<br> use the br<br> element.</p>
Something if you havent noticed is that these tags are known as empty tags where as you don't need to have a closing tag right after the opening tag. There are only a few tags that have this feature so be sure to do some research when using empty tags.
Conclusion
I hope by the end of this article you managed to learn how to create and understood what is going on in every line of code. It is very important to understand how your code fully works, not only does it help you become a better developer but can also help you use the tools you are working with more efficient.
These articles are mostly intended for personal use on becoming a better programmer, writer, and grow my programming skills. Feel free to drop any feedback or corrections that you believe that should be made to help me and others. Thank you for your time for sticking this far!
Top comments (2)
I just summarized all the important Codepen Projects, for Budding HTML Developers, in a new post, here : dev.to/linuxguist/45-practical-web...
Hope you find this helpful as well. Saves time for everyone !
Adding to this nice post, here is a mini visual compilation of the important html tags : codepen.io/nathan-sr/full/rNQmmbY
Also, my complete list of public codepen's are here : codepen.io/nathan-sr/pens/public
Hope you find this helpful ! Wish everyone a Rapid Progress in the Wonderful HTML language....