Disclaimer: This post has been translated to English using a machine translation model. Please, let me know if you find any mistakes.
Comments
To add a comment to an html
, the following code is used:
<!-- Comentario -->
Head
The HTML
must start with a !DOCTYPE
tag that indicates the version of HTML to the browser. By simply putting HTML
, the browser understands it as version 5.
<!DOCTYPE html>
The following must be a container with the html
tag that has an attribute called lang
indicating the language in which the page is written.
<!DOCTYPE html><html lang="es"></html>
Inside, two more containers are created, the head
and the body
.
<!DOCTYPE html><html lang="es"><head></head><body></body></html>
In the head
container goes everything that the browser needs to be able to load, while in the body
goes everything that will be visible on the page.
One of the head
tags is meta
which has an attribute called charset
that indicates the type of text encoding, usually it is 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 bots and indicates whether the page can be followed or not.
Another attribute of the head
is title
which indicates the title that is seen in the tab.
Another meta is name="viewport"
which is for responsive design.
Another meta is name="theme-color"
which is for the navigation bar color.
Another goal is the favicon, which is the icon that appears on the tab. It is written with the link
tag and the attributes type
and href="path"
.
Some important tags for SEO are all those related to Open Graph
, which are the ones that appear when sharing a link on social media. For this, a very useful page is open graph, where you can enter your link and it will show you how it would look on each social network. These meta tags are
property="og:title"
which is the title that appears on social media.
property="og:description"
is the description that is seen on social media.
property="og:image"
is the image that is displayed on social media.
property="og:image:alt"
is the alternative text for the image that appears on social media.
There is a tag for CSS
that is link
On the Open Graph page, you can see all the tags that can be placed in the head
.
Another important tag for SEO is link rel="alternate"
which is used 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 used 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 create a structure and contain more tags inside. And there are container tags that are the ones that contain the text, images, etc.
Container tags
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
The nav
tag is used to create navigation. Inside this tag, you can place links using the a
tag and a logo using 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
Like in navigation, links are created with the a
tag and carry an attribute href="path"
that indicates the link to which the link leads. They can also have an attribute target="_blank"
that indicates it opens in a new tab. Additionally, you can add the attribute rel="noreferer"
which indicates that no information about the page from which the link comes is passed.
<a href="path" target="_blank">Enlace</a>
If the link is to a section of the page, the attribute href="#id"
is used.
<a href="#id">Enlace</a>
Therefore, in another part of the page, a container with the attribute id="id"
must be placed.
<div id="id"></div>
If the link is an email address, the attribute href="mailto:email"
is used.
<a href="mailto:email">Email</a>
If the link is a phone number, the attribute href="tel:phone"
is used.
<a href="tel:phone">Teléfono</a>
If you want to add 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
Inside main
sections can be created
<!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
Inside main
there can be articles
<!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, the div
tag can be used, 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 lists ul

Inside main
there can be unordered lists, each item of the list must have the li
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></div></article></section></main><footer></footer></body></html>
Ordered lists ol

Within main
there can be ordered lists, each item of the list must have the li
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></article></section></main><footer></footer></body></html>
The type of list order can be changed 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, use the attribute start="number"
.
<ol start="2"><li></li></ol>
If you want the order of the list to be in reverse order, you put the attribute reversed
.
<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>
Role role

Each of the tags we've seen before has a role, but the role of each one can be changed with the role="role"
attribute.
<!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 emphasize something within a paragraph, we might think of using bold (<b></b>
), but it's 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
.
To create hyperlinks, the a
tag is used, the href
attribute indicates the address of the hyperlink. If a hash #
is used, the page does not refresh.
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. Therefore, in general, replaceable tags do not have a closing tag.
There are two types of images
- Lossy (with loss): These images lose quality, but are lighter. jpg, jpeg* Lossless (without loss): 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
Tag img

