HTML Reference

Below, you find a collection of HTML Tags we are using for various exercises.

What is HTML?

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).

Source: MDN

What is an HTML Tag?

An HTML element is set off from other text in a document by "tags", which consist of the element name surrounded by < and >. The name of an element inside a tag is case insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the <title> tag can be written as <Title>, <TITLE>, or in any other way.

Source: MDN

Tag Reference

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

<h1> to <h6> represent six different levels of headlines, <h1> being the highest and <h6> the lowest.

Usage:

<h1>I'm a first-level Headline</h1>
<h2>I'm a second-level Headline</h2>

<a> - Link to other pages

The so-called "anchor" allows you to link to different pages.

<a href="https://google.com">Link to Google</a>

href: The page you'd like to Link to Link to Google: This is the display text the user will see. You can fill in whatever text you wish.

<p> - Paragraph

A <p> Tag allows us to render long text, for instance an article's content.

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce felis risus, accumsan non eros ac, rutrum vulputate enim. Integer consectetur ligula ut maximus tincidunt. Nunc in accumsan metus. Curabitur nec porttitor ante. Nam sit amet sapien ac mauris vulputate imperdiet id in lectus. Mauris consequat interdum tortor. In egestas euismod.
</p>

<div> - To organize your website structure

<div> elements don't have any visual effect on the content until styled with CSS. They're used to group content into logical units.

<div>
  I am inside a Div
</div>

<ul> - Unordered Lists

The unordered list renders a list of bullet points. Each item on the list needs to get wrapped in a <li> tag.

<ul>
  <li>We are bullet points</li>
  <li>In an un-ordered list</li>
</ul>

<ol> - Ordered Lists

Renders a list of numbered elements (1., 2., 3., ...). Each item on the list needs to get wrapped in a <li> tag.

<ul>
  <li>We are bullet points</li>
  <li>In an ordered list</li>
</ul>

The browser automatically applies the correct numbers.

<img> - Render images

The <img> tag allows you to render an image.

<img src="myimage.png" />

Note: <img /> is a self-closing tag. It does not have a matching </img>.

Adjusting image dimensions:

<img src="myimage.png" width="350" height="350" />

<br /> - Line breaks

When you add a line break in your code, the browser does not render a line break automatically. It needs a special instruction:

<p>
  Some random text
  <br />
  More random text on a new line.
</p>

More Tags

The above list only shows a selection of tags. If you didn't find what you were looking for, please also check out MDN's HTML Reference.