DEV Community

Aya Bouchiha
Aya Bouchiha

Posted on • Updated on

57 Essential HTML Tags To Know As A Beginner

Hi everybody, I'm Aya Bouchiha, after creating two posts about 10 important HTML Tags, I decided to talk about 57 essential HTML tags to know as a beginner.

but if you're not familiar with 'HTML tags', I highly recommend checking at least one of the given resources in this post.

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.


Have a great day!

Discussion (5)

stuffsuggested profile image
sergior profile image
Sergio Rubio Chavarría


ayabouchiha profile image
Aya Bouchiha Author


mccurcio profile image
Matt Curcio

Borat says, Very Nice! ;)
Good work

ayabouchiha profile image
Aya Bouchiha Author

Thank you 😁