HTML

05 of december of 2023

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 -->
	
	
		
	
	Copied

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>
	
	
		
	
	Copied

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>
	
	
		
	
	Copied

Inside, two more containers are created, the head and the body.

	
		<!DOCTYPE html>
<html lang="es">
    <head>
    </head>
    <body>
    </body>
</html>
	
	
		
	
	Copied

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>
	
	
		
	
	Copied

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

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>
	
	
		
	
	Copied

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>
	
	
		
	
	Copied

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>
	
	
		
	
	Copied

If the link is to a section of the page, the attribute href="#id" is used.

	
		<a href="#id">Enlace</a>
	
	
		
	
	Copied

Therefore, in another part of the page, a container with the attribute id="id" must be placed.

	
		<div id="id">
</div>
	
	
		
	
	Copied

If the link is an email address, the attribute href="mailto:email" is used.

	
		<a href="mailto:email">Email</a>
	
	
		
	
	Copied

If the link is a phone number, the attribute href="tel:phone" is used.

	
		<a href="tel:phone">Teléfono</a>
	
	
		
	
	Copied

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>
	
	
		
	
	Copied

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>
	
	
		
	
	Copied

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>
	
	
		
	
	Copied

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>
	
	
		
	
	Copied

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>
	
	
		
	
	Copied

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>
	
	
		
	
	Copied

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>
	
	
		
	
	Copied

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>
	
	
		
	
	Copied

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>
	
	
		
	
	Copied

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>
	
	
		
	
	Copied

If you want the order of the list to be in reverse order, you put the attribute reversed.

	
		<ol reversed>
    <li></li>
</ol>
	
	
		
	
	Copied

If we want a list item to have a value, we set the attribute value="number".

	
		<ol>
    <li value="2"></li>
</ol>
	
	
		
	
	Copied

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>
	
	
		
	
	Copied

Content Tags

To create a new paragraph, we use the  tag. To emphasize something within a paragraph, we might think of using bold (), but it's better to use the  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

Tiny PNG: reduces the image size* Verexif: Removes image metadata

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"/>
	
	
		
	
	Copied

The alt attribute where the alternative text is indicated.

	
		<img src="path" alt="Texto alternativo"/>
	
	
		
	
	Copied

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"/>
	
	
		
	
	Copied

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"/>
	
	
		
	
	Copied

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/>
	
	
		
	
	Copied

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"/>
	
	
		
	
	Copied

**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>
	
	
		
	
	Copied

`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>
	
	
		
	
	Copied

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>
	
	
		
	
	Copied

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>
	
	
		
	
	Copied

If we don't want playback controls and want the video to play automatically, we set the autoplay attribute.

	
		<video src="path" autoplay>
</video>
	
	
		
	
	Copied

But to avoid disturbing the user, we can make it play silently by adding the muted attribute.

	
		<video src="path" autoplay muted>
</video>
	
	
		
	
	Copied

If we want the video to play in a loop, we add the loop attribute.

	
		<video src="path" autoplay muted loop>
</video>
	
	
		
	
	Copied

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>
	
	
		
	
	Copied

`audio` tag

To play audio, the audio tag is used, for which the src attribute is used.

	
		<audio src="path">
</audio>
	
	
		
	
	Copied

To make the playback controls appear, the controls attribute is added.

	
		<audio src="path" controls>
</audio>
	
	
		
	
	Copied

If we want the audio to play automatically, we add the autoplay attribute.

	
		<audio src="path" autoplay>
</audio>
	
	
		
	
	Copied

If we want the audio to loop, we add the loop attribute.

	
		<audio src="path" autoplay loop>
</audio>
	
	
		
	
	Copied

If we want the audio to loop, we add the loop attribute.

	
		<audio src="path" autoplay loop>
</audio>
	
	
		
	
	Copied

`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>
	
	
		
	
	Copied

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>
	
	
		
	
	Copied

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>
	
	
		
	
	Copied

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>
	
	
		
	
	Copied

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>
	
	
		
	
	Copied

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>
	
	
		
	
	Copied

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>
	
	
		
	
	Copied

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>
	
	
		
	
	Copied

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>
	
	
		
	
	Copied

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>
	
	
		
	
	Copied

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>
	
	
		
	
	Copied

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>
	
	
		
	
	Copied

If we want any to appear by default, we add the open attribute.

	
		<details open>
    <summary>Título</summary>
    <p>Texto</p>
</details>
	
	
		
	
	Copied

Continue reading

MCP Elicitation: Implementing Elicitation in Servers with FastMCP and Python

Learn how to implement elicitation in MCP (Model Context Protocol) servers with FastMCP. Complete step-by-step tutorial to create an intelligent travel booking agent that requests user information interactively. Includes server and client code, virtual environment setup with uv, and practical elicitation examples for real-time user data collection.

MCP Durability: Server and Client with Persistence for Long-Running Tasks

Learn to build durable MCP server and client for long-running tasks with persistence. Complete Model Context Protocol tutorial featuring SQLite data persistence, background task management, and real-time monitoring. Implement data migration, batch processing, and ML model training that survive server restarts. Python code examples using FastMCP, resources, tools, and durability patterns for enterprise applications.

Resumable MCP: How to Build Servers and Clients with Automatic Checkpoints

Learn to build resumable MCP servers and clients with automatic checkpoint capabilities. Complete tutorial on implementing task interruption handling, state persistence, and recovery for long-running processes in Model Control Protocol. Includes practical code with FastMCP, persistent session management, and real-world examples for processes that can be interrupted and resumed from where they left off.

Last posts -->

Have you seen these projects?

Horeca chatbot

Naviground

Subtify

View all projects -->

Do you want to apply AI in your project? Contact me!

Do you want to improve with these tips?

Memory profiler

See the memory usage of a script

DataLoader with pin_memory and num_workers

Increase DataLoader performance with pin_memory and num_workers

py-smi

Python library to get GPU data like `nvidia-smi`

Last tips -->

Use this locally

Hugging Face spaces allow us to run models with very simple demos, but what if the demo breaks? Or if the user deletes it? That's why I've created docker containers with some interesting spaces, to be able to use them locally, whatever happens. In fact, if you click on any project view button, it may take you to a space that doesn't work.

Flow edit

FLUX.1-RealismLora

token_hmr

View all containers -->

Do you want to apply AI in your project? Contact me!

Do you want to train your model with these datasets?

short-jokes-dataset

Dataset with jokes in English

opus100

Dataset with translations from English to Spanish

netflix_titles

Dataset with Netflix movies and series

View more datasets -->

Comments

Head

Body

Container tags

Header

Navigation

Links

Main

Footer

Section

Article

Divider

Unordered lists ul

Ordered lists ol

Role role

Content Tags

Multimedia tags

Image Optimization

Tag img

Tag figure

video tag

audio tag

iframe Tag

Tag dialog

Forms

Grouping Elements

Label

Select

Send

Details

Continue reading

MCP Elicitation: Implementing Elicitation in Servers with FastMCP and Python

MCP Durability: Server and Client with Persistence for Long-Running Tasks

Resumable MCP: How to Build Servers and Clients with Automatic Checkpoints

Have you seen these projects?

Do you want to apply AI in your project? Contact me!

Do you want to improve with these tips?

Memory profiler

DataLoader with pin_memory and num_workers

py-smi

Use this locally

Do you want to apply AI in your project? Contact me!

Do you want to train your model with these datasets?

short-jokes-dataset

opus100

netflix_titles

Unordered lists `ul`

Ordered lists `ol`

Role `role`

Tag `img`

Tag `figure`

`video` tag

`audio` tag

`iframe` Tag

Tag `dialog`