AdNow

loading...

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>
Pruebelo usted mismo »
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>
Pruebelo usted mismo »
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")
Pruebelo usted mismo »

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.

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Entradas más populares de este blog

Listado pasaporte y cedulas SAIME 2018

Etiqueta HTML < abbr >

HTML < a > tag

Visitas a este blog