Si estás acostumbrado a desarrollar tus webs en XHTML, tal vez HTM5 te parezca un paso hacia atrás ya que muchas de las restricciones que nos suponía el paso de HTML4 a XHTML ya no sean obligatorias. Estos son unos de los cambios fundamentales que tienes que tener en cuenta:
1. Ya no es necesario utilizar comillas en los valores de los atributos a excepción de que el valor del atributo tenga una url con el carácter = o que el valor tenga múltiples valores con separados con el valor espacio.
En el primer ejemplo no es necesario poner comillas sin embargo en el segundo ejemplo es obligatorio ponerlo.
Enlace web
Enlace libro html5
2. Ya no es obligatorio que las etiquetas y los atributos sean en minúsculas. Ahora se pueden escribir en mayúsculas, en minúsculas o una combinación de ellas. Por ejemplo podemos escribir la etiqueta title de las siguentes formas
, <TITLE> o <TitLe> cuando en XHTML solo se permitía la primera opción. </p>
<p>3. Los etiquetas que no contenían ningún contenido como >meta<, >br> o >img> ya no tienen que cerrarse. En XHTML teníamos que escribir <br/> mientras que en HTML5 podemos escribirlo correctamente <br> o <br/>.</p>
<p>4. Etiquetas como <p>, <li> y <dt> que eran obligatorio cerrarlas en XHTML ya no lo es con HTML5. El siguiente código para HTML5 sería correcto:
<p>&tl;ul><li>Uno&tl;li>Dos&tl;li> Tres&tl;/ul> </p>
<p>5. Para definir el juego de caracteres se introduce un nuevo atributo para la etiqueta meta:</p>
<pre class="brush: html">
<meta charset="UTF-8">
</pre>
<p>Aunque también se puede realizar de la misma forma que en XHTML:</p>
<pre class="brush: html">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</pre>
<p>6. Para la validación de un documento html ya no son obligatorias etiquetas como html o body. Por lo tanto si no incluimos dichas etiquetas en nuestro documento este será correcto.</p>
<p>7. Desaparecen varios atributos como el type para el elemento script.</p>
<p>8. El atributo action ya no es obligatorio en los formularios (etiqueta form).</p>
<p>9. Se reduce el código del Doctype:</p>
<pre class="brush: html">
<!DOCTYPE html> indica el comienzo de la página web.
</pre>
<p>Esto sustituye al código por ejemplo utilizado en HTML4 estricto: </p>
<pre class="brush: html">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
</pre>
<p>o del XHTML :</p>
<pre class="brush: xml">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
</pre>
<p>
10. Los elementos de formulario, como input, se pueden situar como hijos directos del elemento form; en XHTML era necesario otro elemento (como fieldset o div) para englobarlos.
</p>
<pre class="brush: html">
<form>
<input >
</form>
</pre><h2>Próxima entrada</h2><a href="html5/primera_web">Primera web con HTML5</a>
<div class="publi">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-1204636553468165";
/* profesordeinformatica.com 2 */
google_ad_slot = "5729398017";
google_ad_width = 468;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="https://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div><div class='shareaholic-canvas' data-app='share_buttons' data-app-id='6725203'></div>
</div>
</article>
</div>
</div>
<div id="lateralder" class="col6b">
<div class="ajuste-col">
<div class="caja">
<div class="cabecera"><h2>Sobre el profe</h2></div>
<div class="contenidos">
<p>Esta es la página web de <a href="autor">Aitor Lopez de Aberasturi</a> profesor de informática en <a target="blank" href="https://www.icjardin.net">ITS Ciudad Jardin</a>. También puedes visitar mi <a href="https://alopezaberasturi.blogspot.com" >blog de clase</a>.</p>
</div>
</div>
<div class="caja">
<div class="cabecera"><h2>Libros</h2></div>
<div class="contenidos">
<ul>
<li><a href="https://jakinbai.eu/edukiak/sareko-eta-interneteko-zerbitzuak">Sareko eta interneteko zerbitzuak</a></li>
<li><a href="https://jakinbai.eu/edukiak/informazio-atarietako-mantentze-lanak">Interneteko atariak</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pie de página -->
<footer>
<div class="ajuste-footer general">
<div class="row">
<div class="col4a">
<div class="ajuste-col">
<div class="caja">
<div class="cabecera"><h2>Herramientas</h2></div>
<div class="contenidos">
<p> <a href="https://www.profesordeinformatica.com/herramientas/paleta">Paleta de colores</a></p>
<p> <a href="https://www.profesordeinformatica.com/herramientas/cualesmiip">Cual es mi ip </a></p>
<p> <a href="https://www.profesordeinformatica.com/herramientas/whois">Whois</a></p>
<p> <a href="https://www.profesordeinformatica.com/bit2me">Conversor Bit2Me Cointracking</a></p>
</div>
</div>
</div>
</div>
<div class="col4a">
<div class="ajuste-col">
<div class="caja">
<div class="cabecera"><h2>Descargas</h2></div>
<div class="contenidos">
<p> <a href="https://www.profesordeinformatica.com/descargas/ApuntesDespliegue.pdf">Apuntes DAW </a></p>
<p> <a href="https://www.profesordeinformatica.com/descargas/LibroServicios-capitulo3.pdf">Tema 3 DAW </a></p>
<p> <a href="https://www.profesordeinformatica.com/descargas/capitulo6-ldap.pdf">Ldap </a></p>
<p> <a href="https://www.profesordeinformatica.com/descargas/controldeversiones.pdf">Control de Versiones </a></p>
</div>
</div>
</div>
</div>
<div class="col4a">
<div class="ajuste-col">
<div class="caja">
<div class="cabecera"><h2>Novedades</h2></div>
<div class="contenidos">
</div>
</div>
</div>
</div>
<div class="col4a">
<div class="ajuste-col">
<div class="caja">
<div class="cabecera"><h2>Videos</h2></div>
<div class="contenidos">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer2">
<p><a href="https://creativecommons.org/licenses/by-nc-sa/3.0/es/" target="_blank"><img alt="licencia creative commons" src="images/cc.png" /></a></p>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-43974947-1', 'profesordeinformatica.com');
ga('send', 'pageview');
</script>
</div>
</footer>
</body></html>