× Boo Learning HTML CSS Cheatsheet


Learn to code HTML

☰ Menu
Navigation
Jump to Elemets
Jump to Backgrounds and Colors
Jump to Links
Jump to Images
Jump to Tables
Jump to Lists
Jump to Classes and IDs
Jump to Semantic Elements
Jump to Other Resources

Introducing HTML

What is HTML?

1. HTML stands for Hyper Text Markup Language
2. HTML is the standard markup language for creating Web pages
3. HTML describes the structure of a Web page
4. HTML consists of a series of elements
5. HTML elements tell the browser how to display the content
6. HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

Simple HTML code

1. Elements

An HTML element is defined by a start tag, some content, and an end tag.

This is a basic nested HTML Elements

Start Tag Element Content End Tag
<h1> My first heading </h1>
<p> My first paragraph </p>
<div> My first div </div>

HTML Tag Reference

Tag Description
<html> Defines the root of an HTML document
<body> Defines the document's body
<h1> to <h6> Defines the HTML headings

2. Backgrounds and Colors

If you wanna change the background color in
a specific head or paragraph, use this:

<h1 style = "background-color:DodgerBlue;">This is dodger blue</h1>
<p style = "background-color:Tomato;">This is Tomato</p>

Result:

This is dodger blue


This is Tomato



We can change Text color using this:

<h1 style = "background-color:Tomato;">This is tomato</h1>
<p style = "color:DodgerBlue;">This is dodger blue</p>
<p style = "color:MediumSeaGreen;">This is medium sea green</p>

Result:

This is tomato


This is dodger blue


This is medium sea green



4. Images

Images can improve the design and the appearance of a web page.
<img src = "image.jpg" alt = "My Image">

You can provide a background image using:
<body style = "background-image: url('image.jpg');">

You can repear many times using element "repeat"
<body style = "background-image: url('image.jpg'); background-repeat: repeat;">

Next is Background Cover and Background Stretch
background-size: cover;
background-size: 100% 100%;

5. Tables

Tables allow web developers to arrange data into rows and columns

A sample table

<table class = "table">

<colgroup>

<col align="center"/>
<col span="2" />

</colgroup>

<tr>

<th>Company</th>
<th>Contract</th>
<th>Country</th>

</tr>
<tr>

<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>

</tr>
<tr>

<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>

</tr>

</table>

Result:

Company Contract Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico

<td> element

In this case we can see <td> element
Each table cell is defined by <td> and </td> tags
Everything between <td> and </td> are the content of the table cell

<tr> element

We can create Table Rows with the <tr> element

<th> element

The <th> element stands for table header

Other Table tags you can use

Tag Description
<table> Defines a table
<tr> Defines a row in a table
<th> Defines a "header cell" / "cell" in a table
<td> Defines a "cell" in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
<caption> Defines a table caption
<colgroup> Groups a set of columns in a table for formatting

6. Lists

HTML lists allow web developers to group a set of related items in lists

Example unordered list:

<ul>

<li>Milk</li>
<li>Eggs</li>
<li>Bread</li>

</ul>

Result:

• Milk
• Eggs
• Bread

Unordered HTML List

Unordered list starts with the <ul> tag

Ordered HTML List

An ordered list starts with the <ol> tag
You can change <ul> into <ol> in the example

HTML Description Lists

The <dl> tag defines the description list,
the <dt> tag defines the term (name),
and the <dd> tag describes each term

Example code

<ul>

<li>Milk</li>
<li>Eggs</li>
<li>Bread</li>

</ul>

<dl>

<dt>Computer</dt>
<dd>A machine for calculating</dd>

<dt>Mouse</dt>
<dd>A computer input device</dd>

</dl>

Result:

• Milk
• Eggs
• Bread

Computer - A machine for calculating
Mouse - A computer input device

HTML List Tags

Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term/name in a description list
<dd> Defines a description of a term/name in a description list

7. Classes and IDs

<class>

<class> attribute is used to specify a class for an HTML element

Example code

<head>
<style>
.city {

color: white;
background-color:tomato;
border: 2px solid black;
padding: 20px;
margin: 20px;

}
</style>
</head>
<body>
<div class="city">

<h2>London</h2>
<p>London is the capital city of England</p>

</div>

Result:

London

London is the capital city of England


You can also use <span> as it will be styled
according to the .note style definition in the head section

Example code

<h2>My <span class="note">Important</span> Heading</h2>
Result:

My Important Heading


<id>

<id> attribute is used to specify a unique id for an HTML element

Example code

<head>
<style>
#city {

color: white;
background-color:tomato;
border: 2px solid black;
padding: 20px;
margin: 20px;

}
</style>
</head>
<body>
<div id="city">

<h2>London</h2>
<p>London is the capital city of England</p>

</div>

Result:

London

London is the capital city of England


Difference Between Class and ID

A class name can be used by multiple HTML elements, while an
id name must only be used by one HTML element within the page:

Example code

<head>
<style>
.city {

color: white;
background-color:tomato;
border: 2px solid black;
padding: 20px;
margin: 20px;

}
#myHeader{

background-color:lightblue;
color: black;
padding: 40px;
text-align: center;

}
</style>
</head>
<body>
<div id="myHeader">My Cities</div>
<div class="city">

<h2>London</h2>
<p>London is the capital city of England</p>

</div>
<div class="city">

<h2>Paris</h2>
<p>Paris is the capital city of France</p>

</div>

Result:

My Cities

London

London is the capital city of England

Paris

Paris is the capital city of France


8. Semantic Elements

Non-semantic: <div> and <span>

Tells nothing about its content

Semantic: <form>, <table> and <article>

Clearly defines its content

Section and Article

<section> element defines a section in a document
<article> element specifies independent, self-contained content

Example code

<head>
<style>
#myHeader{

background-color:lightblue;
color: black;
padding: 40px;
text-align: center;

}
#mySection{

background-color:lightgreen;
color: black;
padding: 40px;
text-align: center;

}
</style>
</head>
<body>
<div id="myHeader">My Cities</div>
<section id="mySection">

<article>

<h2>London</h2>
<p>London is the capital city of England</p>

</article>
<article>

<h2>Paris</h2>
<p>Paris is the capital city of France</p>

</article>

</section>

Result:

My Cities

London

London is the capital city of England

Paris

Paris is the capital city of France


Other resources for HTML tutorial

w3schools HTML
tutorialspoint HTML