Lenguaje de marcas HTML
01/09/2019
Etiquetas html de contenido y texto
03/09/2019
Tabla de contenidos
2.1. Elementos semánticos HTML5
Una de las principales ventajas de HTML5 es la inclusión de elementos semánticos, o marcados semánticos, que nos ayudan a definir las distintas divisiones de una página web.
En las versiones anteriores a HTML5 se solía utilizar la etiqueta <div> para realizar las divisiones de una página web, pero actualmente es recomendado utilizar los elementos semánticos ya que describen claramente su propósito.
Como se puede observar en el esquema de la figura 2.1, mediante marcadores semánticos se puede diferenciar claramente el contenido que referencia cada etiqueta.
2.2. Estructura básica de un documento HTML5
Teniendo en cuenta el esquema básico mostrado en la figura 2.1, podríamos partir del siguiente código HTML para estudiar su estructura y comenzar con el desarrollo de las prácticas que se presentan en este manual.
- Editor de código fuente recomendado: Visual Studio Code.
- Multiplica tu velocidad en Visual Studio Code utilizando Emmet para dar formato a tus documentos HTML.
- Chuleta Emmet: docs.emmet.io/cheat-sheet/
<!DOCTYPE html>
<html lang="es">
<head>
<title>Título de la WEB</title>
<meta charset="UTF-8">
<meta name="title" content="Título de la WEB">
<meta name="description" content="Descripción de la WEB">
<link href="estilos.css" rel="stylesheet">
</head>
<body>
<header>
<h1>Título de la WEB</h1>
</header>
<nav>
<a href="#">IR SECCIÓN 2</a>
<a href="#">IR SECCIÓN 3</a>
</nav>
<section>
<article>
<h2>CONTENIDO PRINCIPAL</h2>
<p>Este es el contenido principal de mi web.</p>
</article>
</section>
<aside>
<h3>Testimonios</h3>
<p>Me gusta mucho esta página.</p>
</aside>
<footer>
<h4>Redes sociales</h4>
<a href="#">Facebook</a>
<a href="#">Tiwtter</a>
</footer>
</body>
</html>
0
En los siguientes puntos se detalla de forma resumida los elementos que componen la estructura básica que se ha planteado en el punto anterior y otros componentes que puede contener una página web.
2.2.1. Elementos raíz
| Elemento | Descripción |
| <!DOCTYPE html> | Indica que el documento está bajo el estándar de HTML5. |
| <html> | Representa la raíz de un documento HTML. Es una buena práctica indicar el idioma mediante el atributo lang. |
2.2.2. Metadatos
| Elemento | Descripción |
| <head> | En su interior se incluye la colección de metadatos sobre el documento y los enlaces a scripts y hojas de estilo. |
| <title> | Representa el título del documento. Se muestra en la barra superior del navegador o en las pestañas de página. |
| <link> | Utilizada para enlazar documentos externos, por ejemplo CSS. Se debe incluir dentro del <head>. |
| <meta> | Define los metadatos que no pueden ser definidos usando otro elemento HTML. |
| <style> | Usada para escribir CSS interno. |
2.2.3. Scripting
| Elemento | Descripción |
| <script> | Define un script interno o un enlace hacia un script externo de JavaScript. |
| <noscript> | Representa un contenido alternativo a mostrar cuando el navegador no soporta scripting. |
2.2.4. Secciones
| Elemento | Descripción |
| <body> | Representa el contenido principal de un documento HTML. Sólo puede existir un elemento <body> en el documento. |
| <section> | Define secciones de una web. |
| <nav> | Especifica una sección que contiene un menú de navegación. |
| <article> | Determina secciones de contenido. |
| <aside> | Define la barra lateral de una página web. |
| <h1>,<h2>,<h3>,<h4>,<h5>,<h6> | Describe el tema de la sección. Disponemos de seis niveles: de h1 a h6, siendo <h1> la cabecera de mayor importancia. Sólo puede existir una etiqueta <h1> en el documento. |
| <header> | Determina la cabecera de una web o de un elemento. |
| <footer> | Define el pie de página. También se puede utilizar para definir el pie de otros elementos. |
| <address> | Especifica una sección que contiene información de contacto. |
| <main> | Determina el contenido principal del documento. Solo puede existir un elemento <main> en el documento. |
2.2.5. Comentarios
Los comentarios se escriben entre los caracteres que se muestran en el siguiente ejemplo:
<!-- Esto es un comentario dentro de un documento HTML --> <!-- /$$ /$$ /$$$$$$$$ /$$ /$$ /$$ | $$ | $$|__ $$__/| $$$ /$$$| $$ | $$ | $$ | $$ | $$$$ /$$$$| $$ | $$$$$$$$ | $$ | $$ $$/$$ $$| $$ | $$__ $$ | $$ | $$ $$$| $$| $$ | $$ | $$ | $$ | $$\ $ | $$| $$ | $$ | $$ | $$ | $$ \/ | $$| $$$$$$$$ |__/ |__/ |__/ |__/ |__/|________/ --> <!--¿Te están entrando ganas de hacer ASCII Art con tu marca? Puedes hacerlo en: http://patorjk.com/software/taag/#p=display&f=Big%20Money-ne&t=ENIUN -->