This is the basic template or barebone structure of HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="Resources/css/index.css" rel="stylesheet">
<title>Document</title>
</head>
<body>
<!-- Body -->
</body>
</html>
A class is used select more than one element. You add the "class="classnamehere" inside the html tag for that element in the html file to name the class. In the css file you select the class by selecting .classnamehere { }.
<p class="classnamehere">
An element's ID is similar to a class, but it's to specify only one element. You add the "id="idnamehere" inside the html tag for that element in the html file to name the ID. In the css file you select the class by selecting #idnamehere { }.
<div id="idnamehere">
A list with bullet points
<ul>
<li>France</li>
<li>Spain</li>
<li>Ireland</li>
</ul>
A list with numbers
<ol>
<li>France</li>
<li>Spain</li>
<li>Ireland</li>
</ol>
To create a table we use the table tag. Inside that we use the tr tag to specify a table's row. Each item on that row is then specified using the td tag.
| Saturday | Sunday | |
|---|---|---|
| Temperature | 73 | 73 |
<table>
<tr>
<th></th>
<th scope="col">Saturday</th>
<th scope="col">Sunday</th>
</tr>
<tr>
<th scope="row">Temperature</th>
<td>73</td>
<td>81</td>
</tr>
<table>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
The p tag paragraph element contains and displays a block of text.
<p>This is a block of very interesting text!</p>
The span tag element is an inline container for text and can be used to style a selection of a particular text.
<p>This text could be white whilst <span>this part could be blue.</span></p>
The strong tag is used to highlight important or urgent text. It's usually seen as being bold.
<strong>This is important text</strong>
Text that is made bold is the same as text that has been given a font weight of 700.
<b>You bold thing you!</b>
The em tag emphasises words by putting them in italics.
Book by <em>Authors name</em>
We use the br tag to make any text following the tag pop down on the line below.
<strong>This is important text</strong>
The image tag allows us to insert an image in documents. We need to state where the image is located in src. The alt attribute is where we should describe the image.
<img src="https:source.com/image.jpeg" alt="A description of the image here.">
With the video tag we can embed a video onto our web page, either one saved locally or one available at an external source. We use the controls attribute to add a control bar to the video to play, pause, etc.
<video src="test-video.mp4" controls>