Taken from w3schools
- HTML needs to respect strict writting rules i.e. you must write the reserved keywords as they are shown here to work properly, exactly as they are written in this documentation, without extra characters and cased as they are here.
- All HTML documents will be saved in text files with the extension .html, there are other valid extensions, but we internally agree that our products will use this one in particular and none other.
- The fundamental pieces in HTML are called tags and they follow a very well defined set of rules to be created (Notice that HTML tag is not the same as HTML element even though they are sometimes used interchangeably by mistake).
- All HTML elements have attributes that modify their behaviour, and there are a set of global attributes that apply to all elements.
- An HTML document is conformed by HTML elements, an element has to have a starting tag and optionally an inner content and a closing tag
- In this documentation we will work only with HTML documents
- If you find any strange word to you, tell me and it will be added to a dictionary that you can consult in the future
- If you know any element that is not listed here, it should be either deprecated or not still part of the official standard
| Tag | Description |
|---|---|
| Tags that do not generate an element | |
<!DOCTYPE> |
Defines the document type |
<!--...--> |
Defines a comment |
| Basic structure | |
<html> |
Defines the root of an HTML document |
<head> |
Contains metadata/information for the document |
<body> |
Defines the document's body |
| Metadata | |
<title> |
Defines a title for the document |
<meta> |
Defines metadata about an HTML document |
<style> |
Defines style information for a document |
<link> |
Defines the relationship between a document and an external resource (most used to link to style sheets) |
<script> |
Defines a client-side script |
<noscript> |
Defines an alternate content for users that do not support client-side scripts |
<base> |
Specifies the base URL/target for all relative URLs in a document |
| Basic content | |
<p> |
Defines a paragraph |
<br> |
Defines a single line break |
<wbr> |
Defines a possible line-break |
<a> |
Defines a hyperlink |
<h1> |
Defines HTML first level headings - Biggest |
<h2> |
Defines HTML second level headings |
<h3> |
Defines HTML third level headings |
<h4> |
Defines HTML fourth level headings |
<h5> |
Defines HTML fifth level headings |
<h6> |
Defines HTML sixth level headings - Smallest |
<hr> |
Defines a thematic change in the content |
| Lists | |
<ul> |
Defines an unordered list |
<ol> |
Defines an ordered list |
<li> |
Defines a list item |
| Basic containers | |
<div> |
Defines a block section in a document |
<span> |
Defines an inline section in a document |
| Semantics | |
<nav> |
Defines navigation links |
<header> |
Defines a header for a document or section |
<main> |
Specifies the main content of a document |
<section> |
Defines a section in a document |
<article> |
Defines an article |
<address> |
Defines contact information for the author/owner of a document |
<footer> |
Defines a footer for a document or section |
<aside> |
Defines content aside from the page content |
<details> |
Defines additional details that the user can view or hide |
<summary> |
Defines a visible heading for a <details> element |
<dialog> |
Defines a dialog box or window |
<template> |
Defines a container for content that should be hidden when the page loads |
| Table related | |
<table> |
Defines a table |
<thead> |
Groups the header content in a table |
<tr> |
Defines a row in a table |
<th> |
Defines a header cell in a table |
<tbody> |
Groups the body content in a table |
<td> |
Defines a cell in a table |
<tfoot> |
Groups the footer content in a table |
<caption> |
Defines a table caption |
<colgroup> |
Specifies a group of one or more columns in a table for formatting |
<col> |
Specifies column properties for each column within a <colgroup> element |
| Text fromatting | |
<b> |
Defines bold text |
<strong> |
Defines important text |
<i> |
Defines a part of text in an alternate voice or mood |
<em> |
Defines emphasized text |
<u> |
Defines some text that is unarticulated and styled differently from normal text |
<s> |
Defines text that is no longer correct |
<del> |
Defines text that has been deleted from a document |
<ins> |
Defines a text that has been inserted into a document |
<small> |
Defines smaller text |
<mark> |
Defines marked/highlighted text |
<pre> |
Defines preformatted text |
<sub> |
Defines subscripted text |
<sup> |
Defines superscripted text |
| Data fromatting | |
<data> |
Adds a machine-readable translation of a given content |
<abbr> |
Defines an abbreviation or an acronym |
<cite> |
Defines the title of a work |
<q> |
Defines a short quotation |
<blockquote> |
Defines a section that is quoted from another source |
<var> |
Defines a variable |
<kbd> |
Defines keyboard input |
<samp> |
Defines sample output from a computer program |
<code> |
Defines a piece of computer code |
<time> |
Defines a specific time (or datetime) |
| Definitions | |
<dfn> |
Specifies a term that is going to be defined within the content |
<dl> |
Defines a description list |
<dt> |
Defines a term/name in a description list |
<dd> |
Defines a description/value of a term in a description list |
| Language related | |
<bdo> |
Overrides the current text direction |
<bdi> |
Isolates a part of text that might be formatted in a different direction from other text outside it |
<ruby> |
Defines a ruby annotation (for East Asian typography) |
<rt> |
Defines an explanation/pronunciation of characters (for East Asian typography) |
<rp> |
Defines what to show in browsers that do not support ruby annotations |
| Form related | |
<form> |
Defines an HTML form for user input |
<input> |
Defines an input control |
<button> |
Defines a clickable button |
<select> |
Defines a drop-down list |
<option> |
Defines an option in a drop-down list |
<optgroup> |
Defines a group of related options in a drop-down list |
<datalist> |
Specifies a list of pre-defined options for input controls |
<meter> |
Defines a scalar measurement within a known range (a gauge) |
<progress> |
Represents the progress of a task |
<textarea> |
Defines a multiline input control (text area) |
<label> |
Defines a label for an <input> element |
<fieldset> |
Groups related elements in a form |
<legend> |
Defines a caption for a <fieldset> element |
<output> |
Defines the result of a calculation |
| Multimedia | |
<audio> |
Defines embedded sound content |
<video> |
Defines embedded video content |
<source> |
Defines multiple media resources for media elements (<video> and <audio>) |
<track> |
Defines text tracks for media elements (<video> and <audio>) |
| Graphics | |
<img> |
Defines an image |
<map> |
Defines an image-map |
<area> |
Defines an area inside an image-map |
<picture> |
Defines a container for multiple image resources |
<figure> |
Specifies self-contained content |
<figcaption> |
Defines a caption for a <figure> element |
<svg> |
Defines a container for SVG graphics |
<canvas> |
Used to draw graphics, on the fly, via scripting (usually JavaScript) |
| Inserting external content | |
<iframe> |
Defines an inline frame |
<embed> |
Defines a container for an external application |
<object> |
Defines a container for an external application |
<param> |
Defines a parameter for an object |
Some examples are included in the examples directory to help you see real uses of HTML tags, you can read the code to understand what is being used. The examples are the most minimal posible while still being complete and valid. Clone this repository and double click on each file to open them in your browser to see what is the result of each one. Here are a list of the examples:
| File name | Description |
|---|---|
01-simplest-valid-document.html |
The simplest possible HTML document complaint with this documentation |
02-using-entities-to-show-special-characters.html |
Using HTML entities listed in other of my repos to show text regardless of the encoding of the document (cPanel sometimes change the encoding of a document that contains a special character, if you use entities it will not happen, for example) |
03-open-link-on-button-click.html |
A simple trick to impress your co-workers. Adding a link to a button without JavaScript nor CSS |
04-use-tables-to-make-a-month-calendar.html |
11 out of 10 web developers hate HTML tables, but here is a useful example of them |
05-image-grid.html |
Creating a 9x9 image grid |
06-input-types.html |
Examples of the different input types so you know how to use them depending on what info you want from the user |
07-svg.html |
SVG tags are not part of the HTML specification, but this example shows you how to integrate them in the document |
08-meta-tags.html |
Standard meta tags that give extra information about the document to the browser |
09-open-graph-tags.html |
Open graph meta tags to give extra information about the document to the crawlers of Facebook, Whatsapp, Twitter, MS Teams and other social media and applications, to show a preview of the site when you send a link as message or post |
10-twitter-card-tags.html |
Specific meta tags for twitter, to change the style and data shown in the preview |
I will make a CSS reference starting from the 01-simplest-valid-document.html document, so the experience will feel smooth.