Common Tags

Paragraph tags: <p></p>

<p>This is a paragraph</p>

 

Heading tags: <h1></h1> <h2></h2> ... <h6></h6>

  • h1 is the most important
  • h6 is the least important
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

To mark something as italic, you can use the i tag: <i></i> or the em tag <em></em>

To make something bold, you can use the b tag <b></b> or the strong tag <strong></strong>

To underline something, you can use the u tag: <u></u>

To strikethrough something, you can use the del tag: <del></del>

To insert a horizontal rule, you can use the hr tag: <hr />

  • self closing tag
For self closing tags, you can write both <... /> and <...> . There is not a strict rule saying that you need add a slash.
<p>YOOO ITS MEEE</p>
<hr />
<p>YOOO ITS ME AGAIN</p>

To insert a line break, you can use the <br /> tag.

  • self closing tag
<p>This line is wayyyyyyyyyyyy tooooooo long <br /> so I am gonna make it longer.</p>

To insert a link, you can use the anchor tag: <a></a>

  • href
  • target: _blank (to open in new tab)
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank">Comeon it's not a sus page</a>

To display an image, you can use the <img /> tag.

  • src
  • width, height, alt
  • self closing tag

To show an image from your own pc, it is better to set up a local server which you can find more details here.

<img src="a long url/giphy.gif" height="200" width="400" alt="A gif with a man dancing and singing" />
As a good practice, you should also set the alt attribute. It tells the browser to show some alternate text when the browser cannot load the image.

To make a button, you can use the <button></button> tag.

<button>Good ol' button</button>

Inline and Block Elements

The tags that take up full width and push content to a new line are called block elements.

The tags that keep the content in the same line are called inline elements.

Some example block elements: <p>, <h1>, <h2> ...

Inline elements: <i>, <b>, <u> ...

You cannot put a block element inside of an inline element.

There are also inline-block elements which behave just like inline elements. We will talk more about them in the CSS course.

Div and Span

Div is a block element while span is an inline element. They have no special meanings.

You can put anything inside of a <div></div> tag and there are no restrictions.

For <span></span>, you can put any inline elements in it, like anchor tags, underline tags or itself.

There are many more tags that we won't cover in this course, feel free to learn more about them: Lists, Tables, Textarea, Iframe, Canvas, SVG, etc.

 

Last edited on 24/04/2024