Diccionario HTML: Lo que necesitas saber para una consulta rápida
HTML es el principal lenguaje de marcado al crear páginas web. Tanto con HTML y CSS puedes generar páginas increíbles con toneladas de funciones útiles para tus usuarios. Para ayudarte a armar tu proyecto, he separado algunos comandos esenciales en el formato del contenido.
Primeros pasos con tu página
Lo primero para crear una página web es definir su estructura. En HTML, es necesario precisar algunos detalles como el tipo de documento, el elemento que inicia el formateo, información general, etc. También es en esta estructura donde se establecen vínculos con archivos externos de estilo o codificación, por ejemplo.
Por lo tanto, anota algunos de los comandos esenciales:
<!DOCTYPE html>: Definir el tipo de elemento que informa al navegador la versión de HTML utilizada.
<html></html>: Definir el elemento raíz, esencial para iniciar el formateo en HTML.
<meta></meta>: Insertar metadados.
<head></head>: Insertar información general sobre el documento.
<style></style>: Insertar información de estilo, como definiciones de CSS.
<link></link>: Establecer relación entre el documento y archivos externos.
<title></title>: Insertar título de la barra superior del navegador o en la página.
En la prática: ejemplo de la estrutura aplicada
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
</head>
</html>
A partir de ahora, debes insertar algunos elementos importantes para que tu página realmente tome forma. Separé algunos de los comandos imprescindibles e interesantes para que los insertes en tu documento:
<body></body>: Contenido del documento.
<header></header>: Encabezado del documento.
<main></main>: Contenido principal dentro de body.
<footer></footer>: Pie de página del documento.
Estos son comandos fundamentales para que tu página esté estructurada. Mira en el ejemplo cómo se vería el código con ellos:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>
Con estos comandos puedes insertar más información como menús, secciones, composiciones, botones, saltos de línea, entre otros:
<nav></nav>: Añadir un menú de navegación.
<section></section>: Agregar secciones en el documento.
<aside></aside>: Añadir secciones localizadas en barras laterales.
<article></article>: Insertar composición independiente en un documento.
<button></button>: Insertar botón.
<div></div>: Insertar un elemento de división.
<span></span>: Insertar contenido agrupado.
<br/>: Realizar quiebre de línea.
<hr/>: Insertar línea horizontal para separación de contenidos.
<!-->: Insertar comentario.
<details></details>: Insertar información adicional.
<summary></summary>: Añadir sumario o resumen para un elemento <details></details>.
<a></a>: Insertar hipervínculo. Debe acompañarse del atributo href=””.
<adress></adress>: Insertar información de contacto.
<applet></applet>: Aplicación ejecutada en ventana de otra aplicación.
<area></area>: Marcar espacios definidos dentro de una imagen.
<base></base>: Dirección URL utilizada por todas las relativas dentro del documento.
<basefont></basefont>: Definir la fuente patrón.
<embed></embed>: Incorporar contenido externo.
<dialog></dialog>: Caja de diálogo u otro componente interactivo.
<fieldset></fieldset>: Agrupar elementos.
<legend></legend>: Rótulo para el conteúdo de tu <fieldset>.
<hgroup></hgroup>: Encabezado principal de una sección del documento agrupado con cualquier encabezado secundario.
<ins></ins>: Marcar contenidos insertados en el documento.
<meter></meter>: Valor dentro de un intervalo conocido o valor fraccionario.
<noscript></noscript>: Definir sección de HTML a ser insertada cuando un tipo de script no es soportado o válido.
Ejemplo con algunos elementos aplicados:
<!--Insertado un comentario en el medio del código-->
<button>Haz clic aquí</button>
<br>
<hr>
Puedes buscar más en el blog de <a href="https://blog.revelo.com.br">Revelo</a>. <br>
<span>Puedes insertar un texto agrupado para organizar tu contenido.</span>
Elementos textuais
¡Eso es todo! ¡Tu página está estructurada! Ahora, debemos centrarnos en los elementos textuales y audiovisuales para que el contenido sea ordenado, legible y muy atractivo para tu público objetivo. Con estos comandos, defines una serie de parámetros para calificar tu texto:
<h1></h1> <h2></h2> <h3>/<h3> <h4></h4> <h5></h5> <h6></h6>: Niveles de texto, de mayor a menor.
<p></p>: Insertar párrafo.
<strong></strong>: Insertar texto en bold.
<strong></strong>: Insertar texto con mayor intensidad e importancia.
<em></em>: Insertar texto en cursivas.
<pre>: Insertar texto preformateado.
<em></em>: Mayor énfasis en el texto en cursivas.
<u></u>: Insertar texto subrayado.
<mark></mark>: Insertar texto como destacado.
<del></del>: Identificar parte del texto que fue excluída.
<dfn></dfn>: Instancia de definición de un término.
<abbr>: Abreviación de un término.
<figure></figure>: Insertar un contenido independiente.
<figcaption></figcaption>: Insertar caption para un contenido.
<code></code>: Insertar un fragmento de código.
<kbd></kbd>: Definir una entrada del teclado.
<q></q>: Insertar una cita pequeña.
<cite></cite>: Hacer referencia a un trabajo.
<blockquote></blockquote>: Insertar una cita larga.
<acronym></acronym>: Secuencia de caracteres que componen un acrónimo o abreviatura.
<center></center>: Centralizar elemento.
Ejemplo de cómo utilizar lo anterior:
<h1>Título</h1>
<h2>Título secundario</h2>
<p><strong>Contenido</strong> de <em>texto</em> creado sobre las <strong>PRINCIPALES</strong> tags <u>HTML</u>.</p>
Elementos audiovisuales
Una buena página web no solo se compone de textos, ¿verdad? Es bueno insertar elementos audiovisuales para hacer más interesante y atractivo el contenido. Mira algunos comandos que puedes usar para dichas inserciones:
<img>: Insertar imagen, asociando el atributo source src=””.
<video></video>: Insertar video, asociando los atributos source src=”” y type=””.
<audio></audio>: Insertar audio, asociando los atributos source src=”” y type=””.
<iframe></iframe>: Incluir recursos de otra página, utilizando el atributo source src=””.
Insertar listas
Las listas son esenciales cuando necesitas organizar elementos en tu página, ya sea en medio del contenido o incluso en el menú de navegación. Existen diferentes modelos de listas y debes prestar atención a los comandos correctos para crearlos correctamente:
<ol></ol>: Crear una lista ordenada (ej: ítem 1, ítem 2, ítem 3).
<li></li>: Insertar elementos en la lista.
<ul></ul>: Lista no ordenada (ej: ítem 2, ítem 1, ítem 3).
<select>: Insertar menú con opciones.
<option>: Insertar opciones de select.
<dl></dl>: Crear lista de término/descripción.
<dt></dt>: Crear término/nombre de dl.
<dd></dd>: Crear descripción del término/nombre.
Aquí verás cómo quedaría el código con algunos de estos elementos:
<ul>
<li>Primer ítem de la lista no ordenada</li>
<li>Segundo ítem de la lista no ordenada</li>
<li>Tercei ítem de la lista no ordenada</li>
</ul>
<ol>
<select name="select">
<option value="Ítem1">Ítem 1</option>
<option value="Ítem2" selected>Ítem 2</option>
<option value="Ítem3">Ítem 3</option>
</select>
</ol>
Insertar tablas
Además de las listas, también es posible insertar tablas en tu código HTML. El proceso es fácil: basta utilizar algunos de los comandos abajo:
<table></table>: Crear tabla.
<caption></caption>: Insertar caption de la tabla.
<tr></tr>: Insertar línea en latabla.
<td></td>: Insertar columna en tabla.
<th></th>: Insertar encabezado.
<colgroup></colgroup>: Crear grupo de columnas.
<col></col>: Definir propiedades de la columna.
Ejemplo del código de una tabla simple:
<table border="1">
<tr>
<th>Columna 0</th>
<th>Columna 1</th>
<th>Columna 2</th>
</tr>
<tr>
<td>Ítem 1</td>
<td>Ítem 2</td>
<td>Ítem 3</td>
</tr>
<tr>
<td>Ítem 4</td>
<td>Ítem 5</td>
<td>Ítem 6s</td>
</tr>
</table>
Insertar formularios
Los formularios son herramientas importantes de recolección de información sobre los usuarios que visitan la página. Por eso, es importante adaptarlos adecuadamente para que sean intuitivos e fáciles de llenar. Aquí algunos comandos que te ayudarán a crear tu formulario:
Elementos estructurales esenciales para la creación de un formulario:
<form></form>: Iniciar un formulario.
<input></input>: Campos de relleno de información.
<placeholder></placeholder: Indica al usuario el tipo de información que debe insertarse en el campo.
Atributos que pueden (y deben) ser definidos:
<input type="text">: Insertar campo para relleno con texto.
<input type="password">: Insertar campo para relleno en el formato de contraseña.
<input type="radio">: Insertar campo para selección de apenas una opción de un número limitado de opciones.
<input type="checkbox">: Insertar campo para selección de una o más opciones de un número limitado de ellas.
<input type="button">: Insertar botón.
<input type="color">: Insertar campo para selección de colores.
<input type="email">: Insertar campo para inserción de e-mail.
<input type="file">: Insertar campo para upload de archivo.
<input type="hidden">: Ocultar dato para no figurar en el formulário.
<input type="image">: Insertar campo para upload de imagen.
<input type="number">: Insertar campo para número.
<input type="date">: Insertar campo para fecha.
<input type="tel">: Insertar campo para teléfono.
<input type="range">: Insertar campo para definir intervalo entre valores.
<input type="search">: Insertar campo para búsqueda.
<input type="datetime-local">: Insertar campo para fecha y hora local.
<input type="week">: Insertar campo para semana.
<input type="month">: Insertar campo para mes.
<input type="url">: Insertar campo para URL.
<input type="submit">: Enviar información del formulario.
<input type="reset">: Resetear campos.
<input type=”text” list=”stack”>: Insertar campo con opciones preseleccionadas.
<inputmode="numeric">: Mostrar teclado numérico.
<inputmode="decimal">: Mostrar teclado decimal.
<inputmode="tel">: Mostrar teclado telefónico, com + * #.
<inputmode="search">: Mostrar teclado para búsqueda, con botón go/ir.
<inputmode="url">: Mostrar teclado para acceso a la URL, com / e .com.
<inputmode="email">: Mostrar teclado para inserción de e-mail, insertando @.
<textarea></textarea>: Insertar área de texto.
<label></label>: Definir rótulo para elemento de input.
<keygen></keygen>: Especificar un campo generador de par de llaves en formulario.
<map></map>: Comando utilizado con los elementos <area> para definir un mapa de imagem.
Abajo algunos ejemplos de formularios con los atributos aplicados:
<input type="text" placeholder="Inserta tu nombre aquí"/>
<input type="password" placeholder="Inserta tu constraseña aquí"/>
<input type="color" placeholder="Selecciona un color"/>
<input type ="number" placeholder="Inserta tu edad" inputmode="numeric"/> <input type="datetime-local"/>
<input type="radio" name="color" value="Azul"><label for="Azul">Azul</label><br> <input type="radio" name="color" value="Roxo"><label for="roxo">Roxo</label><br> <input type="radio" name="color" value="Color"><label for="rojo">Rojo</label> <input type="checkbox" name="Item 1" checked><label for="scales">Item 1</label><br> <input type="checkbox" name="Item 2" checked><label for="scales">Item 2</label><br> <input type="checkbox" name="Item 3" checked><label for="scales">Item 3</label><br> <input type="checkbox" name="Item 4" checked><label for="scales">Item 4</label><br> <input type="file"/>
<input type="week"/>
<input type="search" placeholder="Buscar"/>
<input type="text" list="stack">
<datalist id="stack">
<option value="Blog Revelo">Blog Revelo</option>
<option value="Guía HTML">Guia HTML</option>
</datalist>
El lenguaje de marcado HTML tiene multitud de recursos disponibles y éstos son los principales que necesitas para construir tu página web. Para darle estilo a las funcionalidades, no olvides insertar los atributos “clase” y/o “id”, ya que identificarán tus elementos al crear el archivo CSS.
Además, pueden ser utilizados por archivos JavaScript y, por lo tanto, el consejo es definirlos cuando escribas tu código.
En este artículo repasamos un diccionario de etiquetas HTML superpráctico con consejos para crear páginas completas llenas de características interesantes para atraer la atención de tu audiencia.
¡Guarda este contenido en tus favoritos para buscarlo cuando lo necesites!
¡Hasta luego!
Revelo Content Network da la bienvenida a todas las razas, etnias, nacionalidades, credos, géneros, orientaciones, puntos de vista e ideologías, siempre y cuando promuevan la diversidad, la equidad, la inclusión y el crecimiento profesional de los profesionales en tecnología.