HTML
HTML (HyperText Markup Language) es el lenguaje de marcado estándar para crear páginas web. Este documento cubre las etiquetas más comunes y ejemplos de su uso, incluyendo párrafos, formularios, tablas, accesibilidad y datalists.
Etiquetas Comunes
<html>
<html lang=”es”>
<head></head>
<body></body>
</html>
Define el inicio y el fin de un documento HTML.
<head>
<head>
<title>Título de la Página</title>
</head>
Contiene metadatos sobre el documento, como el título y enlaces a estilos o scripts.
<title>
<title>Mi Página Web</title>
Especifica el título del documento que aparece en la pestaña del navegador.
<body>
<body>
<h1>Hola Mundo</h1>
</body>
Contiene el contenido visible de la página web.
<p>
<p>Este es un párrafo.</p>
Define un párrafo de texto.
<a>
<a href=”Visita” class=”redactor-linkify-object”>https://www.ejemplo.com”>Visita Ejemplo
Define un enlace a otra página web.
<img>
<img src=”imagen.jpg” alt=”Descripción de la imagen”>
Incorpora una imagen en la página.
<ul> y <ol>
<ul>
<li>Elemento de lista no ordenada</li>
</ul>
<ol>
<li>Elemento de lista ordenada</li>
</ol>
Define listas desordenadas y ordenadas.
<div>
<div>Contenido aquí</div>
Define una sección genérica en el documento.
<span>
<span>Texto en línea</span>
Define una sección en línea dentro de un bloque.
Formularios
Los formularios permiten a los usuarios enviar datos. Aquí hay un ejemplo básico:
<form action=”/submit” method=”post”>
<label for=”nombre”>Nombre:</label>
<input type=”text” id=”nombre” name=”nombre”>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email”>
<input type=”submit” value=”Enviar”>
</form>
Tablas
Las tablas se utilizan para organizar datos en filas y columnas:
<table>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
</tr>
</table>
Accesibilidad
HTML permite mejorar la accesibilidad de las páginas web. Algunas prácticas incluyen:
Usar atributos alt en imágenes.
Utilizar etiquetas <label> para formularios.
Definir roles y propiedades ARIA cuando sea necesario.
Datalist
El elemento <datalist> proporciona una lista de opciones para un campo de entrada:
<input list=”frutas” name=”fruta”>
<datalist id=”frutas”>
<option value=”Manzana”>
<option value=”Naranja”>
<option value=”Plátano”>
</datalist>
Conclusión
HTML es fundamental para la creación de páginas web. Conocer sus etiquetas y su uso es esencial para cualquier desarrollador web.