HTML5 – Creación de Documentos y Atributos
Esta es la parte menos interesante pero sin duda alguna es una de las más críticas. Cada documento HTML usa al menos una parte de estos elementos y en algunas ocasiones todos ellos, así que no está de más que sepamos usarlos de manera apropiada para la creación de documentos HTML5 correctos y generales.
Elementos de tipo document
Empecemos con los elementos de tipo document. Estos son los bloques que le dan forma a nuestro documento HTML y fija un contexto inicial para el navegador.
El elemento doctype
El elemento doctype es único en su categoría. Es una buena práctica comenzar cada documento HTML que creemos con un elemento de tipo doctype. Este es el elemento que le dice al navegador que estará tratando con HTML.
La mayoría de los navegadores de igual manera desplegará nuestro contenido de manera correcta si omitimos el doctype, pero es una mala práctica en confiar en que el navegador se comporte de esta manera.
La sintaxis correcta para aplicar un elemento de tipo doctype es la siguiente:
<!DOCTYPE HTML>
El elemento html
Este elemento es mayormente llamado el elemento raíz y el mismo indica el comienzo del HTML dentro de nuestro documento
La sintaxis es la siguiente:
<!DOCTYPE HTML>
<html>
Contenidos y elementos aqui
</html>
El elemento head
El elemento head contiene todos la metadatos del documento. En HTML, los metadatos le proporcionan al navegador la información acerca del contenido y el marcado en el documento, pero adicionalmente podemos incluir scripts y referencias a recursos externos tales como hojas de estilo CSS.
La sintaxis es la siguiente dentro del documento:
<!DOCTYPE HTML>
<html>
<head>
<title>Hello</title>
</head>
</html>
El elemento body
Este elemento encapsula el contenido de un documento HTML, es el opuesto del elemento head el cual encapsula los metadatos e información del documento. El elemento body siempre sigue luego del elemento head, lo que significa que es el segundo hijo en la estructura del elemento raíz html.
Veamos su sintaxis:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<p>
I like <code id="applecode">apples</code> and oranges.
</p>
</body>
</html>
Elementos de tipo metadata
Los elementos de tipo metadata nos permiten proveer información acerca del documento HTML. Ellos no son contenido por si mismos pero si proveen información del contenido que les seguirá. Los elementos de tipo metadata son agregados al elemento head.
Fijando un título a nuestro documento
El elemento title fija un título o nombre a nuestro documento. Los navegadores usualmente despliegan el contenido de este elemento en la parte superior de la ventana o pestaña.
Veamos como lo agregamos a nuestra estructura:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<p>
I like <code id="applecode">apples</code> and oranges.
</p>
</body>
</html>
Fijando la base para URL relativas
El elemento base fija una URL base, en la cual que links relativos, contenidos en el documento HTML serán resueltas. Un link relativo es uno que omite el protocolo, host y puerto de la URL y es evaluado contra otra URL. El elemento base también específica como los links son abiertos cuando un usuario hace click sobre ellos y como el navegador actúa luego de que un formulario ha sido ingresado.
Ya visto los elementos esenciales para el documento solo nos queda completar con el resto de los elementos que funcionan para los metadatos y de esa forma construir un documento HTML correcto y que pueda ser interpretado por cualquier navegador de la mejor manera.
Atributos
- dir
- ltr (texto de izquierda a derecha)
- rtl (texto de derecha a izquierda)
Veamos un ejemplo sencillo de la aplicación del mismo:
<!DOCTYPE HTML><html>
<head>
<title>Example</title>
</head>
<body>
<p dir="rtl">This is right-to-left</p>
<p dir="ltr">This is left-to-right</p>
</body>
</html>
- contextmenu
- draggable
- dropzone
- hidden
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<script>
var toggleHidden = function() {
var elem = document.getElementById("toggle");
if (elem.hasAttribute("hidden")) {
elem.removeAttribute("hidden");
} else {
elem.setAttribute("hidden", "hidden");
}
}
</script>
</head>
<body>
<button onclick="toggleHidden()">Toggle</button>
<table>
<tr><th>Name</th><th>City</th></tr>
<tr><td>Adam Freeman</td><td>London</td></tr>
<tr id="toggle" hidden><td>Joe Smith</td><td>New York</td></tr>
<tr><td>Anne Jones</td><td>Paris</td></tr>
</table>
</body>
</html>
En este ejemplo definimos una tabla que contiene un elemento tr el cual representa una fila en la cual el atributo hidden está presente. Adicionalmente definimos un botón que al momento de ser presionado invoca el la función de Javascript toggleHidden que retira el atributo hidden.
- id
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<style>
#w3clink {
background:grey;
color:white;
padding:5px;
border: thin solid black;
}
</style>
<body>
<p/>
<a id="w3clink" href="http://w3c.org">W3C web site</a>
</body>
</html>
- spellcheck
Veamos un ejemplo:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<textarea spellcheck="true">This is some mispelled text</textarea>
</body>
</html>
- style
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<a href="http://apress.com" style="background: grey; color:white; padding:10px">
Visit the Apress site
</a>
</body>
</html>
- tabindex
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<form>
<label>Name: <input type="text" name="name" tabindex="1"/></label>
<p/>
<label>City: <input type="text" name="city" tabindex="-1"/></label>
</p>
<label>Country: <input type="text" name="country" tabindex="2"/></label>
</p>
<input type="submit" tabindex="3"/>
</form>
</body>
</html>
Hemos podido aprender todo lo referente a los atributos y de qué manera pueden ser aplicados a los elementos en nuestro documento HTML. Esto con la finalidad de extender su funcionalidad de manera que se adapten a las necesidades de nuestro sitio web
