57 Essential HTML Tags To Know As A Beginner
Tags: html, webdev, beginners, codenewbie
Published: 2021-09-14 23:48:44

Hi everybody, I'm [Aya Bouchiha](developer.aya.b@gmail.com), after creating two posts about 10 important HTML Tags, I decided to talk about 57 essential HTML tags to know as a beginner.

+ [part-1: 5 HTML Tags That Almost Nobody Knows](https://dev.to/ayabouchiha/5-html-tags-that-almost-nobody-knows-5p5)
+ [Part-2: 5 HTML Tags That Almost Nobody Knows](https://dev.to/ayabouchiha/part-2-5-html-tags-that-almost-nobody-knows-nj8)

but if you're not familiar with 'HTML tags', I highly recommend checking at least one of the given resources in this post. 
+ [Resources To Learn HTML & CSS](https://dev.to/ayabouchiha/resources-to-learn-html-css-cko)

## 57 Essential HTML Tag That Is Good To Know As Beginner.

+ **\<div\>**: for defining a division.
+ **\<header\>**: for creating a header.
+ **\<section\>**: for defining a section.
+ **\<address\>**: is a tag that displays the contact information like email and phone number of the author of a document or an article
+ **\<nav\>**: for creating navigation.
+ **\<main\>**: for assigning the main content.
+ **\<footer\>**: for creating a footer.
+ **\<form\>**: for defining a form which is a section that almost contains some input fields that the user should enter for sharing his information like login & sign up forms.
+ **\<time\>**: for representing a specific period in time.
+ **\<label\>**: for specifying a label like name, email, password for an input field.
+ **\<input\>**: for creating an input field.
+ \<textarea />: for creating a multiline input so that the user could write a text such as description or bio.
+ **\<select\>**: for creating a drop-down menu. 
+ **\<option\>**: for creating an option of a drop-down menu
+ **\<datalist\>**: for creating a list of options that are established in advance.
+ **\<fieldset\>**: for grouping a set of elements that discuss the same idea in a form element.
+ **\<legend\>**: for defining a title of the fieldset element
+ **\<wbr\>**: for defining a word break chance.
+ \<br/>: for breaking a line
+ **\<button\>**: for creating a clickable element like text, image, video
+ **\<code\>**: used for defining a text as a code.
+ **\<kbd\>**: used to define keyboard input, it is displayed with a monospace font
+ **\<var\>**: for indicating mathematical variables like x, y, and z.
+ **\<samp\>**: is used to define sample output from a program.
+ **\<pre\>**: for formatting a specific text.
+ **\<dl\>**: is used with **\<dt\>** and **\<dd\>** to define a description list.
+ **\<dt>** defines a term in a description list.
+ **\<dd>** describes a term in a description list.
+ **\<del\>**: defining a deleted text.
+ **\<ins\>**: for defining an inserted text.
+ **\<em\>**: create an emphasized (important) text.
+ **\<i\>**: create a text with italic styling.
+ **\<u\>**: defining an underlined text, (not recommended to use)
+ **\<b\>**: for creating a bold text.
+ **\<strong\>**: for specifying an important text with bold styling.
+ **\<small\>**: for creating a text with a small size
+ **\<dfn\>**: used to specify a term that is going to be defined, most browsers display this element with an italic font style.
+ **\<abbr\>**: defining an abbreviation, like HTML.
+ **\<h1\>**: (h1, h2, h3,..., h6) for specifying a header of specific content.
+ **\<a\>**: (anchor tag)for creating a link (hyperlink).
+ **\<mark\>**: for highlighting a text.
+ **\<progress\>**:
+ **\<meter\>**: for representing either a scalar value within a known range or a fractional value.
+ **\<noscript\>**: for displaying alternate HTML content if the browser does not support scripting.
+ **\<q\>**: for defining a "quote".
+ **\<bloquote\>**: for specifying that a text is taken from another place.
+ **\<table\>**: for defining a table in your document.
+ **\<thead>**: (table head)
+ **\<tbody>**: (table body)
+ **\<th\>**: for creating a title of a specific cell in your table
+ **\<td\>**: for creating a cell in your table
+ **\<tr\>**: (table row) for creating a row in your table
+ **\<video\>**: for displaying a video in your document.
+ \<img />: for displaying an image in your document.
+ **\<ol>**: for creating an ordered list. 
+ **\<ul>**: for creating an unordered list. 
+ **\<li\>**: for creating an item of a list.

## Reference

+ [www.w3schools.com](https://www.w3schools.com/TAGS/default.ASP)

Have a great day!