HTML

Hypertext Markup Language

A quick introduction

The Boilerplate!

This is the start of any HTML5 file

<!DOCTYPE html>
<html>
  <head>
    <meta charset=”UTF-8” />
    <title>My Webpage</title>
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

Tags

<!-- Tags come in pairs: <opening> </closing> -->
<p>Text</p>

<!-- Self-Closing Tags also exist -->
<input type="text">
<!--
  No closing tag is needed
  But, a / may be required for backwards-compatibility
-->
<input type="text" />

Comments

<!-- Single Line Comment-->

<!--
	Multi
	Line
	Comment
-->

Headings and Paragraphs

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<p>Paragraph</p>

Bold, Italics and Underline

<strong>This text is bold</strong>
<em>This text is italicised</em>

Images

<img src="/path/to/image.jpg" alt="An image of something" />

Page Structure

Containers

<div>A block container</div>
<aside></aside>
<section></section>

<span>Inline container</span>

Tables

<table>
  <tbody>
    <tr>
     <th>Heading 1</th>
     <th>Heading 2</th>
     <th>Heading 3</th>
    </tr>
    <tr>
     <td>Cell 1</td>
     <td>Cell 2</td>
     <td>Cell 3</td>
    </tr>
  </tbody>
</table>