Tecnología

Introducción a los lenguajes de marcado

YouTube player

Introducción a los lenguajes de marcado

Un lenguaje de marcado es un sistema de etiquetas que se utilizan para definir la estructura y el formato de un documento. Estas etiquetas‚ también conocidas como “tags” en inglés‚ actúan como marcadores que indican a los navegadores o procesadores de información cómo interpretar y mostrar el contenido. Los lenguajes de marcado se basan en un conjunto de reglas gramaticales que definen la sintaxis y la semántica de las etiquetas.

Estructura básica de un lenguaje de marcado

Este es un párrafo de texto.

Las etiquetas pueden tener atributos que proporcionan información adicional sobre el elemento. Por ejemplo‚ la etiqueta `` se utiliza para insertar imágenes en una página web y tiene un atributo `src` que especifica la URL de la imagen⁚

Descripción de la imagen

Analizando un ejemplo de marcado simple

  • Manzana
  • Plátano
  • Naranja

Análisis del código

  • ``⁚</b> La etiqueta `<title>` define el título de la página web‚ que se muestra en la barra de título del navegador.</li> <li><b>`<h1>`⁚</b> La etiqueta `<h1>` define un encabezado de nivel 1‚ que representa el título principal de la página.</li> <li><b>`<ul>`⁚</b> La etiqueta `<ul>` define una lista desordenada.</li> <li><b>`<li>`⁚</b> La etiqueta `<li>` define un elemento de la lista.</li> </ul> <h2>Beneficios del marcado</h2> <p>Los lenguajes de marcado ofrecen numerosos beneficios en el desarrollo web y la gestión de información‚ entre ellos⁚</p> <ul> <li><b>Estructura y organización⁚</b> El marcado proporciona una estructura lógica para el contenido‚ lo que facilita la organización‚ la navegación y la comprensión de la información.</li> <li><b>Formato y presentación⁚</b> Las etiquetas de marcado permiten definir el formato y la presentación del contenido‚ como el tamaño de fuente‚ el color‚ la alineación y el estilo.</li> <li><b>Interoperabilidad⁚</b> El marcado permite que los documentos se puedan visualizar correctamente en diferentes navegadores y dispositivos.</li> <li><b>Accesibilidad⁚</b> El marcado facilita la accesibilidad para personas con discapacidades‚ ya que permite a los lectores de pantalla interpretar y leer el contenido de manera eficiente.</li> <li><b>SEO y SEM⁚</b> El marcado juega un papel importante en el SEO (Search Engine Optimization) y el SEM (Search Engine Marketing)‚ ya que ayuda a los motores de búsqueda a indexar y clasificar el contenido de manera efectiva.</li> </ul> <h2>Conclusión</h2> </div> <footer class="post-footer"> <a href="https://servicetec.es/introduccion-a-los-lenguajes-de-marcado/#comments" class="post-comments" >7 Comentarios</a> </footer> </article> <!-- Previous --> <div class="post-navigation-wrap"> <a href="https://servicetec.es/las-entrevistas-de-trabajo-por-video-ventajas-y-desventajas/" title="Las Entrevistas de Trabajo por Vídeo: Ventajas y Desventajas" class="post-navigation previous-post"> <i class="fa fa-angle-left"></i> <img width="75" height="29" src="https://servicetec.es/wp-content/uploads/2024/10/1660-8.webp" class="attachment-graceful-small-thumbnail size-graceful-small-thumbnail wp-post-image" alt="" loading="lazy" /></a> <!-- Next --> <a href="https://servicetec.es/el-poder-de-los-objetivos-en-las-evaluaciones-de-desempeno/" title="El poder de los objetivos en las evaluaciones de desempeño" class="post-navigation next-post"> <img width="75" height="50" src="https://servicetec.es/wp-content/uploads/2024/10/1799.webp" class="attachment-graceful-small-thumbnail size-graceful-small-thumbnail wp-post-image" alt="" loading="lazy" /> <i class="fa fa-angle-right"></i> </a> </div><!-- Post Navigation Wrap --> <div class="related-posts"> <!-- <h3>Related Posts</h3> --> <h3>Entradas relacionadas</h3> <section> <a href="https://servicetec.es/realidad-virtual-rv-y-realidad-aumentada-ra-tecnologias-inmersivas-que-transforman-el-mundo/"><img width="495" height="330" src="https://servicetec.es/wp-content/uploads/2024/10/1655-8.webp" class="attachment-graceful-column-thumbnail size-graceful-column-thumbnail wp-post-image" alt="" decoding="async" loading="lazy" /></a> <h4><a href="https://servicetec.es/realidad-virtual-rv-y-realidad-aumentada-ra-tecnologias-inmersivas-que-transforman-el-mundo/">Realidad virtual (RV) y realidad aumentada (RA): tecnologías inmersivas que transforman el mundo</a></h4> <span class="related-post-date">octubre 19, 2024</span> </section> <section> <a href="https://servicetec.es/crear-una-cuenta-de-tinkercad-una-guia-paso-a-paso/"><img width="494" height="330" src="https://servicetec.es/wp-content/uploads/2024/10/1844-6.webp" class="attachment-graceful-column-thumbnail size-graceful-column-thumbnail wp-post-image" alt="" decoding="async" loading="lazy" /></a> <h4><a href="https://servicetec.es/crear-una-cuenta-de-tinkercad-una-guia-paso-a-paso/">Crear una cuenta de Tinkercad: Una guía paso a paso</a></h4> <span class="related-post-date">octubre 19, 2024</span> </section> <section> <a href="https://servicetec.es/principios-fundamentales-del-diseno-de-rv/"><img width="220" height="330" src="https://servicetec.es/wp-content/uploads/2024/10/178-4.webp" class="attachment-graceful-column-thumbnail size-graceful-column-thumbnail wp-post-image" alt="" decoding="async" loading="lazy" /></a> <h4><a href="https://servicetec.es/principios-fundamentales-del-diseno-de-rv/">Principios Fundamentales del Diseño de RV</a></h4> <span class="related-post-date">octubre 19, 2024</span> </section> <div class="clear-fix"></div> </div> <div class="comments-area" id="comments"> <div id="comments" class="comments-area"> <h2 class="comments-title"> 7 Comentarios “<span>Introducción a los lenguajes de marcado</span>” </h2><!-- .comments-title --> <ol class="comment-list"> <li id="comment-83542" class="comment even thread-even depth-1"> <article id="div-comment-83542" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <b class="fn">Pablo</b> <span class="says">dice:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://servicetec.es/introduccion-a-los-lenguajes-de-marcado/#comment-83542"><time datetime="2024-10-09T15:48:11+00:00">octubre 9, 2024 a las 3:48 pm</time></a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>El artículo proporciona una visión general completa de los lenguajes de marcado. La explicación de los conceptos es precisa y concisa. Se podría considerar la inclusión de una sección sobre las últimas tendencias en el desarrollo de lenguajes de marcado, como los lenguajes de marcado basados en la web semántica.</p> </div><!-- .comment-content --> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-83542' data-commentid="83542" data-postid="20362" data-belowelement="div-comment-83542" data-respondelement="respond" data-replyto="Responder a Pablo" aria-label='Responder a Pablo'>Responder</a></div> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-83537" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-83537" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <b class="fn">Miguel</b> <span class="says">dice:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://servicetec.es/introduccion-a-los-lenguajes-de-marcado/#comment-83537"><time datetime="2024-10-13T17:29:04+00:00">octubre 13, 2024 a las 5:29 pm</time></a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>El artículo es un buen punto de partida para comprender los lenguajes de marcado. La descripción de las etiquetas y sus atributos es precisa y útil. Se sugiere incluir una sección adicional que explique la diferencia entre los lenguajes de marcado de presentación y los lenguajes de marcado semántico.</p> </div><!-- .comment-content --> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-83537' data-commentid="83537" data-postid="20362" data-belowelement="div-comment-83537" data-respondelement="respond" data-replyto="Responder a Miguel" aria-label='Responder a Miguel'>Responder</a></div> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-83539" class="comment even thread-even depth-1"> <article id="div-comment-83539" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <b class="fn">Javier</b> <span class="says">dice:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://servicetec.es/introduccion-a-los-lenguajes-de-marcado/#comment-83539"><time datetime="2024-10-15T09:52:28+00:00">octubre 15, 2024 a las 9:52 am</time></a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>El artículo ofrece una introducción completa a los lenguajes de marcado. La explicación de los beneficios es convincente y se apoya en argumentos sólidos. Se podría considerar la inclusión de una sección sobre las herramientas y tecnologías más comunes utilizadas para el desarrollo de lenguajes de marcado.</p> </div><!-- .comment-content --> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-83539' data-commentid="83539" data-postid="20362" data-belowelement="div-comment-83539" data-respondelement="respond" data-replyto="Responder a Javier" aria-label='Responder a Javier'>Responder</a></div> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-83540" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-83540" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <b class="fn">Ana</b> <span class="says">dice:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://servicetec.es/introduccion-a-los-lenguajes-de-marcado/#comment-83540"><time datetime="2024-10-19T21:12:06+00:00">octubre 19, 2024 a las 9:12 pm</time></a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>El artículo es una buena introducción a los lenguajes de marcado. La estructura y la organización del contenido son claras y fáciles de seguir. Se sugiere incluir una sección sobre las diferentes tipos de lenguajes de marcado, como HTML, XML y Markdown.</p> </div><!-- .comment-content --> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-83540' data-commentid="83540" data-postid="20362" data-belowelement="div-comment-83540" data-respondelement="respond" data-replyto="Responder a Ana" aria-label='Responder a Ana'>Responder</a></div> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-83545" class="comment even thread-even depth-1"> <article id="div-comment-83545" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <b class="fn">María</b> <span class="says">dice:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://servicetec.es/introduccion-a-los-lenguajes-de-marcado/#comment-83545"><time datetime="2024-10-20T16:49:53+00:00">octubre 20, 2024 a las 4:49 pm</time></a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>El artículo ofrece una introducción clara y concisa a los lenguajes de marcado. La explicación de la estructura básica y los ejemplos utilizados son fáciles de entender. Se podría ampliar la sección sobre los beneficios del marcado, incluyendo ejemplos concretos de cómo la estructura y la interoperabilidad mejoran la experiencia del usuario.</p> </div><!-- .comment-content --> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-83545' data-commentid="83545" data-postid="20362" data-belowelement="div-comment-83545" data-respondelement="respond" data-replyto="Responder a María" aria-label='Responder a María'>Responder</a></div> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-83535" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-83535" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <b class="fn">Sofia</b> <span class="says">dice:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://servicetec.es/introduccion-a-los-lenguajes-de-marcado/#comment-83535"><time datetime="2024-10-21T13:34:35+00:00">octubre 21, 2024 a las 1:34 pm</time></a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>El artículo ofrece una introducción clara y concisa a los lenguajes de marcado. La explicación de la estructura básica y los ejemplos utilizados son fáciles de entender. Sin embargo, se podría ampliar la sección sobre los beneficios del marcado, incluyendo ejemplos concretos de cómo la estructura y la interoperabilidad mejoran la experiencia del usuario.</p> </div><!-- .comment-content --> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-83535' data-commentid="83535" data-postid="20362" data-belowelement="div-comment-83535" data-respondelement="respond" data-replyto="Responder a Sofia" aria-label='Responder a Sofia'>Responder</a></div> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-83538" class="comment even thread-even depth-1"> <article id="div-comment-83538" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <b class="fn">Laura</b> <span class="says">dice:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://servicetec.es/introduccion-a-los-lenguajes-de-marcado/#comment-83538"><time datetime="2024-10-21T19:51:22+00:00">octubre 21, 2024 a las 7:51 pm</time></a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>El artículo presenta una visión general de los lenguajes de marcado de forma clara y accesible. La inclusión de ejemplos de código facilita la comprensión de los conceptos. Se podría mejorar la sección sobre la accesibilidad, incluyendo ejemplos de cómo el marcado puede facilitar la navegación para usuarios con discapacidades.</p> </div><!-- .comment-content --> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-83538' data-commentid="83538" data-postid="20362" data-belowelement="div-comment-83538" data-respondelement="respond" data-replyto="Responder a Laura" aria-label='Responder a Laura'>Responder</a></div> </article><!-- .comment-body --> </li><!-- #comment-## --> </ol><!-- .comment-list --> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Deja una respuesta <small><a rel="nofollow" id="cancel-comment-reply-link" href="/introduccion-a-los-lenguajes-de-marcado/#respond" style="display:none;">Cancelar la respuesta</a></small></h3><form action="https://servicetec.es/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Tu dirección de correo electrónico no será publicada.</span> <span class="required-field-message">Los campos obligatorios están marcados con <span class="required">*</span></span></p><p class="comment-form-author"><label for="author">Nombre</label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" /></p> <p class="comment-form-email"><label for="email">Correo electrónico</label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" /></p> <p class="comment-form-url"><label for="url">Web</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Guarda mi nombre, correo electrónico y web en este navegador para la próxima vez que comente.</label></p> <p class="comment-form-comment"><label for="comment">Comentario <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Publicar el comentario" /> <input type='hidden' name='comment_post_ID' value='20362' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div><!-- #comments --> </div> </div><!-- .content-wrap --> <div class="sidebar-right-wrap"> <aside class="sidebar-right"> <section id="block-3" class="graceful-widget widget_block"> <div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"> <div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained"> <h2 class="wp-block-heading">Entradas recientes</h2> </div></div> <div class="widget arpw-widget-random"><div class="arpw-random-post "><ul class="arpw-ul"><li class="arpw-li arpw-clearfix"><a class="arpw-title" href="https://servicetec.es/reemplazar-un-panel-de-vidrio-roto-en-una-ventana-contra-tormentas-de-metal/" rel="bookmark">Reemplazar un panel de vidrio roto en una ventana contra tormentas de metal</a></li><li class="arpw-li arpw-clearfix"><a class="arpw-title" href="https://servicetec.es/titulo-estrategias-de-estudio-para-el-exito-academico-en-la-universidad/" rel="bookmark">Título: Estrategias de Estudio para el Éxito Académico en la Universidad</a></li><li class="arpw-li arpw-clearfix"><a class="arpw-title" href="https://servicetec.es/mas-que-solo-los-gigantes%e2%81%9a-explorando-la-diversidad-de-los-indices/" rel="bookmark">Más que solo los Gigantes⁚ Explorando la Diversidad de los Índices</a></li><li class="arpw-li arpw-clearfix"><a class="arpw-title" href="https://servicetec.es/formato-de-imagen-adecuado-para-el-diseno-web/" rel="bookmark">Formato de imagen adecuado para el diseño web</a></li><li class="arpw-li arpw-clearfix"><a class="arpw-title" href="https://servicetec.es/principios-fundamentales-de-la-microeconomia-para-la-optimizacion-de-costos/" rel="bookmark">Principios Fundamentales de la Microeconomía para la Optimización de Costos</a></li></ul></div><!-- Generated by https://wordpress.org/plugins/advanced-random-posts-widget/ --></div></div></div> </section><section id="block-4" class="graceful-widget widget_block"><h2>Comentarios recientes</h2> <ul><li><a href="https://servicetec.es/el-finder-una-guia-completa-para-principiantes/#comment-97519">El artículo ofrece una introducción...</a> - <strong>Laura</strong></li><li><a href="https://servicetec.es/guia-completa-de-correas-para-perros-tipos-ventajas-y-como-elegir-la-mejor/#comment-99069">El artículo ofrece una descripción...</a> - <strong>Sofia</strong></li><li><a href="https://servicetec.es/analisis-de-variaciones-en-la-contabilidad-de-costos/#comment-75100">El artículo proporciona una visión...</a> - <strong>David</strong></li><li><a href="https://servicetec.es/la-desintegracion-de-protones-y-la-teoria-de-cuerdas/#comment-37520">El artículo ofrece una excelente...</a> - <strong>Javier López</strong></li><li><a href="https://servicetec.es/la-tecla-boss-en-windows-7-guia-para-mejorar-la-productividad-y-la-seguridad/#comment-8218">El artículo ofrece una descripción...</a> - <strong>Pedro</strong></li></ul></section><section id="block-5" class="graceful-widget widget_block"><div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"><h2 class="wp-block-heading">Archivos</h2><ul class="wp-block-archives-list wp-block-archives"> <li><a href='https://servicetec.es/2024/10/'>octubre 2024</a></li> <li><a href='https://servicetec.es/2024/09/'>septiembre 2024</a></li> <li><a href='https://servicetec.es/2024/08/'>agosto 2024</a></li> <li><a href='https://servicetec.es/2024/07/'>julio 2024</a></li> <li><a href='https://servicetec.es/2024/06/'>junio 2024</a></li> <li><a href='https://servicetec.es/2024/05/'>mayo 2024</a></li> <li><a href='https://servicetec.es/2024/04/'>abril 2024</a></li> <li><a href='https://servicetec.es/2024/03/'>marzo 2024</a></li> <li><a href='https://servicetec.es/2024/02/'>febrero 2024</a></li> <li><a href='https://servicetec.es/2024/01/'>enero 2024</a></li> </ul></div></div></section><section id="block-6" class="graceful-widget widget_block"><div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"><h2 class="wp-block-heading">Categorías</h2><ul class="wp-block-categories-list wp-block-categories"> <li class="cat-item cat-item-16"><a href="https://servicetec.es/category/society/collections/">Colecciones</a> </li> <li class="cat-item cat-item-14"><a href="https://servicetec.es/category/business/">Empresas</a> </li> <li class="cat-item cat-item-13"><a href="https://servicetec.es/category/study/">Estudiar</a> </li> <li class="cat-item cat-item-12"><a href="https://servicetec.es/category/home/">Inicio</a> </li> <li class="cat-item cat-item-15"><a href="https://servicetec.es/category/books/">Libros</a> </li> <li class="cat-item cat-item-3"><a href="https://servicetec.es/category/other/">Otros</a> </li> <li class="cat-item cat-item-9"><a href="https://servicetec.es/category/science/technology/">Tecnología</a> </li> </ul></div></div></section> </aside> </div> </div><!-- .main-content End --> </main><!-- #primary End --> <!-- Site Footer --> <footer id="site-footer" class=" clear-fix"> <div class="site-footer-wrap wrapped-content"> <div class="footer-bottom-wrap"> <!-- Scroll To Top --> <span class="scrolltop"> <i class="fa fa fa-angle-up"></i> </span> <div class="footer-copyright"> </div> <div class="footer-credits"> Graceful Theme by <a href="http://optimathemes.com/"> Optima Themes </a> </div> </div> </div><!-- .wrapped-content --> </footer><!-- #site-footer --> </div><!-- #site-container --> <noscript> <div> <img src="https://mc.yandex.ru/watch/98545840" style="position:absolute; left:-9999px;" alt=""/> </div> </noscript> <script type="text/javascript" src="https://servicetec.es/wp-content/themes/graceful/assets/js/main.js?ver=1.0.4" id="graceful-main-js"></script> <script type="text/javascript" src="https://servicetec.es/wp-content/plugins/youtube-embed-plus/scripts/fitvids.min.js?ver=14.2.1.2" id="__ytprefsfitvids__-js"></script> <script type="text/javascript" src="https://servicetec.es/wp-includes/js/comment-reply.min.js?ver=6.6.2" id="comment-reply-js" async="async" data-wp-strategy="async"></script> </body> </html><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="712404d1e029baa43fce14bd-|49" defer></script>