HTML
Comments
This notebook has been automatically translated to make it accessible to more people, please let me know if you see any typos.
To add a comment to an html, the following code is used:
<!-- Comentario -->
Head
The html has to start with a !DOCTYPE tag that tells the browser the version of html, by putting html the browser understands that it is the 5
<!DOCTYPE html>
Then you have to put a container with the html tag with an attribute called lang that indicates the language in which the page is written.
<!DOCTYPE html>
<html lang="es">
</html>
Two more containers are created inside, one for head and one for body.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
</body>
</html>
In the head container goes everything the browser needs to load, while in the body goes everything that will be seen on the page
One of the head tags is meta which carries an attribute called charset that indicates the type of encoding of the text, usually utf-8, utf-16.
Another type of meta is the name="description" which is a description for browsers. It is important for SEO.
Another type of meta is the name="robots" which is for search engine robots and indicates whether the page can be tracked or not.
Another attribute of the head is title which indicates the title you see in the tab.
Another meta is name="viewport" which is for the responsible design.
Another goal is name="theme-color" which is for the color of the navigation bar.
Another goal is the favicon which is the icon you see on the tab. It is written with the link tag and the type attribute and href="path".
A very important tags for SEO are all those related to Open Graph which are those that are seen when a link is shared on social networks. For this a very useful page is open graph, where you put your link and it tells you how it will be seen in each social network. These goals are
property="og:title" which is the title seen in social networks.
property="og:description" which is the description seen in social networks.
property="og:image" which is the image seen in social networks.
property="og:image:alt" which is the alternative text of the image seen on social networks.
There is a tag for the CSS which is link.
In the Open Graph page you can see all the tags that can be put in the head.
Another important tag for SEO is link rel="alternate" which is to indicate that there is an alternative version of the page, for example in another language.
Another important tag for SEO is link rel="canonical" which is to indicate that there is a canonical version of the page, for example in another language.
With the style and script tags you can write CSS and JavaScript in the html.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name="description" content="Descripción para los buscadores"/>
<meta name="robots" content="index,folow"/>
<title>Título pestaña</title>
<meta name="viewport" content="width=device-width"/>
<meta name="theme-color" content="#09f"/>
<link rel="stulesheet" href="path"/>
<link rel="icon" type="image/png" href="path"/>
<meta property="og:title" content="Título para las redes sociales"/>
<meta property="og:description" content="Descripción para las redes sociales"/>
<meta property="og:image" content="path"/>
<meta property="og:image:alt" content="Texto alternativo para la imagen"/>
<link rel="alternate" href="path" hreflang="en"/>
<link rel="canonical" href="path"/>
</head>
<body>
</body>
</html>
Body
There are container tags that help to create a structure and carry more tags inside. And there are container tags that are the ones that contain the text, images, etc.
Container labels
Header
This is the tag to describe the header.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name="description" content="Descripción para los buscadores"/>
<meta name="robots" content="index,folow"/>
<title>Título pestaña</title>
<meta name="viewport" content="width=device-width"/>
<meta name="theme-color" content="#09f"/>
<link rel="stulesheet" href="path"/>
<link rel="icon" type="image/png" href="path"/>
<meta property="og:title" content="Título para las redes sociales"/>
<meta property="og:description" content="Descripción para las redes sociales"/>
<meta property="og:image" content="path"/>
<meta property="og:image:alt" content="Texto alternativo para la imagen"/>
<link rel="alternate" href="path" hreflang="en"/>
<link rel="canonical" href="path"/>
</head>
<body>
<header>
Header
</header>
</body>
</html>
Navigation
With the nav tag the navigation is created. Within this tag you can put links with the a tag and you can put a logo with the img tag.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name="description" content="Descripción para los buscadores"/>
<meta name="robots" content="index,folow"/>
<title>Título pestaña</title>
<meta name="viewport" content="width=device-width"/>
<meta name="theme-color" content="#09f"/>
<link rel="stulesheet" href="path"/>
<link rel="icon" type="image/png" href="path"/>
<meta property="og:title" content="Título para las redes sociales"/>
<meta property="og:description" content="Descripción para las redes sociales"/>
<meta property="og:image" content="path"/>
<meta property="og:image:alt" content="Texto alternativo para la imagen"/>
<link rel="alternate" href="path" hreflang="en"/>
<link rel="canonical" href="path"/>
</head>
<body>
<header>
<nav>
<a href="path">Enlace</a>
<img src="path" alt="Texto alternativo"/>
</nav>
</header>
</body>
</html>
Links
As in navigation, links are created with the a tag and carry a href="path" attribute indicating the link to which the link leads. They also carry a target="_blank" attribute indicating that it opens in a new tab. In addition, the attribute rel="noreferer" can be set to indicate that no information is passed from the page from which the link comes.
<a href="path" target="_blank">Enlace</a>
If the link is a link to a section of the page, the href="#id" attribute is set.
<a href="#id">Enlace</a>
So in another part of the page you have to put a container with the id="id" attribute.
<div id="id">
</div>
If the link is an email, the href="mailto:email" attribute is set.
<a href="mailto:email">Email</a>
If the link is a phone, the href="tel:phone" attribute is set.
<a href="tel:phone">Teléfono</a>
If you want to put a link to open WhatsApp, you put the attribute href="https://wa.me/phone".
<a href="https://wa.me/phone">WhatsApp</a>
Main
This is the tag to describe the main.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name="description" content="Descripción para los buscadores"/>
<meta name="robots" content="index,folow"/>
<title>Título pestaña</title>
<meta name="viewport" content="width=device-width"/>
<meta name="theme-color" content="#09f"/>
<link rel="stulesheet" href="path"/>
<link rel="icon" type="image/png" href="path"/>
<meta property="og:title" content="Título para las redes sociales"/>
<meta property="og:description" content="Descripción para las redes sociales"/>
<meta property="og:image" content="path"/>
<meta property="og:image:alt" content="Texto alternativo para la imagen"/>
<link rel="alternate" href="path" hreflang="en"/>
<link rel="canonical" href="path"/>
</head>
<body>
<header>
<nav>
<a href="path">Enlace</a>
<img src="path" alt="Texto alternativo"/>
</nav>
</header>
<main>
</main>
</body>
</html>
Footer
This is the tag to describe the footer.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name="description" content="Descripción para los buscadores"/>
<meta name="robots" content="index,folow"/>
<title>Título pestaña</title>
<meta name="viewport" content="width=device-width"/>
<meta name="theme-color" content="#09f"/>
<link rel="stulesheet" href="path"/>
<link rel="icon" type="image/png" href="path"/>
<meta property="og:title" content="Título para las redes sociales"/>
<meta property="og:description" content="Descripción para las redes sociales"/>
<meta property="og:image" content="path"/>
<meta property="og:image:alt" content="Texto alternativo para la imagen"/>
<link rel="alternate" href="path" hreflang="en"/>
<link rel="canonical" href="path"/>
</head>
<body>
<header>
<nav>
<a href="path">Enlace</a>
<img src="path" alt="Texto alternativo"/>
</nav>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>
Section
Within main you can make sections
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name="description" content="Descripción para los buscadores"/>
<meta name="robots" content="index,folow"/>
<title>Título pestaña</title>
<meta name="viewport" content="width=device-width"/>
<meta name="theme-color" content="#09f"/>
<link rel="stulesheet" href="path"/>
<link rel="icon" type="image/png" href="path"/>
<meta property="og:title" content="Título para las redes sociales"/>
<meta property="og:description" content="Descripción para las redes sociales"/>
<meta property="og:image" content="path"/>
<meta property="og:image:alt" content="Texto alternativo para la imagen"/>
<link rel="alternate" href="path" hreflang="en"/>
<link rel="canonical" href="path"/>
</head>
<body>
<header>
<nav>
<a href="path">Enlace</a>
<img src="path" alt="Texto alternativo"/>
</nav>
</header>
<main>
<section>
</section>
</main>
<footer>
</footer>
</body>
</html>
Article
Within main there may be items
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name="description" content="Descripción para los buscadores"/>
<meta name="robots" content="index,folow"/>
<title>Título pestaña</title>
<meta name="viewport" content="width=device-width"/>
<meta name="theme-color" content="#09f"/>
<link rel="stulesheet" href="path"/>
<link rel="icon" type="image/png" href="path"/>
<meta property="og:title" content="Título para las redes sociales"/>
<meta property="og:description" content="Descripción para las redes sociales"/>
<meta property="og:image" content="path"/>
<meta property="og:image:alt" content="Texto alternativo para la imagen"/>
<link rel="alternate" href="path" hreflang="en"/>
<link rel="canonical" href="path"/>
</head>
<body>
<header>
<nav>
<a href="path">Enlace</a>
<img src="path" alt="Texto alternativo"/>
</nav>
</header>
<main>
<section>
<article>
</article>
</section>
</main>
<footer>
</footer>
</body>
</html>
Divider
When we have run out of semantic tags, we can use the div tag which is a generic container.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name="description" content="Descripción para los buscadores"/>
<meta name="robots" content="index,folow"/>
<title>Título pestaña</title>
<meta name="viewport" content="width=device-width"/>
<meta name="theme-color" content="#09f"/>
<link rel="stulesheet" href="path"/>
<link rel="icon" type="image/png" href="path"/>
<meta property="og:title" content="Título para las redes sociales"/>
<meta property="og:description" content="Descripción para las redes sociales"/>
<meta property="og:image" content="path"/>
<meta property="og:image:alt" content="Texto alternativo para la imagen"/>
<link rel="alternate" href="path" hreflang="en"/>
<link rel="canonical" href="path"/>
</head>
<body>
<header>
<nav>
<a href="path">Enlace</a>
<img src="path" alt="Texto alternativo"/>
</nav>
</header>
<main>
<section>
<article>
<div>
</div>
</article>
</section>
</main>
<footer>
</footer>
</body>
</html>
Unordered ul lists
Within main there can be unordered lists, each item in the list must have the tag li.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name="description" content="Descripción para los buscadores"/>
<meta name="robots" content="index,folow"/>
<title>Título pestaña</title>
<meta name="viewport" content="width=device-width"/>
<meta name="theme-color" content="#09f"/>
<link rel="stulesheet" href="path"/>
<link rel="icon" type="image/png" href="path"/>
<meta property="og:title" content="Título para las redes sociales"/>
<meta property="og:description" content="Descripción para las redes sociales"/>
<meta property="og:image" content="path"/>
<meta property="og:image:alt" content="Texto alternativo para la imagen"/>
<link rel="alternate" href="path" hreflang="en"/>
<link rel="canonical" href="path"/>
</head>
<body>
<header>
<nav>
<a href="path">Enlace</a>
<img src="path" alt="Texto alternativo"/>
</nav>
</header>
<main>
<section>
<article>
<div>
<ul>
<li></li>
</ul>
</div>
</article>
</section>
</main>
<footer>
</footer>
</body>
</html>
Sorted lists ol
Within main there can be sorted lists, each item in the list must have the tag li.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name="description" content="Descripción para los buscadores"/>
<meta name="robots" content="index,folow"/>
<title>Título pestaña</title>
<meta name="viewport" content="width=device-width"/>
<meta name="theme-color" content="#09f"/>
<link rel="stulesheet" href="path"/>
<link rel="icon" type="image/png" href="path"/>
<meta property="og:title" content="Título para las redes sociales"/>
<meta property="og:description" content="Descripción para las redes sociales"/>
<meta property="og:image" content="path"/>
<meta property="og:image:alt" content="Texto alternativo para la imagen"/>
<link rel="alternate" href="path" hreflang="en"/>
<link rel="canonical" href="path"/>
</head>
<body>
<header>
<nav>
<a href="path">Enlace</a>
<img src="path" alt="Texto alternativo"/>
</nav>
</header>
<main>
<section>
<article>
<div>
<ul>
<li></li>
</ul>
<ol>
<li></li>
</ol>
</div>
</article>
</section>
</main>
<footer>
</footer>
</body>
</html>
You can change the order type of the list with the attribute type="a" for letters, type="i" for Roman numerals, type="1" for Arabic numerals.
<ol type="a">
<li></li>
</ol>
If you want the order of the list to start at a specific number, set the start="number" attribute.
<ol start="2">
<li></li>
</ol>
If you want the order of the list to go in reverse order, set the reversed attribute.
<ol reversed>
<li></li>
</ol>
If we want a list item to have a value, we set the attribute value="number".
<ol>
<li value="2"></li>
</ol>
Sorted lists ol
Each of the tags we have seen before has a role, but you can change the role of each of them with the role="role" tag.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name="description" content="Descripción para los buscadores"/>
<meta name="robots" content="index,folow"/>
<title>Título pestaña</title>
<meta name="viewport" content="width=device-width"/>
<meta name="theme-color" content="#09f"/>
<link rel="stulesheet" href="path"/>
<link rel="icon" type="image/png" href="path"/>
<meta property="og:title" content="Título para las redes sociales"/>
<meta property="og:description" content="Descripción para las redes sociales"/>
<meta property="og:image" content="path"/>
<meta property="og:image:alt" content="Texto alternativo para la imagen"/>
<link rel="alternate" href="path" hreflang="en"/>
<link rel="canonical" href="path"/>
</head>
<body>
<header>
<nav>
<a href="path">Enlace</a>
<img src="path" alt="Texto alternativo"/>
</nav>
</header>
<main>
<section>
<article>
<div>
<ul>
<li></li>
</ul>
<ol>
<li></li>
</ol>
</div>
<div role="list">
<div role="listitem">
</div>
</div>
</article>
</section>
</main>
<footer>
</footer>
</body>
</html>
Content tags
To create a new paragraph we use the <p></p> tag. To give emphasis to something within a paragraph we can think of using bold (<b></b>), but it is better to use the <strong></strong> tag, since the b tag is deprecated.
To create a title we have the tags h1, h2, h3, h4, h5, h6.
The a tag is used to create hyperlinks, the href attribute indicates the address of the hyperlink. If you put a # pad, the page is not refreshed.
Multimedia tags
Multimedia tags do not have opening and closing tags, for example the img tag is not written as <img></img> but as <img/>. This is because it is replaced by an image. So in general replaceable tags do not have closing tags.
There are two types of images
- Lossy: These images lose quality, but they are less heavy. jpg, jpeg
- Lossless: These images do not lose quality, but they are very heavy. gif, png-8, png-24, svg
Image optimization
The average size should be 70 kB
img tag
Page to download free images online pexels
The img tag has the src attribute where the source is indicated.
<img src="path"/>
The alt attribute where the alternative text is indicated.
<img src="path" alt="Texto alternativo"/>
The title attribute where the title of the image is indicated, which is used so that when we leave the mouse over the image the title appears, it is also used for the SEO, so that search engines know what the image is about.
<img src="path" alt="Texto alternativo" title="Título"/>
We can also put the width and height attribute to indicate the size of the image, but it is better not to put it and let the browser calculate it.
<img src="path" alt="Texto alternativo" title="Título" width="100" height="100"/>
With the hidden attribute you can hide the image. This is very useful for when we want an image to appear after the user performs an action. So with the JavaScript we can remove the hidden attribute and the image will appear.
<img src="path" alt="Texto alternativo" title="Título" hidden/>
To make pages load faster, you can set the loading="lazy" attribute that makes the image load when the user approaches it.
<img src="path" alt="Texto alternativo" title="Título" loading="lazy"/>
Do not put the
loading="lazy"attribute on images that are important for SEO, such as the logo. Neither on images that are at the top of the web page, otherwise you will see a flicker.
figure tag
This tag allows us to create a container for the image, for example it allows us to add a description, for this you need to use the tag figcapture.
<figure>
<img src="path" alt="Texto alternativo" title="Título"/>
<figcaption>Descripción</figcaption>
</figure>
video tag
With this tag you can add videos, using the src attribute. The controls attribute is used to make the playback buttons appear. The last attribute is preload="auto", this is so that the video starts to download when the page starts to load, so when the user is going to play it, it is already loaded and it will take less time to play.
<video src="path" controls preload="auto">
</video>
If you want it to start playing at a certain minute, in src just after the source you have to put #t=xx,yy.
<video src="path#t=1,2" controls>
</video>
If the video is in several formats, the source must be placed inside a tag called source, where the different possible sources of the video are indicated. The browser will decide which source to use. This is because some browsers play some videos better than others.
<video controls>
<source src="path" type="video/mp4"/>
<source src="path" type="video/webm"/>
</video>
If we do not want to have playback controls and the video to play automatically, the autoplay attribute is set.
<video src="path" autoplay>
</video>
But in order not to disturb the user we can make it play without sound, for this we set the muted attribute.
<video src="path" autoplay muted>
</video>
If we want the video to loop, we set the loop attribute.
<video src="path" autoplay muted loop>
</video>
This is very useful for putting a video in the background of a web page.
To change the image of the video when it is not playing, the poster="path" attribute is set.
<video src="path" autoplay muted loop poster="path">
</video>
audio tag
To play audio, the audio tag is used, for which the src attribute is used.
<audio src="path">
</audio>
The controls attribute is set to display the playback controls.
<audio src="path" controls>
</audio>
If we want the audio to play automatically, we set the autoplay attribute.
<audio src="path" autoplay>
</audio>
If we want the audio to loop, we set the loop attribute.
<audio src="path" autoplay loop>
</audio>
If we want the audio to loop, we set the loop attribute.
<audio src="path" autoplay loop>
</audio>
iframe tag
When we share a youtube video it gives us the option to copy the code. This generates an html code that has the iframe tag. This tag is used to embed content from other web pages.
<iframe src="path">
</iframe>
We have talked about the youtube page, but we could embed any page. Although there are some pages that do not allow this.
dialog label
You may have seen that many people in their portfolios put their projects and when you click on it a dialog box opens with more information, or in image galleries when you click on an image a dialog box opens with a larger image. This is done with the dialog tag.
<dialog>
</dialog>
Inside you can put whatever you want, for example a title, a text, an image, etc.
<dialog id="id">
<h1>Título</h1>
<p>Texto</p>
<img src="path" alt="Texto alternativo"/>
</dialog>
To open the dialog box, a button can be placed inside a script.
<dialog id="dialog">
<h1>Título</h1>
<p>Texto</p>
<img src="path" alt="Texto alternativo"/>
</dialog>
<button id="open">
Abrir
</button>
<script>
window.open.addEventListener("click", () => {
window.dialog.showModal();
});
</script>
Forms
to create a form we do it with the form tag, inside this tag we put the fields of the form. The action attribute indicates where the form is sent to. The method attribute indicates the submission method, it can be get or post. The name attribute indicates the name of the form, this is useful for JavaScript.
<form action="path" method="post" name="name">
</form>
Grouping of elements
With the fieldset tag you can group elements of a form. The elements of the form are placed inside this tag. The legend attribute indicates the title of the group of elements.
<form action="path" method="post" name="name">
<fieldset>
<legend>Título</legend>
</fieldset>
</form>
Label
The label tag creates a label for a form element. The for attribute indicates the id of the form element it refers to.
Then the form element is placed, for example input.
You must specify the type, which can be of type text, email, password, number, date, time, color, range, file, checkbox, radio, submit, reset, button, hidden.
If the input is mandatory, the required attribute can be added.
If the user has already entered a value in the input, the autocomplete attribute can be used to indicate that it should be filled in automatically.
With the pattern attribute you can specify a regular expression to validate the input. For example to validate if the mail or phone number is correct.
<form action="path" method="post" name="name">
<fieldset>
<legend>Título</legend>
<label for="id">Nombre:</label>
<input type="text" id="id" name="name" placeholder="Nombre" required autocomplete="on"/>
</fieldset>
</form>
Another way to specify the input of a label is to put the input inside the label. Now there is no need for the for attribute because it is understood that the label refers to the input inside.
<form action="path" method="post" name="name">
<fieldset>
<legend>Título</legend>
<label>Nombre:
<input type="text" id="id" name="name" placeholder="Nombre" required/>
</label>
</fieldset>
</form>
Select
With the select tag a dropdown is created. Inside this tag the options of the dropdown are placed with the option tag. The value attribute indicates the value of the option. The selected attribute indicates the option that is selected by default.
<form action="path" method="post" name="name">
<fieldset>
<legend>Título</legend>
<label>Nombre:
<input type="text" id="id" name="name" placeholder="Nombre" required/>
</label>
<label>País:
<select name="country">
<option value="es">España</option>
<option value="fr">Francia</option>
<option value="it" selected>Italia</option>
</select>
</label>
</fieldset>
</form>
In case you have many options, you can use the datalist tag to create a list of options, this way, when the user types one of the options in the list, the options that match what he has typed are shown. Inside this tag the options are placed with the option tag. The value attribute indicates the value of the option.
<form action="path" method="post" name="name">
<fieldset>
<legend>Título</legend>
<label>Nombre:
<input type="text" id="id" name="name" placeholder="Nombre" required/>
</label>
<label>País:
<input type="text" list="countries" name="country"/>
<datalist id="countries">
<option value="es">España</option>
<option value="fr">Francia</option>
<option value="it">Italia</option>
</datalist>
</label>
</fieldset>
</form>
Send
The input tag with the type="submit" attribute is used to submit the form.
<form action="path" method="post" name="name">
<fieldset>
<legend>Título</legend>
<label>Nombre:
<input type="text" id="id" name="name" placeholder="Nombre" required/>
</label>
<input type="submit" value="Enviar"/>
</fieldset>
</form>
Details
If you want to make text sections that are normally collapsed, such as a FAQ section, you can use the details tag. Inside this tag you put the summary tag which is the title of the section. And inside the details tag we put the text of the section.
<details>
<summary>Título</summary>
<p>Texto</p>
</details>
If we want any of them to appear by default, we set the open attribute.
<details open>
<summary>Título</summary>
<p>Texto</p>
</details>
