HTML: todo lo que necesitas saber
En el artículo explicamos qué es HTML, cuáles son sus características y cómo se ve el código en este lenguaje, así como también analizamos por qué HTML no es un lenguaje de programación.
El archivo de texto con la base de la página web se escribe en HTML (HyperText Markup Language), que es un lenguaje de marcado de hipertexto. Vamos a entender qué significa este término en detalle.
El hipertexto es un sistema de texto en el que los desarrolladores escriben elementos del sitio y los vinculan entre sí con enlaces. Gracias al hipertexto, podemos seguir enlaces en un sitio web, abrir videos e imágenes. Y el marcado de hipertexto son las reglas según las cuales los desarrolladores crean el texto de una página web.
El hipertexto es un sistema de texto en el que los desarrolladores escriben elementos del sitio y los vinculan entre sí con enlaces. Gracias al hipertexto, podemos seguir enlaces en un sitio web, abrir videos e imágenes. Y el marcado de hipertexto son las reglas según las cuales los desarrolladores crean el texto de una página web.
Cuando abres cualquier sitio web en Internet, el navegador carga desde el servidor un archivo HTML, que es un archivo de texto con información sobre la estructura del sitio. Gracias a este archivo, el navegador entiende el diseño de la página, el orden en que se muestran los encabezados y el texto, de dónde cargar imágenes, videos y scripts.
¿Para qué sirve HTML?
El objetivo principal de HTML es estructurar y formatear el contenido en un sitio web.
HTML crea una estructura jerárquica en una página web utilizando encabezados, párrafos, listas y tablas. Esta estructura ayuda al usuario a orientarse más fácilmente en el sitio.
Además, HTML muestra texto, imágenes, tablas, videos y audio. Y también, gracias al código HTML, podemos seguir enlaces en Internet de un sitio a otro.
Además, HTML muestra texto, imágenes, tablas, videos y audio. Y también, gracias al código HTML, podemos seguir enlaces en Internet de un sitio a otro.
Posibilidades de HTML
Con HTML puedes:
- Realizar marcado de texto. Formatear texto, resaltar fragmentos, crear listas, agregar notas al pie.
- Insertar medios. HTML permite colocar imágenes, audio, video y mapas en un sitio web.
- Crear enlaces y navegación. Los hipervínculos y las listas de menú ayudan a encontrar información más rápidamente y orientarse en la página.
- Crear tablas. A menudo, es conveniente presentar información en forma de tabla. HTML puede trabajar con tablas.
- Crear formularios. Los formularios son necesarios para registrar visitantes del sitio por teléfono y correo electrónico, procesar pedidos, encuestas y recopilar comentarios, comentarios y sugerencias.
Incluso puedes crear un diseño simple con HTML, por ejemplo, establecer el color del texto. Pero los desarrolladores hacen un diseño de página más complejo con CSS, un lenguaje de estilos creado específicamente para trabajar junto con HTML.
HTML no tiene suficientes capacidades para "dar vida" a los sitios web, hacerlos funcionales e interactivos. Aquí es donde entra en juego el lenguaje de programación JavaScript, que nos permite interactuar con formularios en un sitio web, ver elementos dinámicos y animaciones.
HTML no tiene suficientes capacidades para "dar vida" a los sitios web, hacerlos funcionales e interactivos. Aquí es donde entra en juego el lenguaje de programación JavaScript, que nos permite interactuar con formularios en un sitio web, ver elementos dinámicos y animaciones.
Quizás también te interese:
Cómo se ve el código HTML
Es bastante sencillo echar un vistazo al código HTML. Simplemente presiona la tecla F12 en cualquier página web o haz clic derecho y elige "Ver código fuente" o "Inspeccionar elemento". Los nombres de estos comandos pueden variar según el navegador que utilices.
Así es como se ve el código HTML de este artículo.
El código HTML se escribe y guarda en un documento, que es un archivo de texto con la extensión .html o .htm. Puedes escribir un archivo HTML en cualquier editor de texto, incluso en el Bloc de notas de Windows. No necesitas estar conectado a Internet para ver archivos HTML.
Si creas varios archivos HTML en una carpeta y colocas enlaces hipertexto dentro de ellos, puedes seguir esos enlaces de un documento a otro.
El código HTML se escribe y guarda en un documento, que es un archivo de texto con la extensión .html o .htm. Puedes escribir un archivo HTML en cualquier editor de texto, incluso en el Bloc de notas de Windows. No necesitas estar conectado a Internet para ver archivos HTML.
Si creas varios archivos HTML en una carpeta y colocas enlaces hipertexto dentro de ellos, puedes seguir esos enlaces de un documento a otro.
¿Qué son las etiquetas HTML?
Las etiquetas HTML son comandos que le dicen al navegador qué y en qué orden mostrar en la pantalla. Cada etiqueta tiene un nombre que se encuentra entre corchetes angulares.
La página HTML más simple consta de tres etiquetas: <html>, <head> y <body>.
Las etiquetas <head> y <body> se utilizan solo una vez en la página.
La página HTML más simple consta de tres etiquetas: <html>, <head> y <body>.
Las etiquetas <head> y <body> se utilizan solo una vez en la página.
Un archivo HTML siempre comienza con la etiqueta <!DOCTYPE html>, que le indica al navegador cómo mostrar correctamente la página.
En la etiqueta <head> <head/> se almacena información de servicio, como el título y la codificación de la página.
Dentro de la etiqueta <body> <body/> se coloca el contenido de la página que se muestra en el navegador, como texto, imágenes y videos.
En la etiqueta <title> </title> se encuentra el título de la página web. El navegador lo mostrará como el nombre y lo guardará en la descripción si guardas la página en tus marcadores.
La etiqueta <img> coloca una imagen en el lugar adecuado de la página.
Existen etiquetas emparejadas y no emparejadas, la mayoría son emparejadas. Una etiqueta emparejada consta de una etiqueta de apertura y una etiqueta de cierre. La etiqueta de cierre contiene un elemento adicional /, que se llama "barra diagonal".
Por ejemplo, la etiqueta, que contiene texto, es emparejada:
En la etiqueta <head> <head/> se almacena información de servicio, como el título y la codificación de la página.
Dentro de la etiqueta <body> <body/> se coloca el contenido de la página que se muestra en el navegador, como texto, imágenes y videos.
En la etiqueta <title> </title> se encuentra el título de la página web. El navegador lo mostrará como el nombre y lo guardará en la descripción si guardas la página en tus marcadores.
La etiqueta <img> coloca una imagen en el lugar adecuado de la página.
Existen etiquetas emparejadas y no emparejadas, la mayoría son emparejadas. Una etiqueta emparejada consta de una etiqueta de apertura y una etiqueta de cierre. La etiqueta de cierre contiene un elemento adicional /, que se llama "barra diagonal".
Por ejemplo, la etiqueta, que contiene texto, es emparejada:
<p>¡Gloria a los robots!</p>
La etiqueta <img>, que permite colocar una imagen en un sitio web, no es emparejada:
<img src='robot-bender.jpg' alt='imagen-de-Bender-el-robot'>
Cada etiqueta tiene atributos. Estos amplían las capacidades de las etiquetas: establecen estilos, agregan enlaces, controlan multimedia.
En el ejemplo anterior se muestran dos atributos principales de la etiqueta no emparejada <img>, que son src y alt. El atributo src agrega un enlace al archivo de imagen, el atributo alt es el texto alternativo de la imagen que mostrará el navegador si el archivo de imagen no se carga.
Es importante recordar las etiquetas de cierre. Si una etiqueta no se cierra o se cierra incorrectamente, el diseño de la página puede romperse y el sitio se mostrará incorrectamente.
Para presentar la información de manera lógica y secuencial, se utilizan encabezados, párrafos y listas.
En el ejemplo anterior se muestran dos atributos principales de la etiqueta no emparejada <img>, que son src y alt. El atributo src agrega un enlace al archivo de imagen, el atributo alt es el texto alternativo de la imagen que mostrará el navegador si el archivo de imagen no se carga.
Es importante recordar las etiquetas de cierre. Si una etiqueta no se cierra o se cierra incorrectamente, el diseño de la página puede romperse y el sitio se mostrará incorrectamente.
Para presentar la información de manera lógica y secuencial, se utilizan encabezados, párrafos y listas.
Encabezados
Los encabezados en HTML son elementos que se utilizan para crear encabezados y subencabezados en una página web. Estos definen la importancia y la jerarquía de la información en la página.
En HTML se utilizan seis etiquetas de encabezado: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. La etiqueta <h1> generalmente se utiliza para el encabezado principal de la página, y las etiquetas <h2>-<h6> se utilizan para subencabezados y otros encabezados en la página.
Los encabezados de una página específica ayudan a los motores de búsqueda como Google a determinar su contenido. Para los motores de búsqueda, cada etiqueta de encabezado siguiente es menos importante que la anterior. Es decir, un encabezado <h3> es menos importante que un encabezado <h2>.
Los encabezados en HTML son elementos que se utilizan para crear encabezados y subencabezados en una página web. Estos definen la importancia y la jerarquía de la información en la página.
En HTML se utilizan seis etiquetas de encabezado: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. La etiqueta <h1> generalmente se utiliza para el encabezado principal de la página, y las etiquetas <h2>-<h6> se utilizan para subencabezados y otros encabezados en la página.
Los encabezados de una página específica ayudan a los motores de búsqueda como Google a determinar su contenido. Para los motores de búsqueda, cada etiqueta de encabezado siguiente es menos importante que la anterior. Es decir, un encabezado <h3> es menos importante que un encabezado <h2>.
Párrafo
Un párrafo es un elemento que se utiliza para crear bloques de texto en una página. Cada párrafo de texto se crea con una etiqueta emparejada <p> <p/>.
Es más fácil leer y comprender el texto dividido en párrafos que una "tela" continua. Los párrafos dividen el contenido en bloques lógicamente relacionados.
Un párrafo es un elemento que se utiliza para crear bloques de texto en una página. Cada párrafo de texto se crea con una etiqueta emparejada <p> <p/>.
Es más fácil leer y comprender el texto dividido en párrafos que una "tela" continua. Los párrafos dividen el contenido en bloques lógicamente relacionados.
Listas
Las listas ordenan la información en una página y mejoran su comprensión. Por lo general, se utilizan listas numeradas y listas sin numerar.
Las listas sin numerar o con viñetas se agregan a la página con la etiqueta <ul></ul>. Estas listas se utilizan cuando el orden de los elementos no es importante.
Para crear una lista numerada se utiliza la etiqueta <ol></ol>.
Cada elemento en una lista de cualquier tipo se introduce con la etiqueta <li></li>. Esta etiqueta debe cerrarse después de cada elemento.
Las listas ordenan la información en una página y mejoran su comprensión. Por lo general, se utilizan listas numeradas y listas sin numerar.
Las listas sin numerar o con viñetas se agregan a la página con la etiqueta <ul></ul>. Estas listas se utilizan cuando el orden de los elementos no es importante.
Para crear una lista numerada se utiliza la etiqueta <ol></ol>.
Cada elemento en una lista de cualquier tipo se introduce con la etiqueta <li></li>. Esta etiqueta debe cerrarse después de cada elemento.
Ventajas y desventajas de HTML
Ventajas de HTML
- Simplicidad y accesibilidad. HTML es un lenguaje de marcado simple que es fácil de aprender y usar. Puedes escribir código en él en cualquier editor de texto.
- Diseño adaptable. Las etiquetas en las versiones modernas de HTML permiten crear diferentes versiones de un sitio web para una visualización conveniente en cualquier dispositivo, desde teléfonos inteligentes y tabletas hasta monitores grandes.
- Flexibilidad. Con HTML, puedes crear sitios web simples sin usar elementos interactivos que cambian. Por ejemplo, páginas de destino, sitios web de empresas, portafolios, catálogos, directorios, instrucciones, blogs pequeños.
Desventajas de HTML
- Capacidades limitadas. HTML es un lenguaje de marcado, no un lenguaje de programación. No se puede hacer sitios web modernos solo con HTML. HTML, por ejemplo, no puede crear páginas web dinámicas que cambien en tiempo real sin recargar la página. Para crear algo más complejo, no puedes prescindir de CSS y JavaScript.
- Compatibilidad incompleta de las últimas versiones de HTML y los navegadores. Algunos navegadores no incorporan de inmediato el soporte para nuevas funciones y etiquetas, las versiones antiguas (Internet Explorer 8 y anteriores) pueden interpretar incorrectamente las nuevas etiquetas.
¿Es HTML un lenguaje de programación?
No. Los lenguajes de programación son necesarios para crear sitios web complejos que realicen tareas e interactúen con los usuarios.
Para procesar datos ingresados en formularios, intercambiar esta información con bases de datos almacenadas en servidores, crear animaciones, se utilizan lenguajes de programación como JavaScript, PHP y Python.
HTML no procesa datos, solo los muestra. Y HTML tampoco puede realizar cálculos, por lo que llamarlo un lenguaje de programación sería incorrecto.
Puedes aprender HTML en los cursos de Códica: realiza estos cursos para dar tu primer paso en la carrera de desarrollador front-end.
Para procesar datos ingresados en formularios, intercambiar esta información con bases de datos almacenadas en servidores, crear animaciones, se utilizan lenguajes de programación como JavaScript, PHP y Python.
HTML no procesa datos, solo los muestra. Y HTML tampoco puede realizar cálculos, por lo que llamarlo un lenguaje de programación sería incorrecto.
Puedes aprender HTML en los cursos de Códica: realiza estos cursos para dar tu primer paso en la carrera de desarrollador front-end.
Leer otros artículos de Blog
Lee otros artículos relevantes del mundo de la tecnología y el espíritu empresarial.