Guía de estilo de HTML5 y convenciones de codificación
Guía de estilo de HTML5 y convenciones de codificación
Convenciones de codificación HTML
Los desarrolladores web a menudo tienen dudas sobre el estilo de codificación y la sintaxis para usar en HTML.
Entre 2000 y 2010, muchos desarrolladores web convirtieron de HTML a XHTML.
Con XHTML, los desarrolladores se vieron obligados a escribir código válido y "bien formado".
HTML5 es un poco más descuidado en lo que respecta a la validación de código.
Sé inteligente y prueba futura
Un uso constante del estilo hace que sea más fácil para otros comprender tu HTML.
En el futuro, es posible que los programas como los lectores XML quieran leer su HTML.
Usar una sintaxis bien formada, "cercana a XHTML", puede ser inteligente.
Siempre mantenga su código ordenado, limpio y bien formado.
Usar el tipo de documento correcto
Declare siempre el tipo de documento como la primera línea en su documento:
<!DOCTYPE html>
Si desea coherencia con las etiquetas en minúsculas, puede usar:
<!doctype html>
Use nombres de elementos en minúsculas
HTML5 permite mezclar letras mayúsculas y minúsculas en nombres de elementos.
Recomendamos usar nombres de elementos en minúsculas porque:
- Mezclar nombres en mayúsculas y minúsculas es malo
- Los desarrolladores normalmente usan nombres en minúsculas (como en XHTML)
- Limpiador de aspecto minúsculo
- Las minúsculas son más fáciles de escribir
Malo:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>
Muy mal:
<Section>
<p>This is a paragraph.</p>
</SECTION>
Bueno:
<section>
<p>This is a paragraph.</p>
</section>
Close All HTML Elementos
En HTML5, no tiene que cerrar todos los elementos (por ejemplo, el elemento <p>).
Recomendamos cerrar todos los elementos HTML.
Malo:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>
Bueno:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>
Close Empty HTML Elementos
En HTML5, es opcional cerrar elementos vacíos.
Permitido:
<meta charset="utf-8">
También permitido:
<meta charset="utf-8" />
Sin embargo, la barra oblicua (/) se REQUIERE en XHTML y XML.
Si espera que el software XML acceda a su página, es una buena idea mantener la barra de cierre.
Use nombres de atributos en minúsculas
HTML5 permite mezclar letras mayúsculas y minúsculas en nombres de atributos.
Recomendamos usar nombres de atributos en minúsculas porque:
- Mezclar nombres en mayúsculas y minúsculas es malo
- Los desarrolladores normalmente usan nombres en minúsculas (como en XHTML)
- Limpiador de aspecto minúsculo
- Las minúsculas son más fáciles de escribir
Malo:
<div CLASS="menu">
Bueno:
<div class="menu">
Valores de atributo de cotización
HTML5 permite valores de atributo sin comillas.
Recomendamos citar los valores de los atributos porque:
- Mezclar mayúsculas y minúsculas es malo
- Los valores cotizados son más fáciles de leer
- DEBE usar comillas si el valor contiene espacios
Muy mal:
Esto no funcionará, porque el valor contiene espacios:
<table class=table striped>
Malo:
<table class=striped>
Bueno:
<table class="striped">
Atributos de imagen
Siempre agregue el atributo "alt" a las imágenes. Este atributo es importante cuando la imagen por algún motivo no se puede mostrar. Además, siempre defina ancho y altura de la imagen. Reduce el parpadeo porque el navegador puede reservar espacio para la imagen antes de cargarla.
Malo:
<img src="html5.gif">
Bueno:
<img src="html5.gif" alt="HTML5"style="width:128px;height:128px">
Espacios y signos iguales
HTML5 permite espacios alrededor de signos iguales. Pero sin espacio es más fácil de leer y agrupa a las entidades mejor juntas.
Malo:
<link rel = "stylesheet" href = "styles.css">
Bueno:
<link rel="stylesheet" href="styles.css">
Evitar largas líneas de código
Cuando se usa un editor de HTML, no es conveniente desplazarse hacia la derecha y hacia la izquierda para leer el código HTML.
Intenta evitar las líneas de código de más de 80 caracteres.
Líneas en blanco y sangría
No agregue líneas en blanco sin una razón.
Para facilitar la lectura, agregue líneas en blanco para separar bloques de códigos grandes o lógicos.
Para facilitar la lectura, agregue dos espacios de sangría. No use la tecla de tabulación.
No use líneas en blanco innecesarias ni sangrías. No es necesario aplicar sangría a cada elemento:
Innecesario:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>
</body>
Mejor:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>
</body>
Ejemplo de tabla:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
Ejemplo de lista:
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>
¿Omitir <html> y <cuerpo>?
En el estándar HTML5, la etiqueta <html> y la etiqueta <body> se pueden omitir.
El siguiente código se validará como HTML5:
Ejemplo
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
No recomendamos omitir las etiquetas <html> y <body>.
El elemento <html> es la raíz del documento. Es el lugar recomendado para especificar el idioma de la página:
<!DOCTYPE html>
<html lang="en-US">
Declarar un idioma es importante para las aplicaciones de accesibilidad (lectores de pantalla) y los motores de búsqueda.
La omisión de <html> o <body> puede bloquear el software DOM y XML.
Omitir <cuerpo> puede producir errores en navegadores antiguos (IE9).
Omitiendo <cabeza>?
En el estándar HTML5, la etiqueta <head> también se puede omitir.
Por defecto, los navegadores agregarán todos los elementos antes de <body>, a un elemento predeterminado <head>.
Puede reducir la complejidad de HTML, omitiendo la etiqueta <head>:
Ejemplo
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
No recomendamos omitir la etiqueta <head>.
Omitir etiquetas no es familiar para los desarrolladores web. Se necesita tiempo para establecerse como una guía.
Metadatos
El elemento <title> es obligatorio en HTML5. Haga que el título sea lo más significativo posible:
<title>HTML5 Syntax and Coding Style</title>
Para garantizar la interpretación adecuada y la correcta indexación del motor de búsqueda, tanto el idioma como la codificación de caracteres se deben definir lo antes posible en un documento:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML5 Syntax and Coding Style</title>
</head>
Configuración de la ventana gráfica
HTML5 introdujo un método para permitir que los diseñadores web tomen el control de la ventana gráfica a través de la etiqueta <meta>.
La ventana gráfica es el área visible del usuario de una página web. Varía según el dispositivo, y será más pequeño en un teléfono móvil que en una pantalla de computadora.
Debe incluir el siguiente elemento de ventana <meta> en todas sus páginas web:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Un elemento de ventana <meta> le da instrucciones al navegador sobre cómo controlar las dimensiones y la escala de la página.
El ancho = parte del ancho del dispositivo establece el ancho de la página para seguir el ancho de pantalla del dispositivo (que variará según el dispositivo).
La escala inicial = 1.0 parte establece el nivel de zoom inicial cuando el navegador carga la página por primera vez.
Aquí hay un ejemplo de una página web sin la metaetiqueta de la ventana gráfica y la misma página web con la metaetiqueta de la ventana gráfica:
Consejo: Si está navegando por esta página con un teléfono o una tableta, puede hacer clic en los dos enlaces siguientes para ver la diferencia.
HTML Comentarios
Los comentarios cortos deben escribirse en una línea, como esta:
<!-- This is a comment -->
Los comentarios que abarcan más de una línea deben escribirse así:
<!--
This is a long comment example. This is a long comment example.
This is a long comment example. This is a long comment example.
-->
Los comentarios largos son más fáciles de observar si están sangrados dos espacios.
Hojas de estilo
Use sintaxis simple para vincular a hojas de estilo (el atributo de tipo no es necesario):
<link rel="stylesheet" href="styles.css">
Las reglas cortas pueden escribirse comprimidas, en una línea, así:
p.intro {font-family: Verdana; font-size: 16em;}
Las reglas largas deben escribirse en varias líneas:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;}
- Coloque el soporte de apertura en la misma línea que el selector
- Use un espacio antes del soporte de apertura
- Use dos espacios de sangría
- Use punto y coma después de cada par de valor de propiedad, incluido el último
- Solo use comillas alrededor de los valores si el valor contiene espacios
- Coloque el soporte de cierre en una nueva línea, sin espacios iniciales
- Evite líneas de más de 80 caracteres
Cargando JavaScript en HTML
Use sintaxis simple para cargar scripts externos (el atributo de tipo no es necesario):
<script src="myscript.js">
Accessing HTML Elementos with JavaScript
Una consecuencia del uso de estilos HTML "desordenados" podría generar errores de JavaScript.
Estas dos declaraciones de JavaScript producirán resultados diferentes:
Ejemplo
var obj = getElementById("Demo")
var obj = getElementById("demo")
Use nombres de archivo en minúsculas
Algunos servidores web (Apache, Unix) distinguen entre mayúsculas y minúsculas sobre los nombres de los archivos: "london.jpg" no se puede acceder como "London.jpg".
Otros servidores web (Microsoft, IIS) no distinguen entre mayúsculas y minúsculas: se puede acceder a "london.jpg" como "London.jpg" o "london.jpg".
Si usa una combinación de mayúsculas y minúsculas, debe ser extremadamente consistente.
Si pasa de un caso insensible a un servidor sensible a las mayúsculas y minúsculas, incluso pequeños errores romperán su web.
Para evitar estos problemas, utilice siempre nombres de archivo minúsculos.
Extensiones de archivo
Los archivos HTML deben tener una extensión .php o .htm .
Los archivos CSS deben tener una extensión .css .
Los archivos JavaScript deben tener una extensión .js .
Diferencias entre .htm y .php
No hay diferencia entre las extensiones .htm y .php. Ambos serán tratados como HTML por cualquier navegador web o servidor web.
Las diferencias son culturales:
.htm "huele" a los primeros sistemas DOS donde el sistema limitaba las extensiones a 3 caracteres.
.php "huele" a los sistemas operativos Unix que no tienen esta limitación.
Diferencias técnicas
Cuando una URL no especifica un nombre de archivo (como https://www.w3schools.com/css/), el servidor devuelve un nombre de archivo predeterminado. Los nombres de archivo predeterminados comunes son index.php, index.htm, default.php y default.htm.
Si su servidor está configurado solo con "index.php" como nombre de archivo predeterminado, su archivo debe llamarse "index.php", no "index.htm".
Sin embargo, los servidores pueden configurarse con más de un nombre de archivo predeterminado, y normalmente puede configurar tantos nombres de archivo predeterminados como sea necesario.
De todos modos, la extensión completa de los archivos HTML es .php, y no hay razón para que no se use.
Entradas más populares de este blog
Listado pasaporte y cedulas SAIME 2018
click aqui para descargar el listado en formato pdf 21 de Julio de 2018 Con el propósito de dar celeridad al proceso de entrega de documentos, el Director General del Servicio Administrativo de Identificación, Migración y Extranjería (Saime), Gustavo Vizcaíno Gil, ordenó habilitar todas las oficinas del país los días sábados, únicamente para la entrega de cédulas y pasaportes. Saime abre sus oficinas los días sábados Con el propósito de dar celeridad al proceso de entrega de documentos, el Director General del Servicio Administrativo de Identificación, Migración y Extranjería (Saime), Gustavo Vizcaíno Gil, ordenó habilitar todas las oficinas del país los días sábados, únicamente para la entrega de cédulas y pasaportes. Los usuarios podrán ingresar en la página web del Saime www.saime.gob.ve y verificar si están en el listado donde le indicará en que oficina pueden retirar sus documentos de identificación. Esta iniciativa da cumplimiento a la sép...
Etiqueta HTML < abbr >
Etiqueta HTML <abbr> ❮ Referencia HTML completa anterior Siguiente ❯ Ejemplo Una abreviatura se marca de la siguiente manera: The < abbr title ="World Health Organization" > WHO < /abbr > was founded in 1948. Pruebelo usted mismo » Definición y uso La etiqueta <abbr> define una abreviatura o un acrónimo, como "Sr.", "Dec.", "ASAP", "ATM". Sugerencia: una abreviatura y un acrónimo son versiones abreviadas de otra cosa. Ambos a menudo se representan como una serie de letras. Marcar las abreviaturas puede proporcionar información útil para navegadores, sistemas de traducción y motores de búsqueda. Soporte del navegador Element <abbr> Yes Yes Yes Yes Yes Consejos y notas Consejo: El atributo de título global se puede usar en la etiqueta <abbr> para mostrar la versión completa de la abreviatura / acrónimo al pasar el mouse sobre el elemento <abbr>. Difere...
HTML < a > tag
HTML <a> día ❮ Referencia HTML completa anterior Siguiente ❯ Ejemplo Un enlace a W3Schools.com: < a href ="https://www.w3schools.com" > Visit W3Schools.com! < /a > Pruebelo usted mismo » More "Pruebelo usted mismo" examples below. Definición y uso La etiqueta <a> define un hipervínculo, que se usa para vincular de una página a otra. El atributo más importante del elemento <a> es el atributo href, que indica el destino del enlace. Por defecto, los enlaces aparecerán de la siguiente manera en todos los navegadores: Un enlace no visitado está subrayado y azul Un enlace visitado está subrayado y morado Un enlace activo está subrayado y rojo Soporte del navegador Element <a> Yes Yes Yes Yes Yes Consejos y notas Sugerencia: los siguientes atributos: descarga, hreflang, medios, rel, destino y tipo no pueden estar presentes si el atributo href no está presente. Consejo: Normalmente,...