HTML


NOTE: for a more comprehensive HTML tutorial go to w3schools.

Elements & Tags

For a full list of tags, check HTML Element Reference.

HTML is a Hyper Text Markup Language, meaning it is used to format text and media content for the browser. The formats of each element is determined by its tag. These are helpful to style your text, to display images, to link other pages, or even embedding websites.

Below are some useful tags to start with:

<html> <h1> <h2> <h3> <p> <b> <i> <u> <br> <hr> <img> <video> <audio>

Attributes & Properties

For a more comprehensive documentation check w3schools or MDN.

Attributes provide extra information about an element. For example, an <img> needs a src attribute, and an <a> needs a href attribute.

<img src="image.jpg">
<a href="next-page.html">Click and go to the next page</a>

The attribute style allows you to style your content using CSS properties directly inside any element.

<p style="font-size: 2em">bigger words</p>
<p style="color:blueviolet">and colorful letters</p>
<p style="font-family: monospace">are salt & 
    <span style="background-color: black; color:white;">peppers</span>
</p>
<p style="margin-left: 50%; font-size:.5em">bugs and worms</p>

bigger words

and colorful letters

are salt & peppers

bugs and worms

The attributes class and id allow you to assign a CSS selector to your HTML elements. See more about CSS selectors at w3schools.

The <a> tag creates a hyperlink — a clickable connection to another page, file, or website.

It requires the attribute href, which tells the browser where to go.

<a href="https://poeticweb.net">Visit poeticweb.net</a>

You can also link to another page in your project:

<a href="about.html">Go to About Page</a>

You can style links using CSS → like this one

/* style.css */

a {
    color: darkblue;
    text-decoration: none;
}

a:hover {
    color: pink;
    text-decoration: underline;
}