Tutorial HTML5, etiquetas.

Etiquetas HTML5

html5

Como se menciono anteriormente se estarán realizando una seria de tutoriales sobre desarrollo web, en este caso hablamos de HTML5, queremos empezar con lo mas básico para después ir subiendo de nivel, de esta forma las personas que no tienen conocimiento puedan aprender de una buena forma y desde el principio.

 Un cambio que ofreció HTML5 fueron sus etiquetas, anteriormente estábamos acostumbrados a trabajar con cajas <div> donde para diferenciar para que seria utilizada cada una colocábamos un id, por ejemplo id=”contenedor”, id=”nav”  etc. Ahora tenemos etiquetas mas especificas para cada cosa.

Las etiquetas en HTML5 es algo importante, así que para todas las personas que van empezando o personas que ya tienen tiempo con HTML5 les recomiendo que guarden esta entrada en favoritos o se descarguen el PDF que comparto al final, esta informacion les servirá siempre y para todos sus proyectos.

La estructura básica de una web  con html5 es la siguiente;

<DOCTYPE html> <!--Tipo de documento, para HTML5 se utiliza este-->
<html lang="es"> <!-- Empieza el documento HTML, utilizamos el lang="es" para decirle al navegador en que lenguaje esta la web-->
<head> <!--Etiqueta head-->
	<meta charset="utf-8"/> <!--Con esta etiqueta elejimos el formato de caracteres "8-bit Unicode Transformation Format"-->
	<title>Mi Web</title> <!--Titulo del documento-->
</head> <!--Cerramos etiqueta head-->
<body> <!--Etiqueta body-->
	<header>
	<!--
	Dentro de esta etiqueta HTML5 colocamos la cabezera de la web
	la parte donde podras el logo.
	-->
	</header>
	<nav>
	<!--
	Dentro de esta etiqueta HTML5 colocamos el menu.
	-->
	</nav>
	<section>
	<!--
	Dentro de esta etiqueta HTML5 colocamos el contenido de la web.
	-->	
		<article>
		<!--
	    Dentro de esta etiqueta HTML5 colocamos el contenido relebante de la web.
	    -->		
		</article>
		<aside>
		<!--
	    Dentro de esta etiqueta HTML5 colocamos cosas secundarias, botones redes sociales etc.
	    -->	
		</aside>	
	</section>
	<footer>
	<!--
	    Dentro de esta etiqueta HTML5 colocamos el pie de la pagina.
	-->	
	</footer>	
</body>
</html>	

See the Pen mwHqj by Angel Sanchez (@AzulWeb) on CodePen.

No me voy a centrar mucho en las estructuras ya que en este tutorial solo deseo comentarles un poco de las etiquetas, compartirles un acordeón de todas las etiquetas de HTML5 donde podrás ver para que se usan, este acordeón fue realizado por woorkup. Al final del articulo dejo el link para descargarlo en PDF.
HTML5 EtiquetasHTML5 Etiquetas 2

Me gustaría preguntarles sobre que temas de desarrollo web quieren que hagamos tutoriales , me comentaban que CSS3,  JavaScript y PHP, si tienen otro que agregar comenten o mandenme un tweet @Angeel_Sancheez 😉

Fuente Woorkup, descargar en pdf.

Descargar este artículo en PDF

Lo sentimos, esta opción solo está disponible para los socios. Más información de nuestro grupo de socios.


Angel Sanchez on FacebookAngel Sanchez on GithubAngel Sanchez on GoogleAngel Sanchez on InstagramAngel Sanchez on LinkedinAngel Sanchez on Twitter
Angel Sanchez
CEO en Azul Web

Fundador de Azul Web amante de la tecnología, me gusta compartir mis conocimientos y apoyar a las demás personas que desean tener un mejor desarrollo profesional. Toda persona que tenga un sueño y este luchando por él tiene mi respeto y mi apoyo.


Déjanos un comentario: