Intro to HTML

Inspired by CS50 WebTrack

Thanks to w3schools

HTML is the markup language that the web is built on. It is used to build websites. The latest version is HTML5.
The specification mentions 18 tags. This table contains key information about each one. Any other element will be explained in the paper.


tag use code output
<html> To contain all the other HTML elements 
<html lang="en">
  <head>
  </head>
  <body>
  </body>
</html>
 N/A
<title> To put a title on a website. 
<head>
  <title>All about HTML</title>
</head>
 title in tab
<script> To embed a client-side script. Good at the bottom of the body. 
<script src="code.js"></script>
 N/A
<body> To hold the visible parts of the page. 
<body>
Hello, world!
</body>
 Hello, world!
<h1> The largest header. 
<h1>Heading 1</h1>

Heading 1
<h2> A large header. 
<h2>Heading 2</h2>

Heading 2
<h3> A medium header. 
<h3>Heading 3</h3>

Heading 3
<img> Used to display images.

Doesn't have a close tag.

 
<img src="imgs/bunny.png" alt="Bunny" width="150" height="150">
 Bunny
<a> An anchor tag. Used for hyperlinks. 
See <a href="https://mantasaddle.co.uk/">the Manta saddle</a>
 See the Manta saddle
<div> A container for elements. Useful for applying styles and scripts to specific parts. 
<div class="myDiv">
  <h2>Heading in a div</h2>
  <p>Text in a div</p>
</div>

Heading in a div

Text in a div
<form> A container for inputs. 
<form action="/placeholder.php" method="get">
  <label for="favColour">Favourite colour:</label>
  <input type="text" id="favColour" name="favColour"><br>
  <label for="favFood">Favourite food:</label>
  <input type="text" id="favFood" name="favFood"><br>
  <input type="submit" value="Submit">
</form>


<input> For input elements, such as text boxes and buttons. 
<label for="firstName">First name:</label>
<input type="text" id="firstName" name="firstName">
<p> To mark a paragraph. 
<p>Paragraph text.</p>

Paragraph text.
<ol> For an ordered list. It gives numbers. 
<ol>
  <li>Bicycles</li>
  <li>Nintendo</li>
  <li>Running</li>
</ol>
  1. Bicycles
  2. Nintendo
  3. Running
<ul> For an unordered list. It gives bullet points. 
<ul>
  <li>Bicycles</li>
  <li>Nintendo</li>
  <li>Running</li>
</ul>
  • Bicycles
  • Nintendo
  • Running
<li> For each item in your list. 
<ol>
  <li>Bicycles</li>
  <li>Nintendo</li>
  <li>Running</li>
</ol>
  1. Bicycles
  2. Nintendo
  3. Running