Plantilla HTML5 básica para cualquier proyecto

A medida que aprenda HTML5 y agregue nuevas tecnologías a su caja de herramientas, es posible que desee crear una plantilla para usted mismo para comenzar todos los proyectos basados ​​en HTML5. Recomendamos esto, y también puede considerar el uso de uno de los recursos en línea, que le brinda un punto de partida básico para HTML5.

En este artículo, veremos cómo empezar. Comencemos con una página HTML5 simple y básica:

proyectos de cuadros para practicar

Con la plantilla básica en su lugar, examinemos algunas de las partes importantes del marcado y en qué se diferencian de la forma en que se escribió HTML antes de HTML5.

Doctype

Primero, tenemos una declaración de tipo de documento o tipo de documento. Esta es solo una forma de decirle al navegador (o cualquier otro analizador) qué tipo de documento se está viendo. Para los archivos HTML, representa una versión y un estilo específicos de HTML.

El tipo de documento siempre debe ser el primer elemento en la parte superior de cualquier archivo HTML. Hace muchos años, la declaración del tipo de documento era un desastre feo y difícil de recordar. Para XHTML 1.0 Strict:

Conversión HTML4:

Aunque la larga cadena de texto en la parte superior del documento no nos hizo daño (además de obligar a los visitantes de nuestro sitio web a descargar algunos bytes adicionales), HTML5 ha eliminado las cosas oscuras y oscuras. Lo que necesitas ahora es:

Sencillo y justo. doctype se puede escribir en mayúsculas, minúsculas o en mayúsculas y minúsculas. Notarás que el 5 obviamente falta en la declaración. Aunque la iteración actual del marcado web se llama HTML5, en realidad es solo una evolución del estándar HTML anterior; las especificaciones futuras solo serán una evolución de lo que tenemos hoy.

Dado que a menudo se requiere que los navegadores admitan todo el contenido existente en la web, no es necesario depender de los tipos de documentos para decirles qué funciones debe admitir un documento determinado. En otras palabras, el tipo de documento por sí solo no hará que su página sea compatible con HTML5. Todo depende del navegador.

De hecho, puede usar uno de estos dos tipos de documentos antiguos con nuevos elementos HTML5 en la página, y la página tendrá el mismo aspecto que cuando usa el nuevo tipo de documento.

Elemento HTML

El siguiente documento HTML es un elemento HTML, que no ha cambiado significativamente en HTML5. En nuestro ejemplo, establecemos The HTML5 Herald el valor del atributo a , que especifica que el documento está en inglés. En la sintaxis basada en , los atributos deben incluirse. En HTML5, esto ya no es necesario, e incluso lang Los atributos no son necesarios para la validación o el correcto funcionamiento del documento.

Esto es lo que tenemos hasta ahora, incluido el cerrado en etiquetas:

elemento principal

La siguiente parte de la página es la sección xhtml. xmlns La primera línea define la codificación de caracteres del documento. Este es otro elemento que se ha simplificado desde XHTML y HTML4 y es una característica opcional, pero recomendada. En el pasado, podías escribir:

HTML5 mejora esto minimizando la codificación de caracteres lang etiquetas:

En casi todos los casos, UTF-8 es el valor que utilizará en el documento. Una explicación completa de la codificación de caracteres está más allá del alcance de este artículo y es posible que no le interese. No obstante, si desea profundizar, puede leer temas sobre W3C o WHATWG .

Nota: Para asegurarse de que todos los navegadores puedan leer la codificación de caracteres correctamente, la declaración de codificación de caracteres completa debe incluirse en los primeros 512 caracteres del documento. También debería aparecer antes de cualquier elemento basado en contenido (como el elemento que lo sigue en nuestro sitio de muestra).

Todavía tenemos mucho que escribir sobre este tema, pero queremos mantenerlo despierto, ¡así que no le contaremos esos detalles! Ahora, estamos contentos de aceptar esta declaración simplificada y luego pasar a la siguiente parte del documento:

En estas líneas, HTML5 es casi indistinguible de la sintaxis anterior. La declaración del título de la página (el único elemento obligatorio en el encabezado) es la misma que antes, y las metaetiquetas que incluimos son solo algunos ejemplos opcionales para indicar la posición de estas etiquetas; puede poner tantos metaelementos válidos aquí.

La parte clave de este bloque de marcado es la hoja de estilo, que se incluye mediante el elemento de enlace idiomático. Excepto href y rel, el enlace no requiere otros atributos. El atributo de tipo (común en versiones anteriores de HTML) no es obligatorio y no es necesario para indicar el tipo de contenido de la hoja de estilo.

competición justa

Cuando se introdujo HTML5, incluyó muchos elementos nuevos, como artículos y secciones. Puede pensar que este es el principal problema con el soporte de elementos no reconocidos en navegadores más antiguos, pero está equivocado. Esto se debe a que a la mayoría de los navegadores no les importa qué etiquetas utilice.

Si tiene un documento HTML con una etiqueta de receta (o incluso una etiqueta ziggy), y su CSS adjunta algunos estilos al elemento, casi todos los navegadores lo tratarán como una operación completamente normal, nada. Aplique su estilo sin quejas.

Por supuesto, estos documentos hipotéticos no serán verificables y puede haber problemas de accesibilidad, pero se mostrarán correctamente en casi todos los navegadores, excepto en las versiones anteriores de Internet Explorer (IE). Antes de la versión 9, IE impedía que los elementos no reconocidos recibieran estilos.

Estos elementos misteriosos son considerados elementos desconocidos por el motor de renderizado, por lo que no puede cambiar su apariencia o comportamiento. Esto incluye no solo los elementos que imaginamos, sino también los elementos que no se definieron cuando se desarrolló la versión del navegador. Esto significa nuevos elementos HTML5.

comprobar el correo electrónico del corredor de la carretera

La buena noticia es que ha disminuido el uso de IE. El uso global de IE11 se ha reducido a aproximadamente un 2,7% (a partir de 2018) y la versión anterior casi ha desaparecido del mapa.

Sin embargo, si necesita admitir navegadores antiguos, aún puede usar el confiable HTML5 Shiv, un JavaScript muy simple desarrollado originalmente por John Resig. Inspirado en la idea de Sjoerd Visscher, permite diseñar nuevos elementos HTML5 en versiones anteriores de IE.

Sin embargo, en realidad, ahora no es necesario. Todos los navegadores modernos e incluso las últimas versiones anteriores admiten elementos HTML5. La única excepción es que algunos navegadores no reconocen los elementos principales más nuevos. Sin embargo, para estos navegadores, aún puede usar este elemento siempre que agregue el estilo apropiado (como configurarlo como un elemento de bloque).

Lo siguiente es la historia

Mirando el resto de la plantilla de inicio, tenemos elementos de cuerpo comunes con sus etiquetas finales y etiquetas html de cierre. También hacemos referencia a un archivo JavaScript en el elemento de secuencia de comandos.

Al igual que la etiqueta de enlace discutida anteriormente, el La etiqueta no necesita declarar un atributo de tipo. Si alguna vez ha escrito XHTML, puede recordar que las etiquetas de su script se ven así:

Dado que JavaScript es en realidad el único lenguaje de secuencias de comandos verdadero que se utiliza en la Web, y todos los navegadores asumen que está utilizando JavaScript, incluso si no indica explícitamente el hecho, el atributo de tipo no es necesario en los documentos HTML5:

Colocamos el elemento de secuencia de comandos en la parte inferior de la página para cumplir con las mejores prácticas para incrustar JavaScript. Esto tiene que ver con la velocidad de carga de la página; cuando el navegador encuentra una secuencia de comandos, pausará la descarga y representará el resto de la página mientras analiza la secuencia de comandos.

Esto hará que la página se cargue mucho más lentamente al incluir scripts grandes en la parte superior de la página antes de cargar cualquier cosa. Es por eso que la mayoría de los scripts deben colocarse en la parte inferior de la página para que solo se analicen después de que se cargue el resto de la página.

Sin embargo, en algunos casos (como el uso de HTML5 shiv), es posible que sea necesario colocar el script al principio del documento, porque desea que surta efecto antes de que el navegador comience a representar la página.

Próximo paso

Una forma de llevar HTML5 al siguiente nivel es probar el HTML5 Boilerplate. Este recurso actualizado periódicamente proporciona un punto de partida conveniente para su proyecto, con las mejores prácticas más recientes establecidas por cientos de los mejores programadores del mundo.

Incluso si solo desea revisar el código y ver cómo se usan ciertos elementos en estos días, como los diversos metaelementos en el encabezado del documento, vale la pena descargarlo y verificarlo.

Otra forma de llevar el desarrollo de su sitio web o aplicación web al siguiente nivel es probar un marco moderno que se usa ampliamente en la actualidad.

Lo anterior es el contenido detallado de la plantilla HTML5 básica adecuada para cualquier proyecto.

#html # html5 #template