El HTML es la columna vertebral de Internet en la actualidad. Millones de sitios web juntos formaron Internet. El HTML es el elemento básico de todos estos sitios web. Hace veinte años, incluso si eras un bloguero aficionado, tenías que saber algo de codificación web para protegerte o para agregar una función simple a tu sitio. Pero ahora hay tantos editores y complementos disponibles que ni siquiera saber los conceptos básicos de HTML es necesario.
El problema es que si no conoces algunos conceptos básicos, puedes meterte fácilmente en serios problemas con tu blog y tener que contratar a un desarrollador costoso para que arregle lo que puede ser un problema menor. No solo eso, sino que realizar cambios en tu blog, como agregar un widget de texto personalizado, requiere un poco de conocimiento.
Y si experimentas que el diseño del contenido no se ve bien, el conocimiento de HTML puede ayudarte a volver al camino correcto.
Antes de empezar: conceptos básicos de HTML
¿Qué es HTML?
HTML es la abreviatura de Hyper Text MArkupe LIdioma. Es el lenguaje estándar para etiquetar contenidos en los navegadores web.
El lenguaje HTML se representa mediante “Elementos”, también conocidos como “Etiquetas”.
¿Por qué es necesario HTML?
Los navegadores web solo pueden mostrar un sitio web cuando está escrito en el lenguaje que admiten. HTML es el lenguaje de marcado más común y el que tiene mayor aceptación en los navegadores web.
Por eso necesitas HTML.
¿HTML distingue entre mayúsculas y minúsculas?
HTML no distingue entre mayúsculas y minúsculas, pero lo mejor es escribir HTML con mayúsculas y minúsculas adecuadas.
Pasos para crear tu primer archivo HTML
Puedes crear un archivo HTML básico usando el Bloc de notas de tu computadora, pero te resultará complicado escribir muchas líneas de código.
Necesitas un editor de código. Un buen editor de código te facilitará la escritura y la organización de códigos grandes. Yo uso y recomiendo Notepad++ (gratuito y de código abierto) para escribir lenguajes web. Hay otros editores que puedes usar, como Sublime Text, Atom, etc.
Aquí está lo que tú necesitas hacer:
- Instalar un editor de código
- Abrelo
- Crear un nuevo archivo
- Guárdalo como un archivo .html
1. ¡Hola mundo!
Copie y pegue el siguiente código en su nuevo archivo HTML y guárdelo. Ahora ejecútelo en su navegador web.
Código HTML
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Salida:
¡Felicitaciones! Has creado tu primer archivo HTML. No es necesario que lo entiendas en este momento. Lo abordaremos en breve.
Entendiendo la estructura HTML
Cada archivo HTML tiene una estructura básica común. Aquí es donde todo comienza. Y cada página grande de códigos llegará a esta estructura después de recortarla.
Intentemos entenderlo a partir del código de “¡Hola mundo!”. Los siguientes elementos son las partes obligatorias de cada archivo HTML.
- = Es una declaración al navegador de que se trata de un archivo HTML. Debe especificarlo antes de la etiqueta.
- = Este es el elemento raíz de un archivo HTML. Todo lo que escribes va entre y .
- = Esta es la parte de metainformación de un navegador. Los códigos dentro de esta etiqueta no tienen salida visual.
- = Esta es la parte que muestra un navegador web. Lo que se ve exactamente en un sitio web es la representación de códigos entre y .
2. Etiquetas HTML
HTML es la colaboración de cientos de etiquetas diferentes. Es necesario aprender cómo funcionan y asegurarse de que se hayan utilizado correctamente.
Las etiquetas HTML suelen tener una etiqueta de apertura y otra de cierre. La etiqueta de apertura tiene la palabra clave rodeada por un signo menor que (<) y un signo mayor que (>). La etiqueta de cierre tiene todo lo mismo, excepto una barra diagonal adicional (/) después del signo menor que (<).
Etiquetas de cabeza
Todas las etiquetas de la cabeza van entre y Contienen metainformación para navegadores web y motores de búsqueda. Básicamente, no tienen salida visual.
La etiqueta de título define el título de una página web que se ve en la pestaña del navegador. Esta información es utilizada por programas web y motores de búsqueda. Puede tener como máximo un título por archivo HTML.
Código:
<title>My first web page</title>
La etiqueta de enlace vincula su página HTML con recursos externos. Su uso principal es vincular la página HTML con hojas de estilo CSS. Es una etiqueta de cierre automático y no necesita la terminación Aquí rel representa la relación con el archivo y src significa la fuente.
Código:
<link rel="stylesheet" type="text/css" src="style.css">Meta es otra etiqueta de cierre automático que proporciona información meta de un archivo html. Los motores de búsqueda y otros servicios web utilizan esta información. Las etiquetas meta son imprescindibles si desea optimizar su página para los motores de búsqueda.
Código:
<meta name="description" content="This is the short description that search engines show"La etiqueta de script se utiliza para incluir un script del lado del servidor o crear un enlace a un archivo de script externo. Puede tener dos atributos en la etiqueta de apertura. Uno es el tipo y otro es la fuente (src).
Código:
<script type="text/javascript" src="scripts.js"></script>La etiqueta Noscript funciona cuando los scripts están deshabilitados en un navegador web. Hace que una página sea compatible con quienes no permiten scripts en sus navegadores web.
Código:
<noscript><p>Alas! Scripts are disabled.</p></noscript>Etiquetas del cuerpo
Todas las etiquetas del cuerpo van entre y Tienen salidas visuales. Aquí es donde se realiza la mayor parte del trabajo. Debes usar estas etiquetas para estructurar el contenido de tu página principal.
a
Estas son las etiquetas de encabezado. El encabezado más importante está etiquetado con y lo menos importante con Debes utilizarlos en la jerarquía correcta.
Código:
<h1>This is a h1 heading</h1>
<h2>This is a h2 heading </h2>
<h3>This is a h3 heading </h3>
<h4>This is a h4 heading </h4>
<h5>This is a h5 heading </h5>
<h6>This is a h6 heading </h6>Salida:
Etiquetas de formato
El texto de un archivo HTML se puede formatear mediante muchas etiquetas de formato. Esto será necesario cuando desee resaltar una palabra o una línea de su contenido.
Código:
<p>You can highlight your text in many ways.</p>
<p>You can <strong>bold</strong>, <u>underline</u>, <em>italic</em>, <mark>mark</mark>, <sub>subscript</sub>, <sup>superscript</sup> and more!</p>Salida:
Puedes desviar algunos códigos de la representación mediante la etiqueta de comentarios. El código aparecerá en el código fuente, pero no se representará. El uso principal de esta etiqueta es crear documentación de archivos HTML para referencia futura.
Ejemplo:
<!-- <p>You can comment out any code by surrounding them in this way</p> -->Otras etiquetas HTML importantes
El ancla es una etiqueta muy valiosa que se utiliza prácticamente en todas partes. No verá ninguna página web en línea sin al menos un enlace de ancla.
La estructura es la misma. Tiene una parte de apertura y otra de cierre . El texto que quieres anclar va entre y .
Hay algunos atributos que definen dónde y cómo va el usuario después de hacer clic en él.
- ahref=” “ = Define el enlace de destino. El enlace va entre comillas dobles.
- objetivo="" " = Define si la URL se abrirá en una nueva pestaña del navegador o en la misma pestaña. target=”_blank” es para la nueva pestaña y target=”_self” es para abrir en la misma pestaña.
- rel="" “ = Define la relación de la página actual con la página vinculada. Si no confías en la página vinculada, puedes definir rel=”nofollow”.
Código:
<p><a target="_blank" href="https://www.google.com/">Click here</a> to go to Google.
It will open in a new tab.</p>
<p><a target="_self" href="https://www.google.com/">Click here</a>.
It will also take you to Google but will open in the current tab.</p>Salida:
La etiqueta de imagen es otra etiqueta importante sin la cual no se pueden imaginar muchos sitios web basados en imágenes.
es una etiqueta de cierre automático. No necesita el cierre tradicional como Hay algunos atributos que debes conocer antes de poder usarlo correctamente.
- origen="" = Sirve para definir el enlace de origen de la imagen. Coloque el enlace entre las comillas dobles.
- alt="" “ = Significa texto alternativo. Cuando la imagen no se carga, este texto les dará a los usuarios una idea de la imagen faltante.
- ancho=” “ = Define el ancho de una imagen en píxeles.
- Altura=” “ = Define la altura de una imagen en píxeles.
<p>This is the Googleplex in August 2014.</p>
<p>This image has a width of 500 pixels and a height of 375 pixels.</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG"
alt="Google's Headquarter in August 2014" width="500" height="375" />Salida:
Consejos: ¿Quieres insertar una imagen en la que se pueda hacer clic? Envuelve el código de la imagen con una etiqueta. Observa cómo funciona.
o
La etiqueta de lista se utiliza para crear una lista de elementos. representa listas ordenadas (lista numerada) y significa listas desordenadas (viñetas).
Los elementos de la lista dentro de la o está etiquetado con . li significa lista. Puedes tener tantas como quieras dentro del padre o etiqueta.
Código:
<p>This is an ordered list:</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<p>This is an unordered list:</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Salida:
La etiqueta de tabla sirve para crear una tabla de datos. Hay algunas etiquetas de nivel interno que definen los encabezados, las filas y las columnas de la tabla.
es el código padre externo. En esta etiqueta, significa fila de mesa, representa la columna de la tabla y significa encabezado de tabla.
Código:
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
<tr>
<td>Jo
<td>27</td>
<td>Businessman</td>
</tr>
<tr>
<td>Carol</td>
<td>26</td>
<td>Nurse</td>
</tr>
<tr>
<td>Simone</td>
<td>39</td>
<td>Professor</td>
</tr>
</table>Salida:
Nota: Los valores dentro del primer son encabezados. Entonces, usamos que aplica un efecto de texto en negrita al texto.
Agrupación de tablas
Puede ampliar la funcionalidad de una tabla mediante elementos de agrupación de tablas. Habrá ocasiones en las que necesite crear tablas grandes que se dividan en varias páginas.
Si agrupa los datos de su tabla en encabezado, cuerpo y pie de página, podrá permitir el desplazamiento independiente. El encabezado y el cuerpo se imprimirán en todas las páginas en las que se haya extendido la tabla.
Las etiquetas de agrupación de tablas son:
- = Para envolver los encabezados de una tabla. Se imprime en cada página dividida de la tabla.
- = Para encapsular los datos principales de una tabla. Puede tener tantos como desee. según lo necesites. etiqueta significa un grupo separado de datos.
- = Para envolver la información del pie de página de una tabla. Se imprime en cada página dividida de la tabla.
Tenga en cuenta que no es obligatorio utilizar la agrupación. Puede utilizarla para que las tablas más grandes sean más legibles. Si bien algunos desarrolladores especiales utilizan estas etiquetas como selectores CSS.
Aquí se muestra cómo podemos agrupar nuestra tabla ejemplificada en , y :
Código:
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>27</td>
<td>Businessman</td>
</tr>
<tr>
<td>Carol</td>
<td>26</td>
<td>Nurse</td>
</tr>
<tr>
<td>Simone</td>
<td>39</td>
<td>Professor</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total Persons:</td>
<td>3</td>
</tr>
</tfoot>
</table>Salida:
El elemento de formulario se utiliza para crear formularios interactivos para páginas web. Un formulario HTML contiene varios elementos consecutivos. Por ejemplo: , , etc.
El atributo de acción en el formulario es muy importante. Apunta a una página del lado del servidor o de un tercero para procesar la información. Para el procesamiento, primero debe definir un método.
Puede utilizar cualquiera de los dos métodos: get o post. Get envía toda la información en formato URL, mientras que Post envía la información en el cuerpo del mensaje.
Existen muchos tipos de entrada para formularios. El tipo de entrada más básico es el texto. Se escribe como Los tipos también pueden ser radio, casilla de verificación, correo electrónico, etc. Debe haber una entrada de tipo de envío en la parte inferior para crear un botón de envío.
La etiqueta se utiliza para crear etiquetas y asociarlas con las entradas. La regla para asociar etiquetas con las entradas es que tengan el mismo valor en el atributo for="" de la etiqueta y en el atributo id="" de la entrada.
Código:
<form action="#">
<label for="firstname">First Name: </label>
<input type="text" id="firstname"><br>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname"><br>
<label for="bio">Short Bio: </label>
<textarea id="bio" rows="10" cols="30" placeholder="Enter your bio here..."></textarea><br>
<label>Gender:</label><br>
<label for="male">Male</label>
<input type="radio" name="gender" id="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female"><br>
<input type="submit" value="Submit">
<form>Salida:
Nota: He apuntado la acción a un valor nulo porque no estaba conectada a ningún servidor para procesar la información.
3. Atributos HTML
Los atributos son un tipo de modificadores de las etiquetas HTML. Añaden nuevas configuraciones a las etiquetas HTML.
Un atributo tiene el siguiente aspecto: attributename=” ” y se ubica en la etiqueta HTML de apertura. El valor del atributo va entre comillas dobles.
id=”” y clase=””
id y class son los identificadores de las etiquetas HTML. Se asignan distintos nombres a distintos elementos HTML mediante identificadores. Puedes utilizar un identificador de clase para varios elementos, pero no puedes utilizar un identificador id para varios elementos.
Código:
<h1 class="heading">This is the main title</h1>href=””
href significa Referencia de hipertexto. Dirigen a los usuarios a enlaces de referencia. La etiqueta de anclaje utiliza href para enviar a los usuarios a una URL de destino.
Código:
<a href="https://www.google.com/">Google</a>origen=””
src significa source (fuente). Define la fuente de un medio o recurso que estás usando en el archivo HTML. La fuente puede ser una URL local o de terceros.
Código:
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />alt = ""
Alt significa alternativa. Es un texto de respaldo que se utiliza cuando no se puede cargar un elemento HTML.
Código:
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt="Google's Headquarter" />estilo=””
El atributo style se utiliza a menudo en las etiquetas HTML. Cumple la función de CSS dentro de la etiqueta HTML. Las propiedades de estilo se colocan entre comillas dobles.
Código:
<h2 style="color:red">This is another title</h2>4. Visualización de código: bloque vs. en línea
Algunos elementos siempre comienzan en una nueva línea y ocupan todo el ancho disponible. Estos son los elementos de “bloque”.
Ex: , , - , forma etc.
Algunos elementos ocupan únicamente el espacio necesario y no comienzan en una nueva línea. Estos son elementos "en línea".
Ex: , , , , etc.
Necesitará diferenciar los elementos de bloque de los elementos en línea cuando utilice estilos CSS. En esta guía HTML, no es muy necesario.
Código:
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h2>This is a H2 heading. It has Block display.</h2>
<h2>This is <u>another</u> H2 heading. Here the underline tag has Inline display.</h2>
</body>
</html>Salida:
5. Comillas dobles y comillas simples en HTML
Esta pregunta es muy obvia. ¿Qué se debe utilizar en HTML? ¿Comillas simples o comillas dobles? La gente parece utilizar ambas, pero ¿cuál es la correcta?
En HTML, las comillas simples y las comillas dobles son lo mismo. No hacen ninguna diferencia en el resultado.
Puedes utilizar cualquiera que prefieras, pero mezclar ambos en una página de códigos se considera una mala práctica. Debes ser coherente con cualquiera de ellos.
6. HTML semántico vs HTML no semántico
El HTML semántico es la última versión del HTML, también llamado HTML5. Es la versión desarrollada del HTML no semántico y XHTML.
¿Por qué HTML5 es mejor? En versiones anteriores, los elementos HTML se identificaban por nombres de id/clase. Por ejemplo: Fue considerado un artículo.
En HTML5, La etiqueta se representa a sí misma como un artículo sin necesidad de ningún identificador de clase/id.
Gracias a HTML5, los motores de búsqueda y otras aplicaciones web pueden comprender mejor una página web. Se ha demostrado que los sitios web semánticos son más eficaces para el SEO.
A continuación se muestra una lista de algunas etiquetas HTML5 populares:
- = Esto es para envolver el contenido principal que desea mostrar a sus espectadores.
- = Esto es para marcar la parte del encabezado de un contenido, como el título o el metadatos del autor.
- = Especifica un contenido definido por el usuario o independiente para sus espectadores.
- = Puede agrupar cualquier código, como encabezado, pie de página o barra lateral. Se puede decir que es la forma semántica de un div.
- = Aquí es donde debe colocarse el contenido de pie de página, el descargo de responsabilidad o el texto de derechos de autor.
- = Te permite insertar archivos de audio sin tener ningún problema con el complemento.
- = Me gusta Puedes insertar vídeos usando esta etiqueta sin problemas con el complemento.
Una estructura HTML5 simple se vería así:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first web page</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>This is the title of the article</h2>
<p>Posted by John Doe</p>
</header>
<p>Content of the article goes here</p>
</article>
</main>
<footer>
<p>Copyright 2025 John Doe</p>
</footer>
</body>
</html>7. Validación HTML
La mayoría de los profesionales web validan su código después de terminarlo. ¿Por qué es necesario validar un código cuando funciona correctamente?
Hay dos posibles razones para validar sus códigos:
- Le ayudará a que su código sea compatible con varios navegadores y plataformas. Es posible que el código no muestre ningún error en su navegador actual, pero sí en otro. La validación del código lo solucionará.
- Los motores de búsqueda y otros programas web pueden dejar de rastrear tu página si contiene errores. Puedes confirmar mediante una validación que no tienes ningún error importante.
W3C Validator es el servicio más popular para la validación de códigos. Cuenta con varios métodos para validar códigos. Puedes cargar un archivo o ingresar el código directamente en su motor de validación.
Dar el siguiente paso: de escribir HTML a crear y alojar su sitio web
Ahora que ya comprendes bien los conceptos básicos de HTML, estás en el camino correcto para crear páginas web funcionales y bien estructuradas. Ya sea que sigas codificando manualmente o prefieras un enfoque más simplificado, existen muchas herramientas que te ayudarán a darle vida a tus proyectos.
Si está buscando crear sitios web sin profundizar en el código, considere explorar Nuestra lista de los mejores creadores de sitios web sin códigoEstas plataformas le permiten diseñar y lanzar sitios web profesionales con facilidad, utilizando interfaces intuitivas de arrastrar y soltar, perfectas para convertir rápidamente sus ideas en realidad sin sacrificar la flexibilidad.
Para aquellos que estén listos para poner en marcha sus proyectos HTML, elegir el servicio de alojamiento adecuado es crucial. Vea algunos de los Los mejores proveedores de alojamiento de sitios web estáticos en esta guía para encontrar opciones asequibles que complementen perfectamente sus sitios codificados a mano.
Sea cual sea el camino que elijas, la combinación de tus conocimientos de HTML con las herramientas y soluciones de alojamiento adecuadas sentará las bases de tu presencia en línea. ¡Feliz codificación!
