Qué son las etiquetas HTML
Las etiquetas HTML son bloques de código que dan formato, funcionalidad y estructura al contenido de las páginas web. Estos f ragmentos
sirven como indicadores o instrucciones para que un navegador muestre de forma adecuada la información contenida en tus documentos.
Es importante mencionar que el HTML no se considera un lenguaje de programación, pues no crea funciones dinámicas. No obstant e, con el
apoyo de las etiquetas HTML, los desarrolladores pueden configurar diversas estructuras para sus sitios web; por ejemplo: secciones, tablas,
párrafos, enlaces y atributos.
Actualmente existen muchas etiquetas HTML disponibles que pueden ayudarte a crear varios aspectos de tu sitio web. En esta ocasión te
hablaremos de las más básicas que debes conocer. Pero antes, ahondemos un poco más en la funcionalidad de estos elementos.
Para qué sirven las etiquetas HTML
Las etiquetas HTML son un estándar adoptado por todos los desarrolladores que —mediante etiquetas de texto— les permite a los navegadores
interpretar los elementos de una página web sin importar en dónde, cuándo o en qué idioma fue creada, con la finalidad de mostrar el contenido
a los usuarios.
En otras palabras, las etiquetas HTML determinan cómo se verá un sitio web. Cada una indica y representa un atributo que los navegadores
deben interpretar y mostrar al usuario cuando visita cualquier sitio en internet.
Cómo funcionan las etiquetas HTML
Gracias a las etiquetas de HTML, la construcción de una página puede ser entendida por m áquinas y humanos, pues el código se basa en la
descripción de los elementos que la componen. Lo mejor de todo es que son accesibles y sencillas de aprender, por lo que no n ecesitas ser un
experto o experta en desarrollo web para insertar imágenes, videos, enlaces, documentos o dar un formato enriquecido a tus contenidos.
Cuando tienes acceso a la estructura de una página web, reconocerás las etiquetas de HTML de inmediato, pues están escritas e ntre estos
signos: <tipo-de-etiqueta>texto</tipo-de-etiqueta>. La primera parte encerrada entre signos es la apertura de la etiqueta, y la segunda, que
cuenta con una diagonal, indica el cierre de esa etiqueta. Esto sirve para indicarle al navegador la porción de texto que deberá modificarse por
dicha indicación. Si se trata de una imagen, un salto de línea o video no es necesario señalar el cierre, pero eso lo hablaremos adelante.
Por otro lado, todas las páginas web que utilizan este lenguaje lo indican desde la primera etiqueta, al inicio, y luce así: <HTML>. Al pie de esa
página, se muestra la de cierre: </HTML>.
Partes básicas de las etiquetas HTML
Para comprender, a grandes rasgos, lo que son las etiquetas HTML te mostramos cuáles son sus partes básicas y para qué sirve cada una:
Elemento
Es el nombre de la etiqueta, generalmente pareada (es decir: con apertura y cierre, como lo acabamos de mencionar), y aparece entre los
signos de apertura. Por ejemplo: <title>Partes básicas de etiquetas HTML</title>, que indica que esa frase es un título.
Atributo
Es lo que diferencia a un elemento y que le da ciertas características, como tamaño, color, tipo de fuente. Se escribe antes del signo de igual
(=), junto al elemento de la etiqueta, únicamente en la apertura y antes de la variable. Por ejemplo: <font face="Arial">. Este texto aparecerá en
tipografía Arial</font>. El atributo es el tipo letra, es decir: face.
Contenido
Es el texto que modifica las etiquetas, lo que aparece entre las etiquetas y atributos.
Variable
Es la característica del atributo de una etiqueta: color, tamaño, tipo de letra, y se escribe generalmente entrecomillado después del signo de
igual. En el ejemplo de atributo, la variable es Arial.
Veamos las etiquetas HTML que debes conocer.
21 tipos de etiquetas de HTML
<!doctype>
<html> </html>
<head> </head>
<title> </title>
<body> </body>
<h1> ... <h6>
<p> </p>
<font> </font>
<strong> </strong>
<em> </em>
<u> </u>
<sub> </sub>
<sup> </sup>
<br>
<nobr>
<p align="..."> </p>
<ul> </ul>
<ol> </ol>
<li> </li>
<a> </a>
<img>
1. <!doctype>
Existen etiquetas HTML para indicar el lenguaje en que está configurado el texto. Estas determinan la manera en que el navegador debe
procesar el documento.
Ejemplo de etiqueta HTML para indicar tipo de lenguaje
La etiqueta <!doctype> informa al navegador qué versión se usó de HTML o XML para escribir el documento. Se agrega siempre al inicio del
documento y no debe olvidarse nunca, pues es una información clave que necesitan los navegadores o cualquier otra herramienta para
procesar el documento.
2. <html> </html>
Este tipo de etiquetas HTML definen el documento entero de una página y el resto de los elementos descenderán de ellas.
Ejemplo de etiqueta HTML para indicar la raíz del documento
Estas son una de las etiquetas HTML más familiares: <html>...</html>; si bien la primera puede ser implícita, es esencial para abrir y cerrar
cualquier documento en HTML.
3. <head> </head>
Dentro de estas etiquetas se encuentra la información sobre el documento que no se muestra al usuario. Ahí se puede encontrar el título que
tendrá la pestaña de la página web, los metadatos de la autoría o la licencia.
Ejemplo de etiqueta HTML para indicar información general del documento
Las etiquetas HTML <head> y </head> brindan todo tipo de información conocida como metadatos, donde se incluyen títulos, párrafos, enlaces,
entre otros. Para incluir metadatos y metatítulos claros en tu código puedes utilizar un generador de metadescripciones; esto hará más sencillo
tu proceso de escritura y, además, te ayudará a elevar tu tasa de clickthrough.
4. <title> </title>
Sirve para indicar el título del documento y la forma en que aparecerá en la barra del navegador y en la pestaña en la que esté abierta. No es el
título del texto, sino de la página, y se incluye junto a la etiqueta de <head>.
Ejemplo de etiqueta HTML para indicar el título del documento
Las etiquetas HTML <title> y </title> son utilizadas para indicar el título del documento y se componen únicamente por texto.
5. <body> </body>
Las etiquetas HTML que señalan el cuerpo del documento sirven para agregar diversos atributos de color o imagen de fondo de p ágina, color de
enlaces, color de texto, entre otros.
Ejemplo de etiqueta HTML para indicar el cuerpo del documento
Una vez que se cierra el contenido con la etiqueta </head>, las etiquetas de <body> y </body> abren y cierran el texto, como si se
tratara de los límites del contenido que se muestra en la página web y que puede ver el usuario. Para establecer un símil con un
libro, esta etiqueta indica dónde inicia la primera línea y dónde termina la última de una página.
6. <h1> ... <h6>
Con las etiquetas indicas los títulos y subtítulos de un texto, en diferentes tamaños, según su nivel de importancia.
Ejemplo de etiqueta HTML para indicar el título y subtítulo del documento
Las etiquetas pueden ir desde <h1>...</h1> a <h6>...</h6>. El <h1> es el más grande y debería dedicarse al título del texto.
7. <p> </p>
Con estas etiquetas HTML puedes indicar dónde empieza y termina cada párrafo de texto, para que los bloques de información no aparezcan
como una lista larga sin pausas. Es decir, agrega un salto de línea entre párrafos.
Ejemplo de etiqueta HTML para indicar el párrafo del documento
Las etiquetas <p> y </p> sirven para crear los párrafos y dentro de ellas también se indican atributos específicos, como la alineación del texto,
ya sea izquierda, derecha, centrada o justificada.
Así lucen las etiquetas de párrafo que inciden en el segundo párrafo. Lo puedes leer en esta nota del diario El País, y es la razón por la que está
separado del primero y el tercero:
8. <font> </font>
Esta etiqueta básica sirve para indicar la fuente que se utilizará en una selección de texto. Por sí sola no funciona, pues necesita atributos y
variables que indiquen cuál tipografía será, tamaño y colores.
Ejemplo de etiqueta HTML para indicar la fuente del documento
Las etiquetas de <font> y </font> señalan el tamaño, color o fuente del documento. Por ejemplo, si debes indicar la fuente, l a etiqueta se escribe
así:
Para que aparezca en otro color, puedes utilizar como variable el código hexadecimal o el RGB, según prefieras. Si te inclinas por uno de los
colores básicos, solo escribe su nombre en inglés:
Para cambiar el tamaño de la fuente, pero sin marcar que es un título o subtítulo que cambia de tema, puedes elegir entre el 1 y 7. El n úmero
base es 3, para que te des una idea:
9. <strong> </strong>
Con estas etiquetas conviertes a negritas el texto señalado para destacar una idea o un concepto.
Ejemplo de etiqueta HTML para indicar texto en negritas del documento
Las etiquetas <strong> y </strong> cumplen esta función, aunque también puedes utilizar: <b> y </b>, que se refieren al término «bold», como lo
hacen los creadores de tipografías.
10. <em> </em>
Similar a las etiquetas para indicar negritas en el texto, estas sirven cuando necesitas convertir en cursivas una porción de texto.
Ejemplo de etiqueta HTML para indicar texto en cursiva del documento
Las etiquetas <em> y </em> cumplen esta función. Otra variante es <i>...</i>, pero la primera se utiliza más.
11. <u> </u>
Estas etiquetas HTML sirven para subrayar un texto que no tendrá hipervínculo.
Ejemplo de etiqueta HTML para subrayar texto del documento
Las etiquetas más utilizadas son <u>...</u>.
12. <sub> </sub>
Estas etiquetas son funcionales sobre todo al compartir un texto que tiene llamados de citas a pie de página, ya que el subín dice ayuda a
enumerarlas correctamente, o cuando se escribe un artículo científico. Con esta etiqueta podrás alinear el llamado en la parte baja de la línea de
texto a la que acompaña.
Ejemplo de etiqueta HTML para agregar un subíndice al documento
Si requieres definir un fragmento de texto haz uso de las etiquetas <sub> y </sub>.
13. <sup> </sup>
Estas etiquetas muestran un fragmento de texto que, por razones tipográficas, debe mostrarse más alto, pero más pequeño que e l tramo
principal del texto general. A esto se le conoce como superíndice. También se usa para agregar una marca que lleve a una nota a pie de página,
como una aclaración o un dato legal de la información que compartes.
Ejemplo de etiqueta HTML para agregar un superíndice al documento
Si necesitas agregar un dato legal o cualquier otro de los elementos destacados arriba, necesitas las etiquetas <sup> y </sup> para que el
llamado aparezca, más pequeño que el texto al que acompaña, en la parte superior del renglón.
14. <br>
Esta etiqueta es tu aliada para indicar que deseas agregar un salto de línea, ya que no le agrega formato a un texto. No se necesita señalar el
cierre, solo la apertura. Es muy útil cuando deseas que la línea se corte en cualquier punto, de manera que, si lo considera necesario, el
navegador agregará una barra de deslizado vertical.
Ejemplo de etiqueta HTML para agregar un salto de línea al documento
El periódico argentino Página 12 utiliza la etiqueta <br> en uno de sus artículos, para que el lector pueda visualizar un salto de párrafo más
amplio.
15. <nobr>
Si, por el contrario, quieres que el contenido se extienda horizontalmente, sin romper líneas de texto, indícalo con esta etiqueta al
inicio. Así, el lector podrá avanzar hacia la derecha gracias al cursor que el navegador agregará de forma horizontal.
Ejemplo de etiqueta HTML para impedir agregar un salto de línea al documento
La etiqueta <nobr> cumple esta función, pero ,debido a que no es tan amigable para la lectura, te recomendamos que no la utilices
mucho.
16. <P align="..."> </p>
La combinación de esta esta etiqueta junto con un atributo y variable te permite alinear tu párrafo en la dirección que prefieras.
Solo debes cambiar la variable, que está entre comillas, según lo que quieras: left (izquierda), right (derecha), center (al centro)
o justify(para justificar el texto).
Ejemplo de etiqueta HTML para alinear párrafo del documento
Las siguientes etiquetas <P align="..."> y </P> te servirán para alinear tu párrafo: solo debes señalar hacia dónde lo quieres. Como
puedes intuir, está pensada para párrafos completos. Pero cuando desees hacerlo solo para líneas de texto, de forma
independiente, cambia la P por DIV.
17. <ul> </ul>
Si necesitas agregar una lista que solo tendrá viñetas, es decir, que no tiene que enumerarse, utiliza esta etiqueta.
Ejemplo de etiqueta HTML para crear listas en el documento
Las etiquetas <ul> y </ul> harán que lo que escribas entre los elementos (que están entre los signos) se acompañe por un punto a
la izquierda.
18. <ol> </ol>
En cambio, si quieres que los elementos de la lista aparezcan enumerados en orden ascendente, esta es la etiqueta correcta.
Ejemplo de etiqueta HTML para crear listas numeradas en el documento
Al igual que el ejemplo anterior, solo haz uso de las etiquetas HTML de <ol> y </ol> y obtendrás listas con numeración.
19. <li> </li>
En contexto con el ejemplo anterior, cada uno de los elementos de una lista debe escribirse con una etiqueta especial, no importa
si serán numerados o no.
Ejemplo de etiqueta HTML para listar elementos en el documento
En un artículo de nuestro blog donde se mencionan ideas en lista, hacemos uso de las etiquetas <li> y </li>.
20. <a> </a>
Para agregar hipervínculos que llevan a otros documentos, hay una etiqueta general que indica al navegador que, cuando se haga
clic al enlace, este debe abrirse en la misma ventana.
Ejemplo de etiqueta HTML para agregar hipervínculo al documento
La etiqueta <a href="destino"> y su cierre </a> cumplen este objetivo. «Destino» es el enlace a donde llevará a los visitantes, y los
puntos suspensivos son el texto que se convertirá en el hipervínculo.
El código de una página de Buzzfeed nos indica dónde agregaron un enlace y sobre cuál texto:
Si quieres que el enlace se abra en una ventana nueva, toma este modelo: <a href="destino" target="_blank">...</a>
Por supuesto, además de las páginas de otros que deseamos vincular, existen otros elementos externos que pueden enlazarse en tus
contenidos, como correos y servidores FTP. También están los locales (dentro del mismo directorio) o los que se conocen como ancla. Estos
últimos son muy útiles para leer un texto amplio, con diferentes secciones a las que se puede «brincar» haciendo clic en una lista de títulos y
subtítulos, en lugar de mover el cursor durante horas.
21. <img>
Hay una etiqueta HTML muy básica que te ayuda a incluir imágenes en tu documento, con la cual también podrás agregar ciertos atributos para
una mejor experiencia de usuario.
Ejemplo de etiqueta HTML para agregar imágenes al documento
La etiqueta <img> es la que debes utilizar, pero junto con ella también debes agregar el atributo src («source», u «origen» en español), porque
es el que indica la ruta en donde se encuentra la imagen. Esta puede estar en el mismo directorio HTML que tu texto o en una URL. Te
recomendamos que sea la primera opción, porque al elegir una que está alojada de manera externa pondrás a tu servidor a buscar el enlace
cada vez que alguien abra la página.
Así que, siguiendo el ejemplo de una imagen que está dentro del mismo directorio HTML, tendría que escribirse así:
Si está en un subdirectorio, se indica de esta manera:
Y cuando se trata de una URL:
Este es un ejemplo real que corresponde a dos imágenes que aparecen en otro artículo de HubSpot:
Al igual que la etiqueta HTML <br>, no necesita cierre.
Las etiquetas de HTML tienen su lógica, si lo revisas bien. Podría decirse que la base está en aprender un par de atajos y listo: ya puedes editar
y mejorar los aspectos más importantes de tus páginas web sin caer en el pánico.
Colores HTML- Colores RGB
Los colores en HTML se especifican mediante el estándar RGB (Red Green and Blue). Este
estándar indica que una combinación de los tres colores básicos: rojo, verde y azul puede dar lugar
a cualquier otro color.
Los valores que se les da al RGB son valores hexadecimales que van desde el 00 hasta el FF. Al
valor del color se le antepone una almohadilla.
De esta forma un color rojo sería aquel que solo tiene activado el Red, el verde solo la parte del
Green y el azul la parte del Blue. Así los colores básicos en HTML serán:
Rojo #FF0000
Verde #00FF00
Azul #0000FF
Otras combinaciones generales de colores serían el negro (activando todos los colores), el blanco (desactivando todos los colores), amarillo
(combinando Red y Blue), fucsia (combinando todo el rojo y todo el azul)
Negro #FFFFFF
Blanco #000000
Amarillo #FFFF00
Fucsia #FF00FF
Y luego ya combinaciones de los múltiples valores hexadecimales
Gris Plata #C0C0C0
Azul Marino #000080
Verde Oliva #808000
…
Aunque lo más recomendable es utilizar el código hexadecimal para representar un valor, tenemos la alternativa de referirnos a los colores por
su nombre en inglés. Este valor también será entendido por el navegador web. Así tendremos:
Rojo - red
Verde - green
Azul - blue
Blanco - white
Negro - black
Naranja - orange
…
Utilizar los colores en HTML
Los colores al ser elementos de estilo son utilizados en las CSS. Ya que HTML solo define la estructura de la página.
Pero vamos a ver, por encima, cómo podríamos cambiar el color de un texto. Para ello vamos a utilizar el atributo style. El atributo style nos
permite asignar un estilo CSS a un elemento HTML.
El estilo que vamos a manipular es color. A ese atributo color le asignaremos un valor RGB.
<elemento style="color:#RGB" />
Por ejemplo si queremos cambiar el color a un header podríamos hacer lo siguiente.
<h1 style="color:#FF0000">Cabecera 1</h1>
Otro atributo CSS al que podríamos dar un colo es el color de fondo. Para ello deberemos de manipular el atributo background-color. De esta
forma si queremos poner un color de fondo a una capa podríamos hacer lo siguiente.
<div style="background-color:#FFFF00">Mi Capa</div>
Guía de Colores Hexadecimales
A modo de apoyo aquí tenemos una guía de colores generales, sus valores hexadecimales y nombre en inglés
Aliceblue Antiquewhite Aqua Aquamarine
F0F8FF FAEBD7 00FFFF 7FFFD4
Azure Beige Bisque Black
F0FFFF F5F5DC FFE4C4 000000
Blanchedalmond Blue Blueviolet Brown
FFEBCD 0000FF 8A2BE2 A52A2A
Burlywood Cadetblue Chartreuse Chocolate
DEB887 5F9EA0 7FFF00 D2691E
Coral Cornflowerblue Cornsilk Crimson
FF7F50 6495ED FFF8DC DC143C
Cyan Darkblue Darkcyan Darkgoldenrod
00FFFF 00008B 008B8B B8860B
Darkgray Darkgreen Darkkhaki Darkmagenta
A9A9A9 006400 BDB76B 8B008B
Darkorange Darkorchid Darkred
Darkolivegreen 556B2F
FF8C00 9932CC 8B0000
Darksalmon Darkseagreen Darkslateblue Darkslategray
E9967A 8FBC8F 483D8B 2F4F4F
Darkviolet deeppink Deepskyblue
Darkturquoise 00CED1
9400D3 FF1493 00BFFF
Dimgray Dodgerblue Firebrick Floralwhite
696969 1E90FF B22222 FFFAF0
Forestgreen Fuchsia Gainsboro Ghostwhite
228B22 FF00FF DCDCDC F8F8FF
Gold Goldenrod Gray Green
FFD700 DAA520 808080 008000
Greenyellow Honeydew Hotpink Indianred
ADFF2F F0FFF0 FF69B4 CD5C5C
Indigo Ivory Khaki Lavendar
4B0082 FFFFF0 F0E68C E6E6FA
Lawngreen Lemonchiffon Lightblue
Lavenderblush FFF0F5
7CFC00 FFFACD ADD8E6
Lightcoral Lightcyan Lightgoldenrodyellow Lightgreen
F08080 E0FFFF FAFAD2 90EE90
Lightgrey Lightpink Lightsalmon Lightseagreen
D3D3D3 FFB6C1 FFA07A 20B2AA
Lightskyblue Lightslategray Lightsteelblue Lightyellow
87CEFA 778899 B0C4DE FFFFE0
Lime Limegreen Linen Magenta
00FF00 32CD32 FAF0E6 FF00FF
Maroon Mediumauqamarine Mediumblue Mediumorchid
800000 66CDAA 0000CD BA55D3
Mediumseagreen Mediumslateblue
Mediumpurple 9370D8 Mediumspringgreen 00FA9A
3CB371 7B68EE
Mediumturquoise Mediumvioletred Midnightblue Mintcream
48D1CC C71585 191970 F5FFFA
Mistyrose Moccasin Navajowhite Navy
FFE4E1 FFE4B5 FFDEAD 000080
Oldlace Olive Olivedrab Orange
FDF5E6 808000 688E23 FFA500
Orangered Orchid Palegoldenrod Palegreen
FF4500 DA70D6 EEE8AA 98FB98
Paleturquoise Palevioletred Papayawhip Peachpuff
AFEEEE D87093 FFEFD5 FFDAB9
Peru Pink Plum Powderblue
CD853F FFC0CB DDA0DD B0E0E6
Purple Red Rosybrown Royalblue
800080 FF0000 BC8F8F 4169E1
Saddlebrown Salmon Sandybrown Seagreen
8B4513 FA8072 F4A460 2E8B57
Seashell Sienna Silver Skyblue
FFF5EE A0522D C0C0C0 87CEEB
Slateblue Slategray Snow Springgreen
6A5ACD 708090 FFFAFA 00FF7F
Steelblue Tan Teal Thistle
4682B4 D2B48C 008080 D8BFD8
Tomato Turquoise Violet Wheat
FF6347 40E0D0 EE82EE F5DEB3
White Whitesmoke Yellow YellowGreen
FFFFFF F5F5F5 FFFF00 9ACD32
Cuál es la estructura HTML de una página web
Cuál es la estructura HTML de una página web
El 94 % de las primeras impresiones están relacionadas con el diseño de tu sitio web y el 75 % de su credibilidad proviene precisamente
de este elemento. Por ello es sumamente importante invertir en su optimización para diferenciarte de tus competidores. Una forma
de personalizar tu sitio es a través de la estructura HTML para garantizar que tu contenido se muestre de forma estratégica.
Sin embargo, a pesar de ser un lenguaje de marcado que existe desde la década de 1990, aún quedan muchas dudas sobre su
implementación. Y, seamos sinceros, no es un tema que pueda dominarse de la noche a la mañana. No obstante, si conoces la
estructura HTML básica es posible formar tu sitio de inicio a fin. Y sí, vale totalmente la pena saber cómo hacerlo.
Para qué sirve conocer la estructura HTML
La estructura HTML hace uso de etiquetas y atributos predefinidos para indicarle al navegador cómo mostrar su contenido; es
decir, en qué formato, estilo, tamaño de fuente, imágenes o videos se debe configurar. Básicamente, su función es describir la
estructura general de una página y organizar la forma en que los usuarios podrán visualizarla.
Es importante recalcar que el lenguaje HTML no es un lenguaje de programación, sino de marcado. Esto significa que solo sirve
para crear páginas web estáticas. Sin embargo, sí es posible combinar este lenguaje con otros para desarrollar sitios mucho más
dinámicos y atractivos.
Una vez que conoces las definiciones más relevantes sobre el lenguaje y la estructura HTML, te diremos cómo se integran y te
damos un ejemplo para que comprendas mejor su contenido.
Cuál es la estructura HTML de una página web
El 94 % de las primeras impresiones están relacionadas con el diseño de tu sitio web y el 75 % de su credibilidad proviene precisamente
de este elemento. Por ello es sumamente importante invertir en su optimización para diferenciarte de tus competidores. Una forma
de personalizar tu sitio es a través de la estructura HTML para garantizar que tu contenido se muestre de forma estratégica.
Sin embargo, a pesar de ser un lenguaje de marcado que existe desde la década de 1990, aún quedan muchas dudas sobre su
implementación. Y, seamos sinceros, no es un tema que pueda dominarse de la noche a la mañana. No obstante, si conoces la
estructura HTML básica es posible formar tu sitio de inicio a fin. Y sí, vale totalmente la pena saber cómo hacerlo.
Para qué sirve conocer la estructura HTML
La estructura HTML hace uso de etiquetas y atributos predefinidos para indicarle al navegador cómo mostrar su contenido; es
decir, en qué formato, estilo, tamaño de fuente, imágenes o videos se debe configurar. Básicamente, su función es describir la
estructura general de una página y organizar la forma en que los usuarios podrán visualizarla.
Es importante recalcar que el lenguaje HTML no es un lenguaje de programación, sino de marcado. Esto significa que solo sirve
para crear páginas web estáticas. Sin embargo, sí es posible combinar este lenguaje con otros para desarrollar sitios mucho más
dinámicos y atractivos.
Una vez que conoces las definiciones más relevantes sobre el lenguaje y la estructura HTML, te diremos cómo se integran y te
damos un ejemplo para que comprendas mejor su contenido.
Qué incluye la estructura HTML?
La estructura HTML de una página web se compone de las etiquetas <html>, que indica el comienzo de la página; <head>, que
contiene información más descriptiva sobre el sitio; y <body>, que conforma todos los elementos visibles de la página.
Cuál es la estructura HTML de una página web
El 94 % de las primeras impresiones están relacionadas con el diseño de tu sitio web y el 75 % de su credibilidad proviene precisamente
de este elemento. Por ello es sumamente importante invertir en su optimización para diferenciarte de tus competidores. Una forma
de personalizar tu sitio es a través de la estructura HTML para garantizar que tu contenido se muestre de forma estratégica.
Sin embargo, a pesar de ser un lenguaje de marcado que existe desde la década de 1990, aún quedan muchas dudas sobre su
implementación. Y, seamos sinceros, no es un tema que pueda dominarse de la noche a la mañana. No obstante, si conoces la
estructura HTML básica es posible formar tu sitio de inicio a fin. Y sí, vale totalmente la pena saber cómo hacerlo.
Qué incluye la estructura HTML?
La estructura HTML de una página web se compone de las etiquetas <html>, que indica el comienzo de la página; <head>, que
contiene información más descriptiva sobre el sitio; y <body>, que conforma todos los elementos visibles de la página.
Como puedes notar, todas las etiquetas están constituidas al inicio y al final por los signos < y >, que representan precisamente la
apertura y el cierre de cada elemento para que el lenguaje HTML pueda funcionar. En este sentido, existen dos tipos de etiquetas
HTML:
Etiquetas emparejadas. Vienen en pares y tienen una apertura y cierre. Tal como las que conoces: < >.
Etiquetas vacías. Se refiere a las etiquetas que no requieren cierre.
Cuál es la estructura HTML de una página web
Escrito por María Eugenia Coppola
El 94 % de las primeras impresiones están relacionadas con el diseño de tu sitio web y el 75 % de su credibilidad proviene precisamente
de este elemento. Por ello es sumamente importante invertir en su optimización para diferenciarte de tus competidores. Una forma
de personalizar tu sitio es a través de la estructura HTML para garantizar que tu contenido se muestre de forma estratégica.
Sin embargo, a pesar de ser un lenguaje de marcado que existe desde la década de 1990, aún quedan muchas dudas sobre su
implementación. Y, seamos sinceros, no es un tema que pueda dominarse de la noche a la mañana. No obstante, si conoces la
estructura HTML básica es posible formar tu sitio de inicio a fin. Y sí, vale totalmente la pena saber cómo hacerlo.
Para qué sirve conocer la estructura HTML
La estructura HTML hace uso de etiquetas y atributos predefinidos para indicarle al navegador cómo mostrar su contenido; es
decir, en qué formato, estilo, tamaño de fuente, imágenes o videos se debe configurar. Básicamente, su función es describir la
estructura general de una página y organizar la forma en que los usuarios podrán visualizarla.
Es importante recalcar que el lenguaje HTML no es un lenguaje de programación, sino de marcado. Esto significa que solo sirve
para crear páginas web estáticas. Sin embargo, sí es posible combinar este lenguaje con otros para desarrollar sitios mucho más
dinámicos y atractivos.
Una vez que conoces las definiciones más relevantes sobre el lenguaje y la estructura HTML, te diremos cómo se integran y te
damos un ejemplo para que comprendas mejor su contenido.
Qué incluye la estructura HTML?
La estructura HTML de una página web se compone de las etiquetas <html>, que indica el comienzo de la página; <head>, que
contiene información más descriptiva sobre el sitio; y <body>, que conforma todos los elementos visibles de la página.
Como puedes notar, todas las etiquetas están constituidas al inicio y al final por los signos < y >, que representan precisamente la
apertura y el cierre de cada elemento para que el lenguaje HTML pueda funcionar. En este sentido, existen dos tipos de etiquetas
HTML:
Etiquetas emparejadas. Vienen en pares y tienen una apertura y cierre. Tal como las que conoces: < >.
Etiquetas vacías. Se refiere a las etiquetas que no requieren cierre.
En la siguiente imagen te mostramos un ejemplo de cómo se ve una etiqueta básica de HTML con su apertura y cierre:
Los atributos se refieren a toda la propiedad adicional de las
etiquetas HTML. Esto significa que definen cualquier elemento de
la página web; por ejemplo, ancho, entrada, texto. Estos también
ayudan a almacenar información en metaetiquetas con la
atribución de nombre, contenido y tipo.
Ejemplo de una estructura HTML básica
Ya que conoces qué incluye la estructura HTML básica, te
mostramos de forma más desglosada un ejemplo que te servirá
para visualizar mejor los elementos previamente mencionados.
En la imagen siguiente puedes ver cómo se visualiza la estructura
básica en lenguaje HTML para formar una página web:
Cualquier página web debe contener al menos este código
para desarrollarse correctamente. Te explicamos al detalle el significado y contenido de cada etiqueta a continuación.
<!DOCTYPE html>: se utiliza para indicar la versión HTML 5.0 (la usada actualmente).
<html> </html>: es el elemento raíz y es el más importante dentro de la estructura HTML, pues es el
que contendrá el resto de las etiquetas de atributos de la página web.
<head> </head>: es la etiqueta principal que incluye metadatos; son atributos que no se muestran al
usuario, solo describen referencias de la página, por ejemplo, título o página CSS.
<body> </body>: es la etiqueta para desarrollar todo el cuerpo de la página web y engloba datos
desde textos hasta enlaces.
Dentro de la etiqueta <body> se desglosan más etiquetas y elementos como:
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: que representan las etiquetas de títulos.
<p>: sirve para indicar la apertura y cierre de un párrafo.
<div>: significa «división» y funciona para crear secciones o agrupar contenidos.
<span>: su traducción es «abarcar» y sirve para aplicar estilo al texto o agrupar elementos en línea.
<b>, <i>, <u>: para agregar un texto en negritas, cursiva y subrayado, correspondientemente.
<a>: permite agregar un vínculo o enlace.
<img>, <audio>, <video>, <iframe>: dentro de la estructura HTML estas etiquetas sirven para insertar una imagen, audio, video o
incrustar un documento HTML.
<form>: funciona para insertar un formulario.
<label>: representa la etiqueta para un elemento en una interfaz de usuario.
<input>: crea controles interactivos para formularios, con el fin de recibir datos del usuario.
Cada etiqueta, debe tener una apertura y un cierre; de lo contrario, el código marcará error y los cambios no se visualizarán
correctamente en la página web.
En la siguiente imagen te compartimos un ejemplo más elaborado de cómo se vería la estructura HTML ya conformada con mayor
contenido. Recuerda que esta solo representa elementos muy básicos.
De esta manera puedes estructurar tu página web con
tantos elementos y etiquetas que consideres necesarios.
Si has cometido algún error en la apertura o cierre de
alguna etiqueta podrás darte cuenta al visualizar una
página de error, que el navegador se quede en blanco o
simplemente al no ver configurado ningún cambio.
Para hacer una estructura HTML es necesario crear un
documento HTML con la extensión .html. Hacerlo es más
simple de lo que crees, pues solo debes abrir algún
desarrollador de texto, como lo puede ser el bloc de
notas de tu sistema y comenzar a escribir el texto y las etiquetas necesarias para desarrollar tu página web. También puedes hacer
uso de otras herramientas en línea como Tryit Editor de W3Schools.
La estructura HTML puede ser tan extensa como lo necesites. Sin embargo, con los elementos básicos que te compartimos en
esta publicación puedes comenzar a explorar y crear algunos aspectos de diseño de tu página web. Si bien, el lenguaje HTML
puede ser un poco complejo, con un algo de práctica puedes llegar a dominarlo hasta construir un sitio completo con los atributos y
cualidades que deseas.
Crea tu sitio web con HubSpot
Es muy fácil lograr el diseño de tu página web con el creador gratuito de HubSpot. Simplemente sigue el proceso de
creación: regístrate, elige una plantilla, personaliza tu sitio web, publícalo en línea en tu propio dominio y optimiza su rendimiento.
Por ejemplo, mediante el drag-and-drop, una herramienta intuitiva y fácil de usar que permite a las empresas crear páginas web
personalizadas con solo arrastrar y soltar elementos, puedes crear páginas web estáticas y personalizar tu sitio web.
Con esta herramienta, las empresas pueden incluso crear páginas de
destino para mejorar su experiencia de usuario, insertar un formulario online y
aumentar las conversiones
Estos elementos son fundamentales para las empresas que quieran
mejorar su presencia en línea, pues permiten a los equipos de marketing
crear sitios web y formularios de forma rápida y eficiente sin la necesidad
de conocimientos técnicos avanzados.
Con las plantillas y el creador web de HubSpot podrás diseñar un sitio
web único, profesional y atractivo. Personaliza cualquier plantilla según
tus necesidades y crea páginas web de alta calidad sin necesidad de
código ni programación.