Headings

There are 6 types of headings in HTML:

h1

That will look like:

h2

That will look like:

h3

That will look like:

h4

That will look like:

h5

That will look like:

h6

Paragraph

the paragraph tag <p></p> creates a paragraph.

In the browser that looks like this:

Pre-formatted text

the preformatted tag <pre></pre> creates a preformatted text.

For example if we add a paragraph like the one above, even if we add some space in the editor, once the browser displays the paragraph it removes all the space and keep only the text formatted.

But if we want to display the text as it is, without any formatting from the browser, we'll add the <pre></pre> tag.

For example let's add some text with space:

So in the browser we'll have:

As you can see, the text is displayed in the browser as it was written in the editor, with the space and everything.

code

the <code></code> tag is used to tell the user that this part is a code.

For example let's say that you're writing JavaScript code, and by the end of the tutorial you want to leave the JavaScript code to your readers.

So the <code></code> tag will be added like this:

So in the browser we have:

link to a URL

<a></a> tag creates a link that you want the user to click on and go to.

href is where we add the link.

link to an email

<a></a> tag creates also a link to an email.

href is where we add the email.

Once clicked on the link it will open the email box where you can send an email to "john@gmail.com".

Ordered list

<ol></ol> is the tag to create an ordered list:

<li></li> is where we add the list items.

Unordered list

<ul></ul> is the tag to create an unordered list:

<li></li> is where we add the list items.

description list, description term and description

Let's say that you want to make a glossary and you have a list of terms you want to define.

So this list of terms will be put inside a description list tag: <dl></dl>.

The terms will be put inside a description term tag: <dt></dt>.

And the definition of the terms will be put inside a description tag: <dd></dd>.

In the browser:

Image

<img/> tag is used to add an image.

<img/> tag works with src attribute. It is in the src attribute that we specify the source of the image.

Horizontal rule

Horizontal rule is added via <hr/> tag. It is used to separate content between HTML elements. Let's say that we have 2 paragraphs and we want to separate them:

In the browser we have:

Line break

<br/> tag is added to skip the line between 2 lines/elements.

In the browser we have:

Words emphasis

To emphasize a word we can either use <strong></strong> tag that will make the word bold.

So in the browser we'll have:

Or <em></em> tag that will make the word in italic.

In the browser we'll have:

div

<div></div> tag is used as a container for HTML elements.

Forms

The <form></form> tag is used to create a form.

The <form></form> tag can contain different kinds of inputs. These inputs are added in an <input/> tag.

In the browser we have:

Tables

To create a table we use the <table></table> tag.

<tr></tr> tags are added to create table rows.

<td></td> tags are added to create table cells

<th></th> tags are added to create table header.

In this example I added some CSS to see the table borders. So in the browser we have:

Audio

<audio></audio> tag allows us to add an audio to the website.

In the browser we have:

Conclusion

As a web developer, you need to learn a lot of code. That starts with learning HTML first. As there are many tags, you might forget some of them, as there is a human tendency to forget some data. But if that happens, it is okay, as now you have a cheatSheet with the most used tags in HTML that you can use whenever you forget something.

Hope it helps.