Visitor Analytics
Saltar al contenido principal
alt text
  • alt text
  • alt text
  • alt text

Hypertext Markup Language (HTML)

TL;DR

HTML (Hypertext markup Language) es un lenguaje utilizado para crear páginas web. Algunas páginas pueden escribirse directamente en HTML, mientras que otras pueden utilizar creadores de páginas u otras herramientas para crear páginas web que también produzcan resultados HTML, que a su vez pueden ser leídos por los navegadores.

¿Qué significa HTML?

HTML significa Hypertext Markup Language y es el lenguaje utilizado para crear páginas web. Utiliza marcas de revisión para definir y dar estilo a los elementos. Por ejemplo, puede definir fuentes, colores, posición, enlaces, etc. Aunque la mayoría de los creadores de sitios web no escriben directamente en HTML, los resultados finales que son leídos e interpretados por los navegadores web están en formato HTML. Por eso, al hacer clic con el botón derecho en cualquier página web y presionar "ver el origen de la página", la primera línea de texto en la ventana resultante debe ser <!doctype html>.

¿Cuál es la estructura de una página HTML?

Aunque las estructuras pueden variar, algunos de los elementos que debería encontrar en cualquier HTML son los siguientes (con explicaciones en cursiva). Compruebe esto en cualquier página web haciendo clic con el botón derecho del ratón en cualquier parte de la misma y haciendo clic en "ver la fuente de la página":

<DOCTYPE html> - esto muestra al navegador que se trata de un archivo HTML que puede leer

<html lang="en"> - muestra el idioma en el que está escrita la página web

<cabeza> - esto marca el comienzo de la sección de cabecera, donde se colocan los códigos generales.

<title>Title of the page</title> - esta es una metaetiqueta que muestra el título de la página, que se muestra en la pestaña del navegador.

<meta name="description" content="...." /> - esto se usa para describir de qué se trata la página, para los motores de búsqueda

<name="viewport" content="width="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=0" /> - este es un comando que indica cómo se debe mostrar la página web en varios tamaños de pantalla.

<meta name="robots" content="index,follow" /> - esto indica a los robots que rastrean la página que pueden indexarla y añadirla a los resultados de los motores de búsqueda.

<Enlace rel="hoja de estilos" type="text/css" href="/css/style/style.css"> - esto conecta el HTML a un archivo CSS, donde se coloca un estilo más detallado para el texto.

<script src="/js/random.js" type="text/javascript"></script> - esto se conecta a un archivo Javascript, usado para ejecutar una acción en la página web

<link rel="canonical" href="https://yourpage.com"/> - si hay páginas con contenido similar o la página se puede encontrar en más de una URL, esto muestra los crawlers qué URL se debe tener en cuenta a efectos de autoridad.

</head> - esto cierra la sección de la cabeza

<cuerpo> - esto abre la sección del cuerpo, donde se coloca el contenido real de la página.

<class="container"> - esto abre una sección llamada contenedor, que normalmente establece el marco para algunos contenidos

<a href="https://yoursiteshomepage.com"><img class="navbar-brand-logo-normal" src="/images/logo.svg" alt="Visitor Analytics logo" height="52" width="180"></a>> - esta es una forma de colocar una imagen del logotipo que enlaza con su página de inicio.

<class="first-text">Estas son las primeras palabras que realmente se muestran en su sitio web </div> - algún texto que puede ser estilizado en el archivo CSS conectado.

...

</body>

<!DOCTYPE html> - esto muestra al navegador web que este es un archivo HTML que puede leer

<html lang="es"> - esto muestra el lenguaje en el que está escrita la página web

<cabeza> - esto marca el comienzo de la sección de cabeza, donde se colocan los códigos generales

<title>Título de la página</title> - esto es una meta etiqueta que muestra el título de la página, que se muestra en la pestaña del navegador

<meta name="description" content="..." /> - esto se usa para describir de qué trata la página, para los motores de búsqueda

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=0" /> - este es un comando que dice como la página web debe ser mostrada en varios tamaños de pantalla

<meta name="robots" content="index,follow" /> - esto le dice a los robots que rastrean la página que pueden indexarla y agregarla a los resultados de los motores de búsqueda

<link rel="stylesheet" type="text/css" href="/css/style/style.css"> - esto conecta el HTML a un archivo CSS, donde se coloca un estilo más detallado para el texto

<script src="/js/random.js" type="text/javascript"></script> - esto conecta a un archivo Javascript, usado para ejecutar una acción en la página web

<link rel="canonical" href="https://yourpage.com"/> - si hay páginas con contenido similar o la página se puede encontrar en más de un URL, esto muestra a los crawlers qué URL se debe tener en cuenta a efectos de autoridad

</cabeza> - esto cierra la sección de la cabeza

<cuerpo> - esto abre la sección del cuerpo, donde se coloca el contenido real de la página

<div class="container"> - esto abre una sección llamada contenedor, que normalmente establece el marco para algún contenido

<a href="https://yoursiteshomepage.com"><img class="navbar-brand-logo-normal" src="/images/logo.svg" alt="alt text" height="52" width="180"></a> - esta es una forma de colocar una imagen de logo que enlaza con su página web

<div class="first-text">Estas son las primeras palabras que realmente se muestran en su sitio web</div> - algún texto que puede ser estilizado en el archivo CSS conectado

...

</cuerpo>