![\"articulo](\"http:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2017\/09\/articulo-sobre-html5-.jpeg\")
<\/a>Aprende lo m\u00e1s importante de HTML5 en 5 minutos<\/p><\/div>\n
<\/p>\n
\u00bfQu\u00e9 es una p\u00e1gina web?<\/h2>\n
Una p\u00e1gina web es un documento de texto escrito en un lenguaje de marcas est\u00e1ndar (HTML5) para visualizar informaci\u00f3n a trav\u00e9s del servicio WWW de Internet. HTML es un lenguaje de marcas para representar texto (p\u00e1rrafos, listas, hipertexto, etc), im\u00e1genes, audio y video en una p\u00e1gina web. Una p\u00e1gina web puede ser est\u00e1tica<\/strong> (el usuario no puede cambiar el contenido de la p\u00e1gina) o din\u00e1mica<\/strong> (el usuario puede cambiar el contenido de la p\u00e1gina pues est\u00e1 trabaja con un lenguaje de programaci\u00f3n y bases de datos).<\/p>\n Es una agrupaci\u00f3n de p\u00e1ginas web relacionadas, sean \u00e9stas est\u00e1ticas o din\u00e1micas.<\/p>\n Toda p\u00e1gina o sitio web din\u00e1mico es una aplicaci\u00f3n web. Una aplicaci\u00f3n web es toda aquella aplicaci\u00f3n que requiere de un navegador para ser ejecutada.<\/p>\n Una p\u00e1gina web debe incluir:<\/p>\n Al principio de toda p\u00e1gina web se escribe:<\/p>\n <!DOCTYPE html><\/strong><\/p>\n Esta declaraci\u00f3n le indica al navegador que interprete el c\u00f3digo como HTML5. Es importante que utilicemos solo etiquetas de HTML5. Muchas etiquetas que se utilizaban antes (por ejemplo, <CENTER>), ya no son v\u00e1lidas y los buscadores como Google, penalizan las p\u00e1ginas que las incorporan.<\/p>\n\n En el head escribimos datos y metadatos, es decir informaci\u00f3n sobre la p\u00e1gina web que leer\u00e1 el navegador as\u00ed como los motores de b\u00fasqueda (por ejemplo, Google). En el head<\/em> \u00a0puede ir\u00a0informaci\u00f3n sobre las hojas de estilo y los javascript. Por lo general los javascript van en el head.<\/em>\u00a0Sin embargo, si un Javascript es muy pesado puede ir en el body, para que la p\u00e1gina cargue m\u00e1s r\u00e1pido.<\/p>\n La etiqueta meta<\/em><\/strong> junto con el atributo charset<\/em><\/strong> indica a la p\u00e1gina el conjunto de caracteres a utilizar. Utf-8<\/strong> es un formato de codificaci\u00f3n de caracteres Unicode (admite los acentos, las e\u00f1es, etc).<\/p>\n La etiqueta title<\/strong> se utiliza para escribir el t\u00edtulo de la p\u00e1gina que aparecer\u00e1 en la barra de t\u00edtulo del navegador o en una pesta\u00f1a. Su uso es muy importante si deseamos posicionamiento en los buscadores.<\/p>\n <body><\/strong><\/p>\n \u2026<\/strong><\/p>\n <\/body><\/strong><\/p>\n En esta secci\u00f3n va el contenido visual de la p\u00e1gina. Se puede afirmar que tiene tres hijos o elementos\u00a0 principales:<\/p>\n Es la cabecera principal que aparece en las p\u00e1ginas. Sirve para dar la bienvenida o mostrar el titulo principal de una pagina, su logotipo, men\u00fa de navegaci\u00f3n o un banner llamativo.<\/p>\n No se debe confundir con head<\/em> (explicado anteriormente). Header<\/strong> es parte del body,<\/em> es decir, es parte de la pagina.<\/p>\n Por ejemplo, el header<\/em> de la p\u00e1gina de Apple<\/a> muestra el logotipo, una barra de navegaci\u00f3n y un banner.<\/p>\n HTML5: El header de la p\u00e1gina de Apple contiene: logotipo, barra de navegaci\u00f3n, frase principal y un banner.<\/p><\/div>\n Las etiquetas h1, h2, h3, h4, h5 y h6 son titulares del texto de la p\u00e1gina. No cumplen la misma funci\u00f3n que title<\/em>, pues los titulares se utilizan dentro del body<\/em>.<\/p>\n Un H1<\/strong> es el t\u00edtulo principal, y por lo general el header deber\u00eda incluir un H1. Realmente un H1 puede ir en cualquier parte de la p\u00e1gina. Sin embargo, si el H1 est\u00e1 dentro de un header la frase o palabra titular resultar\u00e1 mejor posicionado en los buscadores.<\/p>\n Lo mejor es que exista solamente un \u00fanico H1. Pueden haber varios si el dise\u00f1ador web as\u00ed lo decide, pero el \u201cvalor\u201d de un H1 se \u201cdiluye\u201d entre todos los H1 de la p\u00e1gina.<\/p>\n H2 es un titular secundario o subt\u00edtulo. Aunque visualmente los navegadores muestran un H1 est\u00e1ndar en una fuente m\u00e1s grande que el H2, el tama\u00f1o de la letra no es lo mas importante, pues \u00e9ste puede ser alterado usando CSS. Lo que cuenta es el valor sem\u00e1tico que tiene cada etiqueta. \u00a0 Puede haber varios H2, as\u00ed como los H3 que el texto requiera.<\/p>\n Hgroup<\/strong> es una etiqueta nueva en HTML5. Se utiliza para relacionar varios titulares Por ejemplo:<\/p>\n <\/p>\n <\/p>\n En este ejemplo, el H2 est\u00e1 relacionado sem\u00e1nticamente con el anterior H1, y tendr\u00e1 m\u00e1s valor para los buscadores que el resto de los H2.<\/p>\n Es importante utilizar la etiqueta nav<\/strong> para crear los men\u00fas de navegaci\u00f3n. Tal vez haya notado que en algunos resultados de Google aparece algo como lo siguiente:<\/p>\n HTML5: Google puede utilizar los elementos de nav para crear sub-resultados<\/p><\/div>\n Aunque esto es decisi\u00f3n del motor de b\u00fasqueda, contribuimos a que se genere si utilizamos la etiqueta nav<\/strong>, que expresa claramente las secciones de nuestro sitio web. As\u00ed, cuando se hagan b\u00fasquedas en Google, los elementos de nav podr\u00edan ser mostrados como sub-resultados de la b\u00fasqueda.<\/p>\n <ul> representa una lista no ordenada.<\/p>\n <ul><\/strong><\/p>\n \u2026<\/strong><\/p>\n <\/ul><\/strong><\/p>\n Una lista est\u00e1 compuesta de elementos <li><\/strong><\/p>\n Aunque se pueden imprimir elementos li<\/strong> sin necesidad de ul<\/strong>, la importancia de ul<\/strong> radica en que los li<\/strong> est\u00e1n agrupados y relacionados sem\u00e1nticamente. <ul> permite agruparlos y dar a entender que pertenecen a la misma lista.<\/p>\n <ol><\/strong><\/p>\n \u2026<\/strong><\/p>\n <\/ol><\/strong><\/p>\n <ol> es una lista ordenada. Por default mostrar\u00e1 n\u00fameros consecutivos para cada elemento de la lista, aunque este comportamiento puede ser modificado con CSS.<\/p>\n Los enlaces (o links) nos permiten crear hiperv\u00ednculos hacia otra p\u00e1gina web.\u00a0 Lo que est\u00e1 dentro de <a href=\u201cpagina.html\u201d> y su etiqueta de cierre <\/a> es lo que aparecer\u00e1 en la p\u00e1gina en forma de enlace. Esto puede ser una frase o una imagen.<\/p>\n Un men\u00fa de navegaci\u00f3n est\u00e1 compuesto de una lista de enlaces, entonces surge la siguiente pregunta.<\/p>\n \u00bfC\u00f3mo tiene que ir? \u00bf<li> <a> o bien <a> <li>?<\/p>\n A nivel sem\u00e1ntico lo correcto es que una lista (ul) este compuesto de elementos li, no de elementos <a>. Es por eso que lo correcto es <li> <a>. Si esta soluci\u00f3n llega a ocasionar problemas, el problema no est\u00e1 en el HTML sino en el CSS.<\/p>\n Se utiliza el atributo target con valor \u201c_blank\u201d para que al dar el clic el usuario abra una nueva pesta\u00f1a o ventana en vez de que se abra la p\u00e1gina en la misma pesta\u00f1a o ventana.<\/p>\n Los elementos html pueden ser nombrados por identificadores. Por ejemplo, cierta secci\u00f3n de la p\u00e1gina pudiera estar etiquetada de esta forma:<\/p>\n <section id=\u201cejemplo\u201d><\/strong><\/p>\n En ese caso, el enlace hacia esa secci\u00f3n de la p\u00e1gina ser\u00eda:<\/p>\n <a href=\u201c#ejemplo\u201d><\/strong><\/p>\n <a href=\u201cprueba\/archivo.html\u201d><\/strong><\/p>\n En ocasiones la p\u00e1gina que queremos abrir est\u00e1 en una carpeta. Si esa carpeta est\u00e1n en el mismo directorio de nuestro archivo HTML, entonces la forma correcta de escribir el enlace es:<\/p>\n <a href=\u201ccarpeta\/archivo.html\u201d><\/strong><\/p>\n <a href=\u201c..\/prueba\/archivo.html\u201d><\/strong><\/p>\n Si la carpeta no est\u00e1 en el mismo directorio de nuestro archivo HTML, sino en un directorio superior, la forma de escribir el enlace ser\u00eda como la siguiente:<\/p>\n <a href=\u201c..\/carpeta\/archivo.html\u201d><\/strong><\/p>\n Los dos puntos consecutivos (..)<\/strong> indican que busque en la carpeta o directorio superior al actual.<\/p>\n La etiqueta para formar p\u00e1rrafos es <p>. Cada p\u00e1rrafo genera un salto de l\u00ednea y genera un nuevo bloque. Generar un salto de l\u00ednea en el c\u00f3digo HTML no genera un salto de l\u00ednea en la pantalla (en la p\u00e1gina web). Se requiere de la etiqueta <p> para escribir correctamente los p\u00e1rrafos.<\/p>\n Por el contrario, <span> no genera un salto de linea. Se utiliza para marcar una frase dentro de un p\u00e1rrafo con el fin de destacarlo de cierta manera. Con CSS se podr\u00eda cambiar su color u otros atributos.<\/p>\n La etiqueta strong sirve para destacar una frase de entre otras sem\u00e1nticamente. Es el equivalente a escribir en negritas en un documento de texto. Da a entender que esa frase es muy importante dentro de ese texto.<\/p>\n Em tambi\u00e9n destaca el texto, sin embargo, no con tanta fuerza como strong. Se utiliza para darle relevancia al texto. Es el equivalente a escribir algo en letra cursiva.<\/p>\n La etiqueta br se utiliza para crear un salto de l\u00ednea. Aunque a\u00fan es v\u00e1lida, ya no es necesaria. Si un dise\u00f1o web requiere de utilizarla, es porque el CSS no est\u00e1 bien estructurado.<\/p>\n La etiqueta section define una secci\u00f3n dentro de la p\u00e1gina. Sirve para englobar un conjunto de contenidos relacionados entre s\u00ed. Por ejemplo, una p\u00e1gina de comercio electr\u00f3nico puede visualizar en su p\u00e1gina de inicio, diversos art\u00edculos de los diversos departamentos. Se crear\u00eda un section para cada departamento, y para cada art\u00edculo se utilizar\u00eda un <article>.<\/p>\n Un <section> puede estar formado por muchos <article><\/p>\n Section son \u00e1reas globales, mientras que article son m\u00e1s espec\u00edficos.<\/p>\n Definen un elemento de informaci\u00f3n, por ejemplo un post o entrada de un blog o un art\u00edculo a la venta (que incluir\u00eda nombre del articulo, foto , precio; datos independientes que juntos representan un elemento de informaci\u00f3n). Un article permite relacionar datos que en forma independiente no representar\u00edan nada, pero juntos producen cierta informaci\u00f3n.<\/p>\n Se tiende a pensar que aside es el contenido que est\u00e1 a un lado de la p\u00e1gina. Esto no es del todo correcto. <aside> representa contenido que est\u00e1 relacionado con el principal. Por ejemplo, en youtube, cuando abres un video, a un lado aparecen los videos relacionados.<\/p>\n En ese caso esta a un lado (aside) pero no necesariamente tiene que estar a un costado, pudiera estar en cualquier otra parte de la p\u00e1gina.<\/p>\n Podr\u00edamos guiarnos de este principio: si no es parte del contenido principal, pero est\u00e1 relacionado, eso es un aside (aunque no este a un lado).<\/p>\n Div nos crea una divisi\u00f3n que agrupa varios elementos. Sirve para agrupar etiquetas en un bloque que no sea header ni un section, etc,<\/p>\n En este caso, podr\u00edamos partir de este criterio: Si existe una etiqueta para representar esa secci\u00f3n de la p\u00e1gina, utilice esa etiqueta. Pero si existe una divisi\u00f3n interna m\u00e1s espec\u00edfica para la que no existe una etiqueta en HTML, se utiliza div.<\/p>\n Estamos acostumbrados a que nos indiquen el punto de finalizaci\u00f3n de casi cualquier cosa, y eso no es distinto en las p\u00e1ginas web. Para imprimir un pie de p\u00e1gina se utiliza footer.<\/p>\n Si una p\u00e1gina no tiene footer causa en el usuario una impresi\u00f3n ca\u00f3tica. Dentro del footer pueden ir los cr\u00e9ditos, un resumen de los enlaces principales, etc.<\/p>\n La etiqueta <img> se ha utilizado siempre para mostrar una imagen y en HTML5 no es la excepci\u00f3n. Sin embargo, \u00a0han aparecido nuevas etiquetas para darle mayor significado y relevancia a las im\u00e1genes.<\/p>\n <img src=\u201cimagen.jpg\u201d alt=\u201cregalos\u201d ><\/strong><\/p>\n El atributo alt se utiliza para dar informaci\u00f3n sobre la imagen. Es muy importante escribirlo siempre si no queremos ser penalizados por los buscadores. Para un buscador es muy dif\u00edcil saber qu\u00e9 representa una imagen, y por eso se valen del atributo alt para obtener esa informaci\u00f3n.<\/p>\n En la mayor\u00eda de los navegadores, cuando se posa el mouse sobre una imagen aparece flotando un peque\u00f1o mensaje con el contenido que hayamos escrito en alt.<\/p>\n Estos atributos pueden modificar el tama\u00f1o de una imagen y aun son v\u00e1lidos, pero no deben utilizarse. HTML es el lenguaje de creaci\u00f3n de contenidos, mientras que los aspectos de dise\u00f1o deben ser escritos usando CSS.<\/p>\n En html5 se debe utilizar una etiqueta figure para agrupar contenido relacionado con la imagen.<\/p>\n <\/p>\n Aunque el mensaje de figcaption<\/strong> puede ser escrito usando cualquier otra etiqueta, usar figcaption permite relacionarla con nuestra imagen, lo que nos permitir\u00eda un mejor posicionamiento en los buscadores.<\/p>\n Existen etiquetas especiales en HTML5 para desplegar audio y video.<\/p>\n <audio src=\u201caudio.wav\u201d type=\u201caudio\/wav\u201d controls=\u201ccontrols\u201d> <\/audio><\/p>\n <video src=\u201cvideo.mov\u201d type=\u201cvideo\/mov\u201d controls=\u201ccontrols\u201d> <\/video><\/p>\n En ambos casos se utiliza el atributo src para indicar el archivo de audio o video. El atributo type para indicar el tipo de audio o video que se reproducir\u00e1. Y el atributo controls para especificar si aparecer\u00e1n o no los controles del reproductor.<\/p>\n El problema de utilizar estas etiquetas es que cuando se carga un video, no sabemos que navegador utiliza ni que versi\u00f3n de navegador utiliza, por lo que en ocasiones el equipo del usuario no est\u00e1 preparado para reproducir nuestros archivos. Debido a eso es mejor no utilizar video en una pagina web.Se puede subir a otro servicio como youtube y copiar el c\u00f3digo correspondiente. En Youtube<\/a> se encuentra la opci\u00f3n insertar, que nos da un codigo, y ese c\u00f3digo se puede incluir e nuestro html, Google<\/a> prefiere ese metodo, por ser un poco m\u00e1s confiable (y porque Google es due\u00f1o de Youtube).<\/p>\n Como pudiste notar, HTML5 se ha dise\u00f1ado para que nuestras web sean sem\u00e1nticas, es decir, que todos sus elementos tengan y aporten significado a la p\u00e1gina. Hacer un uso correcto de estas nuevas etiquetas nos permite construir webs m\u00e1s funcionales, atractivas y bien posisionadas en los resultados de los buscadores.<\/p>\n","protected":false},"excerpt":{"rendered":" HTML5 es actualmente la tecnolog\u00eda est\u00e1ndar para crear la web. Aprende lo esencial y lo m\u00e1s importante de HTML5 en este art\u00edculo.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"amp_status":"","footnotes":""},"categories":[171],"tags":[161,175,48],"class_list":["post-1157","post","type-post","status-publish","format-standard","hentry","category-programacion-web","tag-diseno-web","tag-html5","tag-programacion-web"],"_links":{"self":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1157","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/comments?post=1157"}],"version-history":[{"count":8,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1157\/revisions"}],"predecessor-version":[{"id":1168,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1157\/revisions\/1168"}],"wp:attachment":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/media?parent=1157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/categories?post=1157"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/tags?post=1157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\u00bfQu\u00e9 es un sitio web?<\/h2>\n
\u00bfQu\u00e9 es una aplicaci\u00f3n web?<\/h2>\n
\u00bfC\u00f3mo est\u00e1 estructurada una p\u00e1gina web?<\/h2>\n
\n
Para qu\u00e9 sirve doctype<\/h2>\n
Etiqueta HEAD<\/h2>\n
<head><\/h3>\n<\/hgroup>\n
Meta charset<\/h2>\n
<meta charset=\u201cutf-8\u201d><\/h3>\n
Etiqueta Title<\/h2>\n
<title> Titulo de mi p\u00e1gina <\/title><\/h3>\n
Etiqueta body<\/h2>\n
\n
Etiqueta Header en HTML5<\/h2>\n
<header><\/h3>\n
<\/a>Etiquetas h1, h2, etc.<\/h2>\n
Hgroup<\/h2>\n
<hgroup>\r\n<h1> Naps Tecnolog\u00eda y Educaci\u00f3n <\/h1>\r\n<h2> Investigaci\u00f3n en Ciencias Computacionales, Inform\u00e1tica y Sistemas <\/h2>\r\n<\/hgroup><\/pre>\n
Etiquetas Nav, ul, ol, li<\/h2>\n
Menus de navegaci\u00f3n<\/h3>\n
<\/a>ul<\/h3>\n
Enlaces<\/h2>\n
<a href=\u201cpagina.html\u201d> Clic aqu\u00ed <\/a><\/h3>\n
Abrir en una pesta\u00f1a diferente<\/h3>\n
<a href=\u201c\u201d target=\u201c_blank\u201d><\/h4>\n
Ir a una secci\u00f3n de la p\u00e1gina<\/h3>\n
Cuando el archivo esta dentro de una carpeta<\/h3>\n
Cuando la carpeta esta en una directorio superior<\/h3>\n
Etiquetas P y span<\/h2>\n
<p><\/h3>\n
Span<\/h3>\n
<span><\/h4>\n
Etiquetas Strong, em<\/h2>\n
<strong><\/h3>\n
<em><\/h3>\n
Salto de l\u00ednea intencional<\/h2>\n
<br><\/h3>\n
Etiqueta Section<\/h2>\n
<section><\/h3>\n
Etiqueta article<\/h2>\n
<article><\/h3>\n
Etiqueta aside<\/h2>\n
<aside><\/h3>\n
Etiqueta div<\/h2>\n
<div><\/h3>\n
Etiqueta footer<\/h2>\n
<footer><\/h3>\n
Etiquetas img, figure, figcaption<\/h2>\n
<img><\/h3>\n
Atributo alt<\/h3>\n
Height y width<\/h3>\n
Etiqueta Figure<\/h3>\n
<figure>\r\n<img>\r\n<figcaption> Mensaje que acompa\u00f1a la imagen <\/figcaption>\r\n<\/figure><\/pre>\n
Audio y video<\/h2>\n
Audio<\/h3>\n
video<\/h3>\n
En conclusi\u00f3n<\/h3>\n