PRACTICAL GUIDE
Learn HTML: the basics and examples
HTML describes the structure of a page: headings, paragraphs, links, images and forms. The examples below help you spot the tags and understand their role. They are for learning purposes only: an HTML form on its own does not process or send requests.
HTML basics
The basic structure of an HTML document includes <html>, <head> and <body>. The <head> contains metadata and the <body> contains the page content.
<!DOCTYPE html>
<html>
<head>
<title>Your website title</title>
</head>
<body>
<h1>Your main content here</h1>
</body>
</html>Working with text
For text, HTML offers various tags for paragraphs, bold, italics and so on.
<p>This is a standard paragraph.</p>
<p><strong>Bold text</strong> and <em>italic text</em>.</p>
Using images
Images are added with the <img> tag, specifying the path with src and a description with alt.
<img src="path/to/image.jpg" alt="Description of the image">
Creating links
Links are created with <a>, making it possible to navigate to other pages or websites.
<a href="https://www.example.com">Visit our website</a>
Lists in HTML
Lists let you organise information into ordered or unordered lists.
<ul>
<li>Unordered list</li>
<li>Another item</li>
</ul>
<ol>
<li>First item of an ordered list</li>
<li>Second item</li>
</ol>
Tables in HTML
Tables organise data into rows and columns.
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>Forms in HTML
Forms collect user data. They can include text fields, buttons and so on.
<form action="/form-submission" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
Embedding multimedia
To embed video or audio, HTML5 provides the <video> and <audio> tags.
<video src="path/to/video.mp4" controls>Video not supported</video>
<audio src="path/to/audio.mp3" controls>Audio not supported</audio>
Frames and sections
Use iframes to embed external content and sections to structure content semantically.
<iframe src="https://www.example.com" width="600" height="400"></iframe>
<section>
<h2>Section Title</h2>
<p>Section content.</p>
</section>HTML5 and what it introduced
HTML5 introduced new semantic tags for better content structure.
<article>
<h2>Main Article</h2>
<p>Article content.</p>
</article>
<aside>
<h2>Additional Information</h2>
<p>Further details here.</p>
</aside>
Accessibility and HTML
Accessibility is essential to make web content usable by everyone.
<a href="https://www.example.com" aria-label="Visit our website">More info</a>
SEO optimisation with HTML
Meta tags and other HTML elements can be optimised for SEO.
<head>
<meta name="description" content="Your website description here">
<title>Your Page Title for SEO</title>
</head>
Advanced forms
HTML5 enriched forms with new input types and attributes for validation.
<input type="email" name="email" placeholder="Enter your email" required>
HTML is a fundamental language for web development, making it possible to create flexible and accessible page structures. Its continued evolution with HTML5 enriches the web with interactive and semantic features, making it easier to create richer and more accessible websites.
Using these basics on your website
Being able to read a few tags helps you understand content and talk with your webmaster. For day-to-day page management, an editor such as WordPress generally means you do not have to edit the code directly.