Estructura HTML5

uRMiguel · #1 (**permalink**) 30/10/2012, 13:56

Hola,

Soy nuevo en el foro y en este mundillo del diseño web y tengo alguna dudilla.

Expongo: Este verano pasado navegando por internet me dio por aprender a crear páginas web en HTML. Aprendí en la versión 4. Usaba divs y tal para estructurar algunas web sencillas que hacia para practicar. El otro dia mis padres me regalaron un libro para aprender a programar en HTML5 y observé los cambios que introducía como la nueva estructura (header, nav y tal). Pues yo tan ilusionado me fui para mi ordenador y empece un nuevo sitio web con las etiquetas nuevas, pero para mi sorpresa estas no funcionaron y el texto se apegotonó en una parte de la pantalla, es decir, el texto no se estructuró según lo previsto. Sigo sin entender que pasa, ¿He de poner la etiqueta <body>?¿Que he de poner en la declaración del principio exactamente?¿Mozilla no funciona bien con estas etiquetas?¿Son los programas que uso para editar texto (Notepad de toda la vida y Notepad++)?

Tambien tengo otro problema con el Notepad++. La etiqueta <nav> no la reconoce, pero si lo hace cuando pongo <navegacion> (aunque como he dicho antes, no me funciona). ¿Que ocurre?

Gracias

pzin · #2 (**permalink**) 30/10/2012, 14:08

Me sorprende que Notepad++ no tenga soporte para nav, aunque no lo sé. ¿Lo tienes actualizado?

Respecto a tu problema, parece ser que estás viendo la página desde un navegador que no soporta HTML5 —versiones antiguas del navegador.
Aunque no sé porqué dudas de poner body. Sigue siendo necesario usar esa etiqueta ya que es ahí donde está la página web en si.

Luego revisa, por si acaso, que tengas bien definido el DOCTYPE.

mariogl84 · #3 (**permalink**) 01/11/2012, 12:40

Algunos navegadores dan por defecto un display:inline a las nuevas etiquetas de html5, necesitas hacer un reset para que todos le den display:block. O usas estas líneas:

Código:

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

O, más aconsejable, usa un reset de html5, como por ejemplo éste: http://html5doctor.com/html-5-reset-stylesheet/

Recuerda que cualquiera de las dos soluciones tiene que cargarse antes que tu css. Suerte.

uRMiguel · #4 (**permalink**) 02/11/2012, 06:06

Gracias a los dos. Ya me funciona, ero un problema de versiones, actualizando mozilla y el notepad va todo perfectamente.
Lo del body lo he puesto porque en algunos tutoriales lo omiten cuando escriben en HTML5, no se si porque lo dan por sentado que va ahi o porqué realmente no hace falta ponerlo con la nueva versión del lenguaje.

mariogl84 · #5 (**permalink**) 02/11/2012, 07:01

Cuidado, te funciona a ti, pero si tú tenías esa versión de firefox también habrá mucha gente que la tenga, y verán tu web como la veías antes.

tutorias · #6 (**permalink**) 02/11/2012, 13:35

Un saludo. está disponible la nueva versión de Notepad c++
http://notepad-plus-plus.org/

Cita:

Iniciado por uRMiguel

Hola,

Soy nuevo en el foro y en este mundillo del diseño web y tengo alguna dudilla.

Expongo: Este verano pasado navegando por internet me dio por aprender a crear páginas web en HTML. Aprendí en la versión 4. Usaba divs y tal para estructurar algunas web sencillas que hacia para practicar. El otro dia mis padres me regalaron un libro para aprender a programar en HTML5 y observé los cambios que introducía como la nueva estructura (header, nav y tal). Pues yo tan ilusionado me fui para mi ordenador y empece un nuevo sitio web con las etiquetas nuevas, pero para mi sorpresa estas no funcionaron y el texto se apegotonó en una parte de la pantalla, es decir, el texto no se estructuró según lo previsto. Sigo sin entender que pasa, ¿He de poner la etiqueta <body>?¿Que he de poner en la declaración del principio exactamente?¿Mozilla no funciona bien con estas etiquetas?¿Son los programas que uso para editar texto (Notepad de toda la vida y Notepad++)?

Tambien tengo otro problema con el Notepad++. La etiqueta <nav> no la reconoce, pero si lo hace cuando pongo <navegacion> (aunque como he dicho antes, no me funciona). ¿Que ocurre?

Gracias