HTML significa HyperText Markup Language, y es el lenguaje estándar que describe la estructura de una página web. No es programación porque no ejecuta lógica: las etiquetas HTML para páginas web indican qué es cada parte del contenido (títulos, párrafos, enlaces, imágenes, formularios). Así, cuando el navegador lee esas marcas, es capaz de construir el documento que aparece en pantalla. Por eso los códigos HTML son la base sobre la que se apoya toda página web, porque aportan significado y ayudan a los lectores de pantalla y a buscadores.
El Rol de las Etiquetas HTML
Las "tags" HTML, o "etiquetas" HTML, son códigos utilizados para "marcar" el texto de una página web, con el fin de dar instrucciones al navegador sobre cómo mostrarlo. Es decir, las etiquetas HTML son el lenguaje utilizado para estructurar y definir el contenido en un documento HTML. Cada etiqueta contiene instrucciones sencillas que indican al navegador cómo dar formato al texto y a definir los diversos elementos de la página web. Al aplicar estas etiquetas de marcado a los diferentes elementos del texto, se indica al navegador cómo mostrarlos al usuario, lo que permite crear páginas web estructuradas y con un diseño coherente.
Las etiquetas HTML comienzan siempre con el símbolo «<» y finalizan con el símbolo «>». Entre medias de estos dos símbolos irá el nombre de la etiqueta que queremos que el navegador interprete. Una tag HTML contiene tres partes: Una etiqueta de apertura - esta empezará con un símbolo <>. Contenido - unas breves instrucciones sobre cómo mostrar el elemento en la página. Una etiqueta de cierre - cerrará con un símbolo </>. Sin embargo, algunas tags HTML pueden no cerrarse. Esto significa que la etiqueta HTML no necesita cerrarse con un </>. Normalmente, usarás etiquetas no cerradas para metadatos o saltos de línea. Todas las etiquetas HTML están compuestas por una etiqueta de apertura, y una etiqueta de cierre. Aunque hay excepciones, como por ejemplo la etiqueta para cargar una imagen que son llamadas etiquetas huérfanas, ya que solo tienen etiqueta de apertura.
La Declaración ``
La primera línea de código en un documento HTML siempre es la declaración <!DOCTYPE html>. Esta etiqueta es crucial para el navegador.
- <!DOCTYPE html>: Indica que el documento está bajo el estándar de HTML5.
- Se utiliza para especificar la versión de HTML que se está utilizando en la página.
- Informa al navegador que este documento es de tipo HTML y su versión.
HTML existe desde 1991 y actualmente se encuentra en la versión 5, la cual vino llena de características y funcionalidades que traen mejoras al desarrollo web, su principal responsabilidad es delimitar la estructura de una página web. Omitir ‘<!DOCTYPE html>’ o anidar mal etiquetas activa ‘quirks mode’ y provoca comportamientos impredecibles en navegadores.
Lea también: Instrucciones para colocar la etiqueta de envío en devoluciones DHL
Estructura Básica de un Documento HTML
Una vez declarada la versión del documento con <!DOCTYPE html>, el resto de la estructura se construye con otras etiquetas esenciales. Estas etiquetas básicas suelen conformar la estructura básica de una página web y son esenciales para el desarrollo web. La estructura mínima incluye <!DOCTYPE html>, <html>, <head> y <body>, que guían al navegador y los lectores de pantalla.
La Etiqueta ``
<html>: Define el inicio y el final de la página web. Representa la raíz del documento HTML. Contiene los elementos <head> y <body>. Es importante añadir el atributo lang para especificar el idioma del contenido, lo que mejora la accesibilidad y optimiza el SEO. Todos los demás elementos de la estructura HTML deben ser recogidos dentro de estas etiquetas.
La Etiqueta ``
<head>: Define la sección de encabezado de la página, donde se incluyen elementos como el título de la página, metaetiquetas, scripts, entre otros. Contiene metadatos sobre el documento, como enlaces a hojas de estilo, scripts y otras configuraciones que no son visibles para el usuario, pero que son esenciales para el navegador. Representa una colección de metadatos acerca del documento, incluyendo enlaces a, o definiciones de, scripts y hojas de estilo. Es importante explicar que estos metadatos del documento, es información para el navegador y no contenido que será visible en la página web. Dentro de la etiqueta <head>, encontramos elementos fundamentales como <title> y <meta>.
La Etiqueta ``</h4><p><b><title></b>: Define el título de la página web que aparece en la pestaña del navegador. Representa el título del documento. Se muestra en la barra superior del navegador.</p><h4>La Etiqueta `<meta>`</h4><p><b><meta></b>: Define los metadatos del documento, como la codificación de caracteres (<em>charset</em>), la descripción (<em>name="description"</em>) o el autor. Esto influye en la forma en que los motores de búsqueda y navegadores interpretan la página. Esta etiqueta se usa para definir otros metadatos que no se pueden especificar con una etiqueta HTML específica. Por ejemplo, para definir el autor del sitio o la descripción del mismo.</p>
<p><b>Lea también: <a href="https://decap.mx/blog/asos-etiqueta-devolucion/">todo lo que necesitas saber sobre las devoluciones en ASOS</a></b></p>
<h3>La Etiqueta `<body>`</h3><p><b><body></b>: Define la sección del cuerpo de la página web, donde se incluyen todos los elementos que se mostrarán en la página. Contiene todo el contenido visible para el usuario. Solo puede existir un elemento <b><body></b> en el documento. Al contrario que la etiqueta de metadatos <b><head></b>, todo lo que quieras mostrar en la página web debe ir recogido dentro de las etiquetas de apertura y cierre de <b><body></b>. Este contenido será el que se muestre en la web.</p><h2>Semántica y Buenas Prácticas</h2><p>Para garantizar la correcta interpretación y visualización de las páginas web, es fundamental seguir buenas prácticas en HTML. Los servidores leen el código HTML para entender y mostrar el contenido. Leerá el HTML de arriba abajo, de forma muy parecida a como estás leyendo esta guía. Un elemento HTML es un conjunto completo de etiquetas y contenido que define un elemento específico en una página web. Es decir, los elementos HTML son el contenido de la página intercalado entre las etiquetas.</p><p>Las etiquetas semánticas son etiquetas que tienen un significado, que le dan significado a la información del texto para el navegador y los motores de búsqueda, por ejemplo, usar la etiqueta <b><header></b> para encabezados o <b><article></b> para dar significado a un artículo a ese bloque de texto, incluso <b><p></b> para indicar que ese texto es un párrafo, es una buena práctica siempre tratar de usar estas etiquetas semánticas para ayudar en la comprensión del código, además de ayudar mucho en el SEO del sitio (Optimización para motores de búsqueda, es lo que ayuda a que su sitio se clasifique mejor en los motores de búsqueda como Google). Semántica: Elijan etiquetas para código HTML por significado (títulos, listas, navegación), no solo por apariencia, así mejorarán la accesibilidad y el mantenimiento. Saber qué hacen las etiquetas de una página web en HTML les ayudará a corregir detalles, mejorar la accesibilidad y el SEO y a comunicarse mejor con desarrolladores. Validar el documento con el W3C Markup Validator para detectar etiquetas mal cerradas. Un código HTML escrito se lee como un esquema claro y reduce errores. Además, facilita el SEO y la accesibilidad, incluso antes de aplicar CSS o JavaScript.</p>
<p><b>Lea también: <a href="https://decap.mx/blog/como-declarar-la-etiqueta-de-descripcion-en-mi-pagina-web/">aprende a incluir meta descripciones en tu código HTML</a></b></p>
<p><strong>tags:</strong>
#<a href="/blog/tag?tag=que">que</a> #<a href="/blog/tag?tag=etiqueta">etiqueta</a> #<a href="/blog/tag?tag=se">se</a> #<a href="/blog/tag?tag=utiliza">utiliza</a> #<a href="/blog/tag?tag=para">para</a> #<a href="/blog/tag?tag=declarar">declarar</a>
</p>
</div>
<div class="et_post_meta_wrapper"></div>
</article>
</div>
<div id="sidebar">
<div id="recent-posts-2" class="et_pb_widget widget_recent_entries">
<h4 class="widgettitle">Publicaciones recientes</h4>
<ul>
<li><a href="https://decap.mx/blog/naturaleza-de-la-depreciacion-contable/">Naturaleza de la Depreciación</a></li>
<li><a href="https://decap.mx/blog/ex-hacienda-san-francisco-soltepec/">Historia y cultura en la Ex Hacienda Soltepec</a></li>
<li><a href="https://decap.mx/blog/idiomas-carrera-sueldo/">Salarios y perspectivas laborales en el sector de idiomas</a></li>
<li><a href="https://decap.mx/blog/ganancias-retenidas-es-acreedor-o-deudor/">Entiende la naturaleza contable de las ganancias retenidas</a></li>
<li><a href="https://decap.mx/blog/jardin-de-eventos-hacienda-de-cortes/">Eventos Inolvidables en la Hacienda de Cortes</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<span class="et_pb_scroll_top et-pb-icon"></span>
<footer id="main-footer">
<div id="footer-bottom">
<div class="container clearfix">
<ul class="et-social-icons"></ul>
<div id="footer-info">
Aviso de Privacidad
</div>
</div>
</div>
</footer>
</div>
</div>
<script type="text/javascript" src="/Despacho.Contable.Administrativo.y.Fiscal/wp-includes/js/jquery/jquery.min.js" id="jquery-core-js"></script>
<script type="text/javascript" src="/Despacho.Contable.Administrativo.y.Fiscal/wp-includes/js/jquery/jquery-migrate.min.js" id="jquery-migrate-js"></script>
<script type="text/javascript" id="jquery-js-after">
/* <![CDATA[ */
jqueryParams.length&&$.each(jqueryParams,function(e,r){if("function"==typeof r){var n=String(r);n.replace("$","jQuery");var a=new Function("return "+n)();$(document).ready(a)}});
/* ]]> */
</script>
<script type="text/javascript" id="divi-custom-script-js-extra">
/* <![CDATA[ */
var DIVI = {"item_count":"%d Item","items_count":"%d Items"};
var et_builder_utils_params = {"condition":{"diviTheme":true,"extraTheme":false},"scrollLocations":["app","top"],"builderScrollLocations":{"desktop":"app","tablet":"app","phone":"app"},"onloadScrollLocation":"app","builderType":"fe"};
var et_frontend_scripts = {"builderCssContainerPrefix":"#et-boc","builderCssLayoutPrefix":"#et-boc .et-l"};
var et_pb_custom = {"ajaxurl":"https:\/\/decap.mx\/Despacho.Contable.Administrativo.y.Fiscal\/wp-admin\/admin-ajax.php","images_uri":"https:\/\/decap.mx\/Despacho.Contable.Administrativo.y.Fiscal\/wp-content\/themes\/Divi\/images","builder_images_uri":"https:\/\/decap.mx\/Despacho.Contable.Administrativo.y.Fiscal\/wp-content\/themes\/Divi\/includes\/builder\/images","et_frontend_nonce":"83a4685c89","subscription_failed":"Por favor, revise los campos a continuaci\u00f3n para asegurarse de que la informaci\u00f3n introducida es correcta.","et_ab_log_nonce":"ef36ba8622","fill_message":"Por favor, rellene los siguientes campos:","contact_error_message":"Por favor, arregle los siguientes errores:","invalid":"De correo electr\u00f3nico no v\u00e1lida","captcha":"Captcha","prev":"Anterior","previous":"Anterior","next":"Siguiente","wrong_captcha":"Ha introducido un n\u00famero equivocado de captcha.","wrong_checkbox":"Caja","ignore_waypoints":"no","is_divi_theme_used":"1","widget_search_selector":".widget_search","ab_tests":[],"is_ab_testing_active":"","page_id":"46","unique_test_id":"","ab_bounce_rate":"5","is_cache_plugin_active":"no","is_shortcode_tracking":"","tinymce_uri":"https:\/\/decap.mx\/Despacho.Contable.Administrativo.y.Fiscal\/wp-content\/themes\/Divi\/includes\/builder\/frontend-builder\/assets\/vendors","accent_color":"#0c71c3","waypoints_options":[]};
var et_pb_box_shadow_elements = [];
/* ]]> */
</script>
<script type="text/javascript" src="/Despacho.Contable.Administrativo.y.Fiscal/wp-content/themes/Divi/js/scripts.min.js" id="divi-custom-script-js"></script>
<script type="text/javascript" src="/Despacho.Contable.Administrativo.y.Fiscal/wp-content/themes/Divi/includes/builder/feature/dynamic-assets/assets/js/jquery.fitvids.js" id="fitvids-js"></script>
<script type="text/javascript" src="/Despacho.Contable.Administrativo.y.Fiscal/wp-content/themes/Divi/core/admin/js/common.js" id="et-core-common-js"></script>
</body>
</html>