Page to download free images from the internet 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 serves to display the title when we hover over the image with the mouse, also serves for SEO
, so that search engines know what the image is about.
<img src="path" alt="Texto alternativo" title="TÃtulo"/>
We can also set the width
and height
attributes to indicate the size of the image, but it's better not to set them and let the browser calculate it.
<img src="path" alt="Texto alternativo" title="TÃtulo" width="100" height="100"/>
The hidden
attribute can be used to hide an image, which is very useful when we want an image to appear after the user performs an action. With 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 use the loading="lazy"
attribute, which makes the image load when the user approaches it.
<img src="path" alt="Texto alternativo" title="TÃtulo" loading="lazy"/>
**Important!** Do not use the
loading="lazy"
attribute on images that are important for SEO, such as the logo. Nor should you use it on images at the beginning of the webpage, as this can cause a flicker.
Tag figure

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 figcapture
tag.
<figure><img src="path" alt="Texto alternativo" title="TÃtulo"/><figcaption>Descripción</figcaption></figure>
video
tag
This tag can be used to add videos, for which the src
attribute is used. To display the playback buttons, the controls
attribute must be added. The last attribute is preload="auto"
, which ensures that the video starts downloading when the page begins to load, so by the time the user wants to play it, a significant portion is already loaded and it will take less time to start playing.
<video src="path" controls preload="auto"></video>
If you want it to start playing at a specific minute, after the source in src
you need to put #t=xx,yy
<video src="path#t=1,2" controls></video>
If the video is in multiple formats, the source should 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 certain videos better than others.
<video controls><source src="path" type="video/mp4"/><source src="path" type="video/webm"/></video>
If we don't want playback controls and want the video to play automatically, we set the autoplay
attribute.
<video src="path" autoplay></video>
But to avoid disturbing the user, we can make it play silently by adding the muted
attribute.
<video src="path" autoplay muted></video>
If we want the video to play in a loop, we add the loop
attribute.
<video src="path" autoplay muted loop></video>
This is very useful for adding a background video to a webpage.
To change the video image when it is not playing, set the attribute poster="path"
.
<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>
To make the playback controls appear, the controls
attribute is added.
<audio src="path" controls></audio>
If we want the audio to play automatically, we add the autoplay
attribute.
<audio src="path" autoplay></audio>
If we want the audio to loop, we add the loop
attribute.
<audio src="path" autoplay loop></audio>
If we want the audio to loop, we add the loop
attribute.
<audio src="path" autoplay loop></audio>
iframe
Tag
When we share a YouTube video, we are given 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.
Tag dialog

You may have noticed that many people in their portfolios put their projects and when you click on them, a dialog box opens with more information, or in image galleries when you click on an image, a dialog box opens with the larger image. This is done using the dialog
tag.
<dialog></dialog>
Inside you can put whatever you want, for example a title, some 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 within 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 use the form
tag. Inside this tag, you place the form fields. The action
attribute specifies where the form is sent to. The method
attribute indicates the submission method, which can be get
or post
. The name
attribute specifies the name of the form, which is useful for JavaScript
.
<form action="path" method="post" name="name"></form>
Grouping Elements
The fieldset
tag is used to group form elements. Inside this tag, the form elements are placed. 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.
The form element is placed below, for example input
.
You need to 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
must be entered mandatory, you can add the required
attribute.
If the user had already entered a value in the input
, the autocomplete
attribute can be used to indicate that it should be filled out automatically.
The pattern
attribute can be used to specify a regular expression for validating the input
. For example, to validate whether the email 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 the for
attribute is not necessary 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
The select
tag creates a dropdown. Inside this tag, the options of the dropdown are placed using 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 of having many options, the datalist
tag can be used to create a list of options. This way, as the user starts typing one of the options from the list, the matching options are displayed. Inside this tag, the options are placed using 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
To submit the form, the input
tag with the attribute type="submit"
is used.
<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 create sections of text that are normally collapsed, such as a frequently asked questions section, you can use the details
tag. Inside this tag, you put the summary
tag, which is the title of the section. And within the details
tag, you place the text of the section.
<details><summary>TÃtulo</summary><p>Texto</p></details>
If we want any to appear by default, we add the open
attribute.
<details open><summary>TÃtulo</summary><p>Texto</p></details>