Guía de estilo HTML
Un código HTML coherente, limpio y ordenado facilita que otros lean y comprendan su código.
Aquí hay algunas pautas y consejos para crear un buen código HTML.
Declarar siempre el tipo de documento
Declare siempre el tipo de documento en la primera línea de su documento.
El tipo de documento correcto para HTML es:
<!DOCTYPE html>
Usar nombres de elementos en minúsculas
HTML permite mezclar letras mayúsculas y minúsculas en los nombres de los elementos.
Sin embargo, recomendamos usar nombres de elementos en minúsculas, porque:
- Mezclar nombres en mayúsculas y minúsculas se ve mal
- Los desarrolladores normalmente usan nombres en minúsculas
- Las minúsculas se ven más limpias
- Minúsculas es más fácil de escribir
Bien:
<body>
<p>This is a paragraph.</p>
</body>Malo:
<BODY>
<P>This is a paragraph.</P>
</BODY>Cerrar todos los elementos HTML
En HTML, no tiene que cerrar todos los elementos (por ejemplo, el <p>elemento).
Sin embargo, recomendamos encarecidamente cerrar todos los elementos HTML, así:
Bien:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>Malo:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>Usar nombres de atributos en minúsculas
HTML permite mezclar letras mayúsculas y minúsculas en los nombres de los atributos.
Sin embargo, recomendamos usar nombres de atributos en minúsculas porque:
- Mezclar nombres en mayúsculas y minúsculas se ve mal
- Los desarrolladores normalmente usan nombres en minúsculas
- Las minúsculas se ven más limpias
- Las minúsculas son más fáciles de escribir.
Bien:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Malo:
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Citar siempre valores de atributo
HTML permite valores de atributo sin comillas.
Sin embargo, recomendamos citar los valores de los atributos porque:
- Los desarrolladores normalmente citan valores de atributos
- Los valores citados son más fáciles de leer
- DEBE usar comillas si el valor contiene espacios
Bien:
<table
class="striped">Malo:
<table class=striped>Muy mal:
Esto no funcionará, porque el valor contiene espacios:
<table class=table striped>Siempre especifique alt, ancho y alto para las imágenes
Especifique siempre el altatributo de las imágenes. Este atributo es importante si la imagen por alguna razón no se puede mostrar.
Además, siempre defina el widthy
heightde las imágenes. Esto reduce el parpadeo, porque el navegador puede reservar espacio para la imagen antes de cargarla.
Bien:
<img
src="html5.gif" alt="HTML5" style="width:128px;height:128px">Malo:
<img
src="html5.gif">Espacios y Signos Iguales
HTML permite espacios alrededor de signos iguales. Pero sin espacio es más fácil de leer y agrupa mejor las entidades.
Bien:
<link rel="stylesheet" href="styles.css">Malo:
<link
rel = "stylesheet" href = "styles.css">Evite líneas de código largas
Al usar un editor HTML, NO es conveniente desplazarse hacia la derecha y hacia la izquierda para leer el código HTML.
Trate de evitar líneas de código demasiado largas.
Líneas en blanco y sangría
No agregue líneas en blanco, espacios o sangrías sin una razón.
Para facilitar la lectura, agregue líneas en blanco para separar bloques de código grandes o lógicos.
Para facilitar la lectura, agregue dos espacios de sangría. No utilice la tecla de tabulación.
Bien:
<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>
Malo:
<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>
Buen ejemplo de mesa:
<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>
Buen ejemplo de lista:
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
Nunca omita el elemento <title>
El <title>elemento es obligatorio en HTML.
¡El contenido del título de una página es muy importante para la optimización de motores de búsqueda (SEO)! Los algoritmos de los motores de búsqueda utilizan el título de la página para decidir el orden al enumerar las páginas en los resultados de búsqueda.
El <title>elemento:
- define un título en la barra de herramientas del navegador
- proporciona un título para la página cuando se agrega a favoritos
- muestra un título para la página en los resultados del motor de búsqueda
Por lo tanto, intente que el título sea lo más preciso y significativo posible:
<title>HTML
Style Guide and Coding Conventions</title>
¿Omitiendo <html> y <body>?
Una página HTML se validará sin las etiquetas <html>y
:<body>
Ejemplo
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Sin embargo, recomendamos encarecidamente agregar siempre las etiquetas <html>y
.<body>
Omitir <body>puede producir errores en navegadores más antiguos.
Omitir <html>y <body>
también puede bloquear el software DOM y XML.
¿Omitir <cabeza>?
La etiqueta HTML <head> también se puede omitir.
Los navegadores agregarán todos los elementos anteriores <body>a un elemento predeterminado <head>
.
Ejemplo
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Sin embargo, recomendamos usar la <head>etiqueta.
¿Cerrar elementos HTML vacíos?
En HTML, es opcional cerrar elementos vacíos.
Permitido:
<meta
charset="utf-8">
También permitido:
<meta charset="utf-8" />
Si espera que el software XML/XHTML acceda a su página, mantenga la barra inclinada de cierre (/), ya que se requiere en XML y XHTML.
Agregue el atributo lang
Siempre debe incluir el langatributo dentro de la <html>etiqueta, para declarar el idioma de la página web. Esto está destinado a ayudar a los motores de búsqueda y navegadores.
Ejemplo
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
metadatos
Para garantizar una interpretación adecuada y una indexación correcta en los motores de búsqueda, tanto el idioma como la codificación de caracteres deben definirse lo antes posible en un documento HTML:<meta charset="charset">
<!DOCTYPE html>
<html
lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
Configuración de la ventana gráfica
La ventana gráfica es el área visible del usuario de una página web. Varía según el dispositivo: será más pequeño en un teléfono móvil que en la pantalla de una computadora.
Debes incluir el siguiente <meta>elemento en todas tus páginas web:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Esto le da al navegador instrucciones sobre cómo controlar las dimensiones y la escala de la página.
La width=device-widthparte establece el ancho de la página para seguir el ancho de pantalla del dispositivo (que variará según el dispositivo).
La initial-scale=1.0parte establece el nivel de zoom inicial cuando el navegador carga la página por primera vez.
Este es un ejemplo de una página web sin la metaetiqueta de ventana gráfica y la misma página web con la metaetiqueta de ventana gráfica:
Sugerencia: si está navegando por esta página con un teléfono o una tableta, puede hacer clic en los dos enlaces a continuación para ver la diferencia.
Comentarios HTML
Los comentarios cortos deben escribirse en una sola línea, así:
<!-- This is a comment -->
Los comentarios que ocupan 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 con dos espacios.
Uso de hojas de estilo
Use simple syntax for linking to style sheets (the
type attribute is not necessary):
<link rel="stylesheet" href="styles.css">
Short CSS rules can be written compressed, like this:
p.intro {font-family:Verdana;font-size:16em;}
Long CSS rules should be written over multiple lines:
body {
background-color: lightgrey;
font-family: "Arial
Black", Helvetica, sans-serif;
font-size: 16em;
color:
black;
}
- Place the opening bracket on the same line as the selector
- Use one space before the opening bracket
- Use two spaces of indentation
- Use semicolon after each property-value pair, including the last
- Only use quotes around values if the value contains spaces
- Place the closing bracket on a new line, without leading spaces
Loading JavaScript in HTML
Use simple syntax for loading external scripts (the
type attribute is not necessary):
<script src="myscript.js">
Accessing HTML Elements with JavaScript
Using "untidy" HTML code can result in JavaScript errors.
These two JavaScript statements will produce different results:
Example
getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML
= "Hello";
Visit the JavaScript Style Guide.
Use Lower Case File Names
Some web servers (Apache, Unix) are case sensitive about file names: "london.jpg" cannot be accessed as "London.jpg".
Other web servers (Microsoft, IIS) are not case sensitive: "london.jpg" can be accessed as "London.jpg".
If you use a mix of uppercase and lowercase, you have to be aware of this.
If you move from a case-insensitive to a case-sensitive server, even small errors will break your web!
To avoid these problems, always use lowercase file names!
File Extensions
HTML files should have a .html extension (.htm is allowed).
CSS files should have a .css extension.
JavaScript files should have a .js extension.
Differences Between .htm and .html?
There is no difference between the .htm and .html file extensions!
Both will be treated as HTML by any web browser and web server.
Default Filenames
When a URL does not specify a filename at the end (like "https://www.w3schools.com/"), the server just adds a default filename, such as "index.html", "index.htm", "default.html", or "default.htm".
If your server is configured only with "index.html" as the default filename, your file must be named "index.html", and not "default.html".
However, servers can be configured with more than one default filename; usually you can set up as many default filenames as you want.