×
Si acabas de empezar en HTML, todo ese código en la parte superior de los documentos puede parecer un poco loco, pero en realidad cada línea tiene un propósito específico. En pocas palabras, todo ese material en la parte superior de tu documento HTML5 contiene toda la información que el navegador necesita para saber cómo pensar en el documento HTML. Son lo que siempre se carga y se ejecuta primero por el navegador. Generalmente, la información que se encuentra en la parte superior de un documento HTML, antes del cuerpo, no se muestra en las páginas web. Entonces, ¿cuál es el propósito de todo ese código y por qué lo necesita el navegador? Si usas un editor HTML avanzado como Dreamweaver, esta parte del documento HTML suele insertarse por ti. No es necesario que la añadas de nuevo, pero es útil para entender por qué ese código está ahí. Empecemos con lo que viene antes del elemento principal:
<!DOCTYPE html;
El tag es necesario para HTML5 y siempre debe ser lo primero en tu documento HTML. Esto ayuda al navegador a saber qué versión de HTML estás usando. El navegador seguirá reconociéndolo incluso en minúsculas o en mayúsculas, pero se recomienda que se escriba exactamente como .
<html lang="en"³;
Puede parecer redundante que pongas directamente después, pero esta etiqueta sirve para otro propósito. Puede que hayas notado que no incluye una etiqueta de cierre. Esto se debe a que el navegador no necesita más información que el tipo de documento. Sin embargo, la etiqueta sí incluye una etiqueta de cierre. Colocarás todo el código de la página dentro de este tag para que el navegador sepa dónde comienza y termina tu HTML. El último tag en tu página debería ser .el tag html también puede tener atributos, los cuales le dicen al navegador un poco más de información acerca de tu HTML. El atributo «lang» le dice al navegador en qué idioma se encuentra tu contenido, lo cual también ayuda a los motores de búsqueda a dirigir a los usuarios a las páginas en su idioma. W3Schools tiene una lista completa de códigos de idiomas.
<head;
El encabezado de su documento HTML contiene mucha información no sólo para el navegador, sino también para los motores de búsqueda. Dentro de esta etiqueta encontrarás palabras clave, descripciones, el título y las meta etiquetas. Todo en esta sección, excepto la etiqueta de título, no será visible para el usuario. El elemento de encabezado de una página HTML puede tener líneas y líneas de código. Sólo cubriremos algunos de los más básicos. A medida que tu destreza de codificación se desarrolle, probablemente necesites agregar etiquetas de escritura para JavaScript o jQuery, o etiquetas meta más específicas.
<meta charset ="utf-8"
En HTML5, las meta etiquetas se consideran elementos vacíos, lo que significa que no pueden tener ningún contenido, por lo que no es necesaria una etiqueta de cierre. Las meta etiquetas ayudan a los motores de búsqueda a encontrar su sitio y proporcionar información sobre su página web. Puede añadir su nombre, los programas utilizados para crear la página o descripciones para los motores de búsqueda.la metaetiqueta más importante a incluir es el conjunto de caracteres, y debe ser la primera línea del elemento de cabecera. El atributo es «charset». Casi siempre usarás el atributo «utf-8» que es Unicode, o el «alfabeto universal». Es un conjunto de caracteres que cubre casi todos los sistemas de escritura del mundo. El atributo «utf-8» hará posible que tu personaje especial como acentos, citas o incluso guiones se muestren correctamente en lugar de parecer un galimatías loco. Poner primero esta pequeña línea de código en tu elemento principal puede ayudar a evitar que los hackers alteren tu sitio, ya que es más fácil para ellos manipular los sitios sin una codificación como «utf-8».
<meta name="description" content="Best site ever"
Esto ofrecerá a los motores de búsqueda descripciones de su sitio. Lo que está escrito en la meta descripción se encuentra a menudo en las páginas de resultados de los motores de búsqueda (SERP) para mostrar un fragmento de vista previa de su página. La mejor longitud para los motores de búsqueda es de 155 caracteres. Intente pensar en la mejor manera de transmitir el contenido de su página para que el usuario quiera hacer clic en su sitio primero.
<title Dentro de la etiqueta del título pondrás, lo adivinaste, el título de tu página. Técnicamente, el título es el único elemento necesario para estar en la cabeza. El texto que pones en la etiqueta de título suele aparecer en la barra de título del navegador y sería el nombre por defecto para los marcadores. También es la primera forma en que los motores de búsqueda catalogan los sitios. Una gran práctica a seguir aquí es poner más que algo como "Acerca de" si estás creando la página "Acerca de" para tu sitio. Querrás escribir algo más como: Acerca de | Tutores Digitales para ayudar a dar a los motores de búsqueda algo de contexto.<link type="text/css";También necesitarías enlazar a tu archivo CSS. Es posible que hayas aprendido a estilizar añadiendo estilos directamente en tu documento HTML. Si estás trabajando en un sitio extremadamente pequeño y estático, entonces eso podría estar bien, pero si estás trabajando en un sitio con muchos elementos y páginas, entonces tendrás un archivo o carpeta de CSS al que deberás indicarle a tu archivo HTML que acceda. El elemento de enlace para CSS tiene un montón de atributos diferentes. El atributo "href" le dice al navegador dónde encontrar el archivo. El atributo "type" le dice al navegador cuál es el archivo y el atributo "rel" le dice al navegador cuál es la relación del archivo vinculado con el archivo en el que se encuentra ahora. En HTML5 el atributo "type" ya no es necesario ya que el valor por defecto es "text/css", pero verás que sigue estando incluido en casi todos los elementos del enlace.
<link type="text/css";Al igual que el enlace CSS, es posible que tengas que enlazar con las fuentes que utilizas en tu sitio. Aquí es donde puedes añadir referencias a las fuentes que has usado. Algo como este tipo de enlace incrustará una colección de fuentes de Google Fonts, que es un recurso impresionante. Las fuentes de Google te darán exactamente lo que necesitas para poner en tu documento HTML.
<body;La última etiqueta necesaria para un documento HTML es la etiqueta del cuerpo. Aquí es donde agregarás todo el contenido que el usuario verá, como el encabezado, la navegación y los párrafos. No olvides cerrar siempre la etiqueta de cuerpo antes de cerrar la etiqueta HTML. Ahora que ya estás un poco más familiarizado con las etiquetas HTML que aparecen al principio de tu documento HTML5, quizá quieras consultar nuestro entrenamiento web para ver estas etiquetas en acción. Si quieres aprender más términos sobre el diseño web y su significado, hemos compilado un PDF con los términos más comunes que encontrarás en el mundo del diseño web:
COMPARTIR:
¿Listo para capacitar a todo tu equipo?
10Licencias¿Necesitas más licencias? Contacte con ventas. Continúe con la compraContinúe con la compraCancelar
Con tu plan, puedes:
Con tu piloto de 14 días, puedes:
- Acceder a miles de videos para desarrollar habilidades críticas
- Darle acceso a hasta 10 usuarios a miles de cursos de video
- Practicar y aplicar habilidades con cursos y proyectos interactivos
- Ver datos de habilidades, uso y tendencias de sus equipos
- Prepararse para las certificaciones con los exámenes de prácticas líderes en la industria
- Medir la competencia entre las habilidades y los roles
- Alinear el aprendizaje a sus objetivos con los caminos y canales
╲╱Solutions Skills FlowGift of View PricingContactar Sales╲╱PlatformBrowse libraryRole IQSkill IQIrisAuthorsProfessional ServicesTechnology Index╲╱CompanyAbout usCustomer storiesInvestorsCareersBlogNewsroomResource centerGuides╲╱ResourcesDownload EventsTeachPartnersAffiliate programOne.orgSubscribe╲╱SupportContactHelp centerIP whitelistSitemapCopyright © 2004 - LLC. Todos los derechos reservadosTérminos de usoPolítica de privacidad
Utilizamos cookies para que las interacciones con nuestros sitios web y servicios sean fáciles y significativas. Para obtener más información sobre las cookies que utilizamos o para saber cómo puede desactivarlas, haga clic aquí.
Acepta las cookies y cierra este mensaje Deshabilitar cookies
Ha desactivado las cookies no críticas y está navegando en modo privado. Para tener la mejor experiencia posible en nuestro sitio web, por favor, acepte las cookies. Para obtener más información, lea nuestra política de privacidad.
Acepta las cookies y cierra este mensaje