HTML5 (HyperText Markup Language, versión 5) es la quinta revisión del lenguaje HTML. Esta nueva versión (aún en desarrollo), define los nuevos estándares de desarrollo web, rediseñando el código para resolver problemas y actualizándolo así a nuevas necesidades. No se limita solo a crear nuevas etiquetas o atributos, sino que incorpora muchas características nuevas y proporciona una plataforma de desarrollo de complejas aplicaciones web (mediante los APIs).
HTML5 está destinado a sustituir no sólo HTML 4, sino también XHTML 1 y DOM Nivel 2. Esta versión nos permite una mayor interacción entre nuestras páginas web y el contenido media (video, audio, entre otros) así como una mayor facilidad a la hora de codificar nuestro diseño básico.
Algunas de las nuevas características de HTML5 serían:
- Nuevas etiquetas semánticas para estructurar los documentos HTML, destinadas a remplazar la necesidad de tener una etiqueta <div> que identifique cada bloque de la página.
- Los nuevos elementos multimedia como <audio> y <video>.
- La integración de gráficos vectoriales escalables (SVG) en sustitución de los genéricos <object>, y un nuevo elemento <canvas> que nos permite dibujar en él.
- El cambio, redefinición o estandarización de algunos elementos, como <a>, <cite> o <menu>.
- MathML para fórmulas matemáticas.
- Almacenamiento local en el lado del cliente.
- Y otros muchos nuevos APIs que veremos a lo largo de los siguientes capítulos.
ETIQUETAS BÁSICAS
Este es un ejemplo de código de HTML5 de una página sencilla
- DOCTYPE
La etiqueta doctype declara el tipo de documento, por lo que esta está señalando que este es un documento HTML.
- HTML
Delimita el documento HTML.
- HEAD
El elemento head delimita la cabecera del documento, entre sus etiquetas contiene información como scripts, metadatos, estilos, ubicación de documentos de estilos, título de la página, etc.
- META
Las meta etiquetas se utilizan para identificar propiedades del documento como por ejemplo el autor, el título y la descripción que mostrarán los buscadores, etc.
- META CHARSET
Establece el tipo de codificación del documento.
- META TITLE
Contiene el titulo que se mostrará en los buscadores.
- META DESCRIPTION
Es el texto que se muestra bajo el título en los motores de búsqueda.
- LINK
Esta etiqueta contiene un link a una hoja de estilos externa, la cual se utilizará en este documento.
Atributo a destacar
- HREF
- BODY
La etiqueta body delimita el cuerpo del documento y contiene todo aquello que podremos ver en nuestro navegador. Imágenes, textos, enlaces, video, etc…
- HEADER
El contenido de esta etiqueta debe ser la cabecera de nuestra página donde se suele encontrar el título, el logotipo y poco más.
- NAV
Esta etiqueta sirve para delimitar el menú de la página, donde colocaremos los enlaces internos para movernos entre nuestras diferentes secciones del sitio web.
- A
Representa un enlace o hipervínculo.
- HREF
H1, H2, H3, H4, H5, H6
<h1>Título de la WEB</h1>
<h2>CONTENIDO PRINCIPAL</h2>
<h3>Testimonios</h3>
<h4>Avisos legales</h4>
Estas etiquetas establecen los encabezados. Se organizan por niveles siendo H1 el más importante y H6 el menos importante.
- SECTION
La etiqueta section engloba una sección de texto, imágenes y otros elementos que guardan cierta relación entre ellos. Normalmente siempre le podremos poner un título o encabezado.
- ARTICLE
La etiqueta article se suele encontrar dentro de una etiqueta section y sirve para dividir y ordenar los contenidos en su interior.
- DIV
Otra forma de dividir contenido para posteriormente aplicarle clases y modificar su estilo.
- P
Entre las etiquetas P colocaremos un párrafo de texto.
- IMG
Esta etiqueta coloca una imagen en el documento mediante un enlace.
Posible resultado:
No comments:
Post a Comment