Force24 Web Tools
Crafted for
everyone by
everyone by
All HTML5 documents must start with a document type declaration: <!DOCTYPE HTML>.
The HTML document starts with <html> and ends with </html>.
The <head> element contains meta information about the document
All your content goes between the <body> and </body>.
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<p>This is your content.</p>
</body>
</html>
This is your content.
The <head> element is part of the document which contains information such as <title>, Link to CSS, Javascript, metadata.
The following elements can go inside the <head>:
Meta elements are used to specify page descriptions, keywords, author, last modified and other information.
<meta> is used to provide such additional information. It is inserted between the <head> tags.
A <meta> tag can have the following attributes:
Example:
<meta charset="UTF-8">
<meta name="description" content="Cheatsheet">
<meta name="keywords" content="Force24, Cheatsheet, Marketing Automation">
<meta name="author" content="Force24">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The <p> tag defines a paragraph.
<p>My first paragraph.</p>
My first paragraph.
The <a> tag defines a link.
The href attribute specifies the destination address.
<a href="https://www.force24.co.uk/">Visit our website.</a>
The target attribute specifies where to open the linked document
Headings are defined with the <h1> to <h6> tags.
<h1> defines the biggest heading and <h6> defines the smallest.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
HTML images are defined with the <img> tag.
The src attribute specifies the path of the image.
The alt describes the image should the browser not find it.
You can use the width and height attributes to define the width and height of the image in pixels.
<img src="Force24.png" alt="Force24" width="200">
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. By default the items will be displayed with a black circular bullet.
<ul>
<li>Dog</li>
<li>Cat</li>
<li>Fox</li>
</ul>
An ordered list starts with the <ol> tag.
<ol>
<li>Mouse</li>
<li>Cow</li>
<li>Giraffe</li>
</ol>
<b> defines bold text
<em> defines emphasized text
<i> defines italic text
<small> defines small text
<strong> defines important text
<sub> defines subscripted text
<sup> defines superscripted text
<ins> defines inserted text
<del> defines deleted text
<mark> defines highlighted text
<b>Example text</b>
<em>Example text</em>
<i>Example text</i>
<small>Example text</small>
<strong>Example text</strong>
<sub>Example text</sub>
<sup>Example text</sup>
<ins>Example text</ins>
<del>Example text</del>
<mark>Example text</mark>
The <span> element is an inline tag for phrasing content. It has no meaning and is mostly used for styling by using and id or class.
<p>Force24 is a UK <span style="color: #00a7c0;">Marketing Automation</span> company based in the Leeds.</p>
Force24 is a UK Marketing Automation company based in the Leeds.
The class attribute is used to apply the same styles for elements containing the same class. The class attribute is selected with CSS and/or JavaScript with a . symbol
The id attribute specifies an unique id for an element. The id attribute is selected with CSS and/or JavaScript with a # symbol
<p>Force24 is a UK <span class="force24Colour">Marketing Automation</span> company based in the Leeds.</p>
Example of class:
<p>Force24 is a UK <span class="force24Colour">Marketing Automation</span> company based in the Leeds.</p>
<p>We offer <span class="force24Colour">Customer journey optimisation advice</span>.</p>
Example of id:
<p>Force24 is a UK <span id="bold">Marketing Automation</span> company based in the Leeds.</p>
Force24 is a UK Marketing Automation company based in the Leeds.
We offer Customer journey optimisation advice.
Force24 is a UK Marketing Automation company based in the Leeds.
The <div> (short for division) tag is used as a container for other elements to perform certain tasks or style them with CSS. Since <div> is a block element, each <div> will be shown on a new line.
The <form> element defines a form that collects user input.
The Form contains different type of elements like text inputs, large text inputs, checkboxes, radio buttons, submit buttons and more.
<input type="text"> defines an input field for text input.
<input type="radio"> defines a checkbox which lets the user select only ONE choice.
<input type="checkbox"> defines a checkbox which lets the user select multople choices.
<textarea> defines a text area which can be used for larger inputs.
<select> defines a dropdown menu containing options.
<input type="submit"> defines a button for submitting the form.
<label> defines a text label for the input.
name="" specifies the name of the input and is used to reference elements in JavaScript
value="" defines the default value of the input field
<form>
<input type="text" name="fullName" placeholder="Enter Full Name">
<input type="radio" value="Female" name="gender"> Female
<input type="radio" value="Male" name="gender"> Male
<label>Age</label>
<select name="age">
<option value="Under 18">Under 18</option>
<option value="18+">Under 18+</option>
</select>
<input type="submit" value="Submit">
</form>
A table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is defined with the <th> and each cell is defined with the <td> tag.
<table>
<tr>
<th> First name </th>
<th> Last name </th>
<th> Age </th>
</tr>
<tr>
<td> John </td>
<td> Doe </td>
<td> 34 </td>
</tr>
<tr>
<td> Martin </td>
<td> Johnson </td>
<td> 61 </td>
</tr>
</table>
| First name | Last name | Age |
|---|---|---|
| John | Doe | 34 |
| Martin | Johnson | 61 |
<br> - Inserts a new line
<hr> - Inserts a horizontal line