Recomendaciones de Google cuando se va a programar en HTML

Ramiro Javier Chuquimia Ticona by Ramiro Javier Chuquimia Ticona
Published in HTML

Google genera mucho contenido de código abierto, y entre este se encuentra muchísmo código de programación. Pues existen una serie de guías en las que se recomiendan determinadas formas de trabajar que pueden ser interesantes, principalmente (al menos a mi) las que hacen referencia al HTML. Me gustaría destacar algunas de las recomendaciones… que no significa que yo las use o que esté de acuerdo, pero creo que son mencionables.

 

Uso del protocolo
No se recomienda indicar el uso del protocolo en cuestión cuandos e llama a un objeto. A mi me gusta ponerlo, y aunque sé que en el RFC se dice que no es necesario…

<!-- No recomendado -->
<script src="http://www.example.com/example.js"></script>
<!-- Sí recomendado -->
<script src="//www.example.com/example.js"></script>


Indentación
Algo que yo suelo hacer… que el código esté bien ordenado. Para ello las “tabulaciones” se indicarán con 2 espacios (se recomienda no usar tabulaciones, aunque yo es lo que uso).

<ul>
  <li>Fantastic</li>
  <li>Great</li>
</ul>


Mayúsculas/Minúsculas
Se recomienda que todo el HTML esté en minúculas:

<!-- No recomendado -->
<A HREF="/">Home</A>
<!-- Sí recomendado -->
<img src="/example.png" alt="Google">


Espacios en blanco
Es mejor no dejar espacios en blanco si no son necesarios.

<!-- No recomendado -->
<p>¿Qué? </p>
<!-- Sí recomendado -->
<p>Gracias</p>

Codificación
Esto es muy sencillo… se recomienda el uso de UTF-8 (sin BOM). Además, en las plantillas HTML se debe indicar la meta-etiqueta correspondiente:

<meta charset="utf-8">

HTML5
Se prefiere HTML5 en los documentos, con su cabecera correspondiente:

<!DOCTYPE html>


Esto también incluye el uso del MIME text/html y no de XHTML y, por ello, no hace falta cerrar las etiquetas o sea, es mejor <br> y no <br />.

Código HTML válidado
Algo de lo que siempre hay muchas discusiones… personalmente es lgo que me gusta cumplir, al menos cuando la web no tiene códigos de publicidad u otros elementos externos.

<!-- No recomendado -->
<title>Test</title>
<article>This is only a test.
<!-- Sí recomendado -->
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>


Semántica
Hay que usar el HTML según su valor inicial, esdecir, un P es un párrafo, y un A un enlace.

<!-- No recomendado -->
<div onclick="visitarRecomendados();">Recomendados</div>
<!-- Sí recomendado -->
<a href="/recomendados/">Recomendados</a>


Multimedia
Hay que proveer de contenido alternativo en el caso de uso de elementos multimedia. Por ejemplo, las imágenes deberían llevar un texto alternativo.

<!-- No recomendado -->
<img src="/example.png">
<!-- Sí recomendado -->
<img src="/example.png" alt="Contenido de ejemplo.">


Interdependencia
Hay que intentar mantener diferenciado y desvinculado el código de la página, de la estructura (markup) de la presentación (styling) del comportamiento con los mismos (scripting).

Evitar entidades
Gracias al UTF-8, es casi innecesario el uso de entidades HTML (por ejemplo el &eur para representar €). Sólo hay dos excepciones habituales que son el & y el < o >.

<!-- No recomendado -->
El símbolos del Euro es: &ldquo;&eur;&rdquo;.
<!-- Sí recomendado -->
El símbolos del Euro es: “€”.


Etiquetas opcionales
Este es otro de esos puntos en los que no estoy 100% de acuerdo. Si bien es cierto qu una de las grandísimas ventajas del HTML5 es que no es necesario escribir todo el código estructurado como hasta ahora, no tengo muy claro que sea interesante de cara a la compatibilidad con todo.

<!-- No recomendado -->
<!DOCTYPE html>
<html>
<head>
<title>gastando bytes</title>
</head>
<body>
<p>Mal.</p>
</body>
</html>
<!-- Sí recomendado -->
<!DOCTYPE html>
<title>ahorrando bytes</title>
<p>Bien.


Atributo “type”
En cambio, esta sí que la considero del todo útil (ya que antes me arecía completamente inútil). En principio los ficheros externos a los que llamamos (por ejemplo .CC o .JS) no es necesarios indicarles el MIME al que mandamos (al fin y al cabo, los ficheros ya lo indican per sé).

<!-- No recomendado -->
<link rel="stylesheet" href="//www.google.com/css/maia.css" type="text/css">
<!-- Sí recomendado -->
<link rel="stylesheet" href="//www.google.com/css/maia.css">
<!-- No recomendado -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js" type="text/javascript"></script>
<!-- Sí recomendado -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>


Formateado general
Hay que usar un salto de línea para aquellos bloques, listas o tablas e indentar cada elemento hijo. Esta es otra de las recomendaciones que agradezco, porque veo programadores que han hecho mucho daño al HTML.

<blockquote>
<p><em>prueba</em> de un texto cualquiera.</p>
</blockquote>
<ul>
<li>José
<li>María
<li>Juan
</ul>
<table>
<thead>
<tr>
<th scope="col">Ingresos
<th scope="col">Gastos
<tbody>
<tr>
<td>5,00 €
<td>4,50 €
</table>


Uso de comillas
Se recomienda el uso de comillas dobles “ en vez de comilla simple ‘ para los atributos.

<!-- No recomendado -->
<a class='boton boton-alternativo'>Acceder</a>
<!-- Sí recomendado -->
<a class="boton boton-alternativo">Acceder</a>


También hay una serie de recomendaciones para las hojas de estilo CSS. A parte de que el CSS debería validar (algo lógico). Además, se recomeinda que el nombre de las clases sea corto y genérico. Por ejemplo, es más recomendable usar #nav que #navegacion o usar .aux que no .boton-verde.

Selectores
Además, por un tema de rendimiento (muy importante de cara al WPO) hay que intentar ir al elemento más concreto que incliur los generales. Yo principalmente lo veo claro con los ID, pero no siempre con las clases.

/* No recomendado */
ul#ejemplo {...}
div.error {...}
/* Sí recomendado */
#ejemplo {...}
.error {...}


Propiedades cortas
Algunos elementos permiten propiedades agregadas…

/* No recomendado */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
/* Sí recomendado */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

Valores 0
Los datos que son de valor 0 no requieren de unidades para acompañarlo. De la misma forma, si un vaor va entre -1 y 1, no es necesario indicar el 0.

margin: 0;
padding: 0;
font-size: .8em;


Hexadecimal
Hay que intentar usar los colores cuanto más cortos mejor. De esta forma, si hay colores que se pueden reducir a 3 caracteres, mejor.

/* No recomendado */
color: #eebbcc;
/* Sí recomendado */
color: #ebc;


Ordenar los elementos
Se recomienda ordenar los elementos de forma alfabética. Claro está dentro de cada elemento.

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;


Finalizar las declaraciones
Al final de cada uno de los elementos se recomienda finalizar con un punto y coma.

/* No recomendado */
.test {
display: block;
height: 100px
}
/* Sí recomendado */
.test {
display: block;
height: 100px;
}


Separar propiedades y valores
Siempre utilizar un espacio entre las distintas propiedades y sus valores, pero no entre el valor y el punto y coma final.

/* No recomendado */
h3 {
font-weight:bold;
}
/* Sí recomendado */
h3 {
font-weight: bold;
}


Selectores y declaraciones
Siempre separar cada selector en una línea distinta de otro selector. Además separara con un salto de línea cada regla.

/* No recomendado */
a:focus, a:active {
position: relative; top: 1px;
}
/* Sí recomendado */
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}
html {
background: #fff;
}
body {
margin: auto;
width: 50%;
}


Comillas
A diferencia del HTML, en los CSS es mejor evitar las comillas, y en caso necesario (como en los nombres de tipos de letra) usar la comilla simple ‘.

/* No recomendado */
@import url("//www.example.com/css/estilo.css");
html {
font-family: "open sans", arial, sans-serif;
}
/* Sí recomendado */
@import url(//www.example.com/css/estilo.css);
html {
font-family: 'open sans', arial, sans-serif;
}


En fin, son simples sugerencias de reglas, unas más aceptables que otras… pero las que Google utiliza internamente cuando tiene que liberar código al mundo mundial. Así que, si quieres ser un buen googler ya sabes lo que te toca hacer.

 

Fuente:

http://javiercasares.com/blog/google-html/

Last modification: Lun 11 Feb 2013

Comentarios   

 
0 #9 diseno de Sitios Web 05-01-2017 13:29
Whhen I originally left a comment I seem to have clickedd tthe -Notify me when new comments are added- checkbox annd now eaach time a comment
is added I get 4 emails with the same comment. There has to
be a means you can remove me from that service?
Cheers!
Citar
 
 
0 #8 RCA Spare part 14-10-2015 05:13
Thanks for the marvelous posting! I really enjoyed reading it, you are
a great author. I will be sure to bookmark your blog and will eventually come back
at some point. I want to encourage you to definitely
continue your great job, have a nice morning!
http://pilihbaik.blogspot.co.id
Citar
 
 
0 #7 supreme garcinia 06-10-2015 10:26
It's awesome in support of me to have a web site, which is valuable designed
for my know-how. thanks admin
Citar
 
 
0 #6 Naturo Cleanse 14-07-2015 07:36
With havin so much content and articles do you ever run into any problems of plagorism or copyright infringement?

My blog has a lot of completely unique content I've either written myself or outsourced
but it looks like a lot of it is popping it up all over the web without
my authorization. Do you know any techniques to help protect against content from being stolen? I'd definitely appreciate
it.
Citar
 
 
0 #5 business ranking 12-04-2015 08:46
After looking over a few of the articles on your website, I really like your technique of
writing a blog. I saved as a favorite it to my bookmark
site list and will be checking back in the near future.
Take a look at my website too and let me know how you feel.
Citar
 
 
0 #4 Merle 08-03-2015 02:54
With havin so much content do you ever run into any problems of plagorism or copyright violation? My site has
a lot of exclusive content I've either created myself or outsourced but it seems a lot of
it is popping it up all over the web without my permission. Do you know any solutions to help reduce content from being
stolen? I'd truly appreciate it.
Citar
 
 
0 #3 Maggie 02-02-2015 21:24
Hi there would you mind letting me know which hosting company you're utilizing?

I've loaded your blog in 3 different browsers and I must say this blog loads a lot faster then most.
Can you recommend a good internet hosting provider at a fair price?
Thank you, I appreciate it!
Citar
 
 
0 #2 link wheel service 21-01-2015 21:26
This article will help the internet users for building up new website or even a weblog from start to end.
Citar
 
 
0 #1 Her ex recovery 06-10-2014 06:09
Hey there! Do you know if they make any plugins to assist with SEO?
I'm trying to get my blog to rank for some targeted
keywords but I'm not seeing very good success. If you know
of any please share. Thank you! Her ex recovery system explanation: https://Www.Rebelmouse.com/exrecoverysystembook/
Citar
 

Escribir un comentario


Código de seguridad
Refescar