Incluíndo elementos HTML vellos e os novos HTML5
Aínda que o seu desenvolvemento comezara moitos anos antes, HTML5 comezou realmente a ser usado de forma común cos diseñadores / desenvolvedores web en 2010. Xusto fóra da porta, a linguaxe sentiuse familiar para moitos profesionais da web porque en lugar de intentar reinventar todo desde cero, HTML5 construído sobre o que viña antes. Calquera que coñecese o HTML 4.01 rápidamente descubriu que un pouco de esa versión agora podería atoparse en HTML5.
Aínda que HTML5 inclúe moitos elementos que estiveron en HTML por moito tempo, tamén introduciu un puñado de elementos novos para HTML5. Para moitos destes novos elementos, utilizouse un enfoque chamado "pavimentar os cowpaths". Este é un termo que se usa habitualmente nas TIC para esencialmente mirar o que a xente xa está a facer e facelo. No caso dos diseñadores web, isto significaba ver como xa estaban construíndo páxinas e tomar decisións sobre novos elementos sobre esas actividades. Por exemplo, moitos profesionais da web construirían sitios web con divisións que utilizaban atributos de ID ou clase de "header", "nav" e "footer". Como tal, HTML5 introduciu estes como novos elementos, o que permite aos profesionais web engadir máis significado aos seus documentos mediante o uso de elementos de sección dedicados en vez de só divisións. Esta combinación de familiaridade e un enfoque que recoñeceu as prácticas actuais axudaron a que HTML5 adoptase rápidamente a industria de deseño web.
O código HTML5
Primeiro de todo, para usar calquera novo elemento HTML5, o documento debe incluír a doutrina HTML5 que é:
Pode notar que este tipo de letra non menciona específicamente "HTML5", senón simplemente indica a versión como "html". Isto débese a que este tipo de letra é o que se pretende utilizar para avanzar en todas as iteracións da lingua.
En realidade, suponse que HTML5 é a última versión numerada da linguaxe, con novos cambios que se engadirán de forma coherente no futuro. De feito, algúns dos elementos da lista de abaixo engadíronse ao idioma ben despois dese empurrón inicial en 2010.
As etiquetas HTML5
Etiqueta | Explicación |
---|---|
Áncora ou ligazón | |
abbr> | Abreviatura |
| Enderezo ou autores do documento |
<área> | Mapa de imaxes do lado do cliente |
| Artigo |
Contido Tangencial | |
Corriente de audio | |
b> | Negriña |
| Rutas de URI base para elementos no documento |
bdo> | Algoritmo bi-direccional |
blockquote> | Cotización longa |
body> | Corpo da páxina |
| Salto de liña |
| Botón de formulario HTML |
| Lenzo para gráficos dinámicos |
Comentario | |
| Título da táboa |
cite> | Cita |
code> | Referencia de código |
| Columna da táboa |
| Coluna da columna da táboa |
| Comando ou acción na páxina |
Definición do tipo de documento | |
| Cadea de datos |
Opcións predefinidas para outros controis | |
| Descrición da lista de definicións ou intervalo do discurso |
| Texto eliminado |
| Información adicional baixo demanda |
dfn> | Definición |
| Conversa |
div> | División lóxica |
| Lista de descrición |
| Termo da lista de definición ou altofalante de diálogo |
em> | Énfase |
Elemento integrado para complementos | |
Grupo de controis de formularios | |
| O título usado para un elemento |
Imaxe con subtítulo opcional | |
Pés de páxina | |
Formulario | |
h1> | Titular de primeiro nivel |
h2> | Titular de segundo nivel |
h3> | Titular de terceiro nivel |
h4> | Título de cuarto nivel |
h5> | Título en quinto nivel |
h6> | Titular de sexto nivel |
| Xefe do documento |
| Cabeceira dunha páxina |
hgroup> | Grupo de título |
| Regra horizontal |
html> | Elemento raíz dunha páxina web |
i> | Estilo de texto de itálicas |
Marco en liña | |
Imaxe | |
| Elemento de formulario de entrada |
| Elemento de formulario de botón |
| Elemento de formulario da caixa de verificación |
| Entrada en cor |
| Entrada de data |
Entrada global de data e hora | |
Entrada de data e hora local | |
| Entrada de enderezo de correo electrónico |
| Elemento de formulario de carga de ficheiros |
| Elemento de campo de formulario oculto |
| Elemento de formulario de imaxe |
| Entrada de ano e mes |
| Entrada de número |
| Elemento de formulario de contrasinal |
| Elemento de forma de botón de radio |
| Entrada numérica imprecisa |
Botón de restablecer o elemento do formulario | |
| Campo de busca |
| Elemento de formulario de botón Enviar |
| Entrada de número de teléfono |
| Elemento de formulario de campo de texto |
| Entrada de tempo |
| Entrada de URL |
| Entrada de ano e semana |
ins> | Texto inserido |
kbd> | Texto a inserir polo usuario |
| Xera claves seguras para a xestión de certificados |
Etiqueta de formulario | |
Subtítulos dos campos do formulario | |
| Elemento da lista |
Ligazón a documentos relacionados | |
| Área principal de contido nunha páxina |
| Mapa de imaxes do lado do cliente |
| Texto marcado ou resaltado |
Lista de comandos | |
Meta información sobre o documento | |
| Medidor escalar |
Define unha zona con ligazóns de navegación | |
Contido cando os scripts non están dispoñibles | |
Obxecto non estándar | |
| Lista ordenada ou numerada |
Grupo de opcións nunha lista de selección | |
Opción nunha lista de selección | |
| Resultado dun cálculo de formulario |
p> | Párrafo |
Parámetro dun elemento de obxecto | |
pre> | Texto preformado |
| Indicador de progreso |
q> | Cita en liña curta |
Paréntese de Ruby | |
Texto Rubí | |
ruby> | Anotación de Ruby |
| Texto Strikeout |
samp> | Saída de mostra |