It is the standard language for creating and structuring web pages. It allows defining the content of a web document through a series of elements and tags.
Each element can have attributes that modify its behavior or appearance (often in combination with CSS and JS).
Basic HTML Structure
Minimum Structure
The basic skeleton of an HTML document includes the main elements such as doctype, html, head, and body.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
</head>
<body>
<!-- Page content -->
</body>
</html>Comments in HTML
Comments are used to include notes in the code without affecting the content.
<!-- This is a comment -->Title
Defines the title of the page, which appears in the browser tab and in search results.
<title>Page Title</title>Meta Tags
The meta tags in the head provide additional information about the web (for example, for SEO).
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Site description">
<meta name="author" content="Author Name">| Tag | Description |
|---|---|
description | Summary of the page content for SEO. |
author | Name of the content author. |
viewport | Optimizes display on mobile devices. |
charset | Defines the character set used. |
Adding Basic Elements
Adding a Favicon
The favicon is the icon that appears in the browser tab. It can be added using a <link> tag:
<link rel="icon" href="favicon.ico" type="image/x-icon">Adding CSS
To include an external CSS file and style the page, use the <link> tag:
<link rel="stylesheet" href="styles.css">If you want to include inline CSS, use the <style> tag:
<style>
body {
background-color: lightblue;
}
</style>Adding JavaScript
To include an external JavaScript file, use the <script> tag at the bottom of the <body> or in the <head> with the defer attribute to ensure the DOM is loaded before executing the script:
<script src="script.js" defer></script>To include JavaScript code directly:
<script>
console.log('Hello, world!');
</script>Summary of Elements and Attributes
Elements and Tags
HTML is composed of a series of elements, each defined by a tag that can have content and attributes.
| Tag | Description |
|---|---|
<html> | Root of the HTML document. |
<head> | Contains metadata about the document. |
<title> | Title of the page that appears in the browser tab. |
<body> | Visible content of the page. |
<h1> to <h6> | Headings, where <h1> is the most important and <h6> the least. |
<p> | Defines a paragraph. |
<a> | Creates a link. |
<img> | Inserts an image. |
<div> | Used as a container for other elements. |
<span> | Defines inline text. |
<strong> | Indicates that the text has strong importance (bold). |
<em> | Indicates emphasis (italic). |
<br> | Inserts a line break. |
<hr> | Creates a horizontal line. |
<blockquote> | Defines a block of quoted text. |
HTML Attributes
Attributes provide additional information about elements. They are placed within the opening tag.
| Attribute | Description |
|---|---|
id | Unique identifier for an element. |
class | Defines one or more classes for an element. |
style | Defines inline CSS styles. |
href | Specifies the URL of a link. |
src | Defines the source of an image or media file. |
alt | Alternative text for an image. |
title | Provides additional information on hover. |
target | Specifies how to open the link (e.g., _blank to open in a new tab). |
rel | Defines the relationship between the current document and the linked resource. |
lang | Specifies the language of the content. |
<p id="paragraph1" class="highlighted-text" style="color: red;" title="Important text">This is a paragraph.</p>Text Elements
Headings
Headings (h1 to h6) are used for titles and subtitles, where h1 is the most important and h6 the least.
<h1>Header 1</h1>
<h2>Header 2</h2>Paragraphs
For normal text blocks, the p element is used.
<p>This is a paragraph of text.</p>Emphasis and Bold
<strong> emphasizes text in bold, while <em> emphasizes with italics.
<strong>Bold text</strong>
<em>Italic text</em>Subscript and Superscript
For equations or scientific notation, use <sub> and <sup>.
H<sub>2</sub>O (water) and E = mc<sup>2</sup> (energy).Links and Navigation
Hyperlinks
Links are created with the a element and the href attribute.
<a href="https://example.com">Visit Example</a>Anchor Links (Internal Navigation)
Used to jump to a specific section of the page.
<a href="#section">Go to section</a>
<!-- The anchor destination -->
<h2 id="section">Section Title</h2>Open Links in a New Tab
To open a link in a new tab, use the target="_blank" attribute.
<a href="https://example.com" target="_blank">Open in a new tab</a>Avoid doing this unless you have a really justified reason (not wanting them to leave my site is not a justified reason)
Images
Insert Images
Use the img element with the src attribute to specify the image path.
<img src="image.jpg" alt="Image description">Attributes of the ![]()
Tag
| Attribute | Description |
|---|---|
src | Path to the image. |
alt | Alternative text for the image. |
width | Width of the image. |
height | Height of the image. |
alt Attribute for Accessibility
The alt attribute describes the image in case it cannot be loaded or for screen readers.
<img src="photo.jpg" alt="A photo of a sunset landscape.">Lists
Lists are useful for grouping similar items (that are part of the same collection).
Ordered Lists
Used when the order of items is important, with the ol element.
<ol>
<li>First item</li>
<li>Second item</li>
</ol>Unordered Lists
For lists without order, use the ul element.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>Nested Lists
You can nest lists within other lists.
<ul>
<li>Main item
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
</ul>Tables
Create Tables in HTML
Use the table, tr (row), th (header), and td (cell) elements.
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>23</td>
</tr>
</table>Merge Cells
Use colspan or rowspan to merge cells horizontally or vertically.
<td colspan="2">Merged cell</td>Table Attributes
| Attribute | Description |
|---|---|
border | Defines the width of the table border. |
cellpadding | Space between the cell border and its content. |
cellspacing | Space between the cells of the table. |
Forms and Inputs
Basic Forms
Forms are created with the form element and its different types of input (input, textarea, select).
<form action="/submit" method="post">
<input type="text" name="name" placeholder="Name">
<input type="submit" value="Submit">
</form>Common input Types
The most common input types are text, password, email, number, date, and checkbox.
<input type="email" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">Labels for Accessibility
Using the label tag improves accessibility.
<label for="name">Name:</label>
<input type="text" id="name" name="name">Form Elements
| Element | Description |
|---|---|
<input> | Field for data entry. |
<textarea> | Multi-line text area. |
<select> | Dropdown list of options. |
<button> | Button to submit or perform an action. |
Multimedia and Graphics
Videos
To insert videos, use the video element.
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video.
</video>Attributes of the
| Attribute | Description |
|---|---|
controls | Displays playback controls. |
autoplay | Automatically plays the video. |
loop | Repeats the video when finished. |
muted | Mutes the video. |
Audio
The audio element is similar to the video but for sound files.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio.
</audio>Attributes of the
| Attribute | Description |
|---|---|
controls | Displays playback controls. |
autoplay | Automatically plays the audio. |
loop | Repeats the audio when finished. |
muted | Mutes the audio. |
Canvas
The canvas element is used for drawing graphics with JavaScript.
<canvas id="myCanvas" width="200" height="100"></canvas>SVG (Scalable Vector Graphics)
SVG allows drawing vector graphics in HTML.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"></circle>
</svg>Semantic Structure
Semantic Elements
Semantic elements are those that have a clear meaning and help search engines and screen readers understand the content.
| Element | Description |
|---|---|
<header> | Defines a header for a document or section. |
<nav> | Main navigation. |
<footer> | Defines a footer. |
<article> | Represents independent content. |
<section> | Defines thematic sections in a document. |
<aside> | Related content, such as a sidebar. |
<main> | Main content of a document. |
<figure> | Contains illustrative content, such as images. |
<figcaption> | Caption for a <figure>. |
<header>
<h1>Welcome to my website</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">Contact</a>
</nav>
<section>
<h2>About Us</h2>
<p>Information about our company.</p>
</section>
<footer>
<p>All rights reserved © 2024</p>
</footer>Accessibility in HTML
ARIA Roles
ARIA roles improve accessibility for screen reader users.
<nav role="navigation">
<!-- Navigation links -->
</nav>Accessibility Attributes
Attributes like aria-label and aria-hidden are useful for enhancing accessibility.
<button aria-label="Close">X</button>