Estructura de HTML5

EstructuraHTML5
EstructuraHTML5
<header>
<nav>
<secon>
<aside>
<footer>
<arcle>
<gure>
<gcapon>
<h1>....<h6>
Validadoresdecdigohtml5
Organizacin
Equetasnuevasyviejas
Loprimeroquehayquehaceresponer<!DOCTYPEHTML>antesdelaetiqueta<html>.
EsunDOCTYPEmuchomssimplificadoquexHTML(cuyasreglassiguensiendousadas)
ytepermiteusartodaslashabilidadesdeHTML5sinquenadadeloqueyatienes
programadodejedefuncionar.Alaetiqueta<html>leaadimoselatributolangparaindicar
elidioma<htmllang="es">
LasprincipalesetiquetasHTML5nuevasnotienenunarepresentacinespecialenpantalla.
Todassecomportancomoun<div>oun<span>.P
erocadaunatieneunsignificado
semnticosuperioraunsimpledivospan.
<header>
Esteelementopresentainformacinintroductoriaypuedeseraplicadoendiferentes
seccionesdeldocumento.Tieneelpropsitodecontenerlacabeceradeunaseccinpero
tambinpuedeserutilizadoparaagruparndices,formulariosdebsqueda,logos,etc
<nav>
Esteelementoindicaunaseccindeenlacesconpropsitosdenavegacin,comomenso
ndices.Notodoslosenlacesdentrodeunapginawebtienenqueestardentrodeun
elemento<nav>,soloaquellosqueformanpartesdebloquesdenavegacin.
Normalmenteenun<nav>seutilizaunelemento<ul>anidandoelementos<li>conlas
opcionesdelmen.
<section>
Esteelementorepresentaunaseccingeneraldeldocumento.Esusualmenteutilizadopara
construirvariosbloquesdecontenido(porejemplo,columnas)conelpropsitodeordenar
elcontenidoquecomparteunacaractersticaespecfica,comocaptulosopginasdeun
libro,grupodenoticias,artculos,etc
Elelementodeseccinnoesunelementocontenedorgenrico.Cuandosenecesitaun
elementosloconfinesdeestilo,seutilizaelelementodivensulugar.
Todaslasseccionesdeberanllevarenprimerlugar<h1>.....<h6>paraseridentificadas.
Unejemploseraunlistadodenoticias:
<section>
<header><h1>Listado

de

noticias</h1></header>
<article><header><h2>Noticia

1</h2></header></article>


</section>
<aside>
Esteelementorepresentacontenidoqueestrelacionadoconelcontenidoprincipalperono
espartedelmismo.Ejemplospuedensercitas,informacinenbarraslaterales,publicidad,
etc
Elelemento<aside>podraestarubicadodelladoderechooizquierdodenuestrapginade
ejemplo,laetiquetanotieneunaposicinpredefinida.
<footer>
Esteelementorepresentainformacinadicionalsobresuelementopadre.Porejemplo,un
elemento<footer>insertadoalfinaldelcuerpoproveerinformacinadicionalsobreel
cuerpodeldocumento,comoelpienormaldeunapginaweb.Puedeserusadonosolo
paraelcuerposinotambinparadiferentesseccionesdentrodelcuerpo,otorgando
informacinadicionalsobreestasseccionesespecficas.
<article>
Esteelementorepresentaunaporcinindependientedeinformacinrelevante(porejemplo,
cadaartculodeunperidicoocadaentradadeunblog).Elelemento<article>puedeser
anidadoyusadoparamostrarunalistadentrodeotralistadetemsrelacionados,como
comentariosdeusuariosenentradasdeblogs,porejemplo.
Esteelementodeberatenerprincipalmenteunttulo(unheaderconunh1h6)ypodra
tenerunfooter(conlafechadepublicacin,elautorocualquierotrainformacinadicional)y
uncuerpoconeldetalle.
<figure>
Esteelementorepresentaunaporcinindependientedecontenido(porejemplo,imgenes,
diagramasovideos)quesonreferenciadasdesdeelcontenidoprincipal.Estaes
informacinquepuedeserborradasinafectarelfluidodelrestodelcontenido.
<figcaption>
Esteelementoesutilizadoparamostrarunaleyendaopequeotextorelacionadoconel
contenidodeunelemento<figure>,comoladescripcindeunaimagen.
<h1>....<h6>
Deberahaberunnico<h1>.
Porejemploenlaetiqueta<header>usaramos<h1>paraproporcionarunttuloycuando
tengamosqueponerttulosalasseccionesoartculosusar<h2><h3>....
Validadoresdecdigohtml5
https://validator.w3.org/nu/
https://html5.validator.nu/
Organizacin
En la partesuperior,Cabecera,seencuentraelespaciodondeusualmenteseubicaellogo,
ttulo,subttulosyunacortadescripcindelsitiowebolapgina.
Inmediatamente debajo, podemos ver la Barra de Navegacin en la cual casi todos los
desarrolladores ofrecen un men o lista de enlaces con el propsito de facilitar la
navegacin a travs del sitio. Los usuarios son guiados desde esta barra hacia las
diferentespginasodocumentos,normalmentepertenecientesalmismositioweb.
El contenido ms relevante de una pgina web se encuentra, en casi todo diseo, ubicado
en su centro. Esta seccin presenta informacin y enlaces valiosos. La mayora de las
veces es dividida envariasfilasycolumnas.Enelejemplodelafiguraseutilizaronsolodos
columnas: Informacin Principal y Barra Lateral, pero esta seccin es extremadamente
flexible. El contenido presentado en esta parte del diseo es usualmente de alta prioridad.
En el diseo de ejemplo, Informacin Principal podra contener una lista de artculos,
descripcin de productos, entradas de un blog o cualquier otra informacin importante,yla
Barra Lateral podramostrarunalistadeenlacesapuntandohaciacadaunoseesostems.
En un blog, por ejemplo, esta ltima columna ofrecer una lista de enlaces apuntando a
cadaentradadelblog,informacinacercadelautor,etc
En la base de un diseo web siempre nos encontramos con una barra ms que aqu
llamamos Institucional. La nombramos de esta manera porque esta es el rea en donde
normalmentesemuestrainformacinacercadelsitioweb,elautorolaempresa,ademsde
algunos enlaces con respecto a reglas, trminos y condicionesytodainformacinadicional
que el desarrollador considere importante compartir. La barra Institucional es un
complemento de la Cabecera y es parte de lo que se considera la estructura esencial de
unapginaweb,comopodemosapreciarenelsiguienteejemplo:
Esta figura es una representacin de unblognormal.Enesteejemplosepuedeclaramente

identificarcadapartedeldiseoconsideradoanteriormente.
1.Cabecera
2.BarradeNavegacin
3.SeccindeInformacinPrincipal
4.BarraLateral
5.ElpieolabarraInstitucional
HTML5 considera esta estructura bsica y provee nuevos elementos para diferenciar y
declarar cada una de suspartes.Apartirdeahorapodemosdeciralnavegadorparaques
cadaseccin:

Ejemplos

Etiquetasnuevasyviejas
http://www.desarrolloweb.com/de_interes/html5completahojaresumen4884.html#contenid
o_externo
hps://es.scribd.com/document/24192622/HTML5VisualCheatSheetReloaded#fullscreen&from_
embed
Ejemplodecdigo:carpetaarticulosenhtml
<!DOCTYPEHTML>
<htmllang="es">
<head>
<title>PruebaHTML5estructura1</title>
<linkrel="stylesheet"type="text/css"href="ejemplo1.css"title="miEjemplo"media="all"/>
</head>
<body>
<header>
<h1>PginaenHTML5</h1>
<h2>Subttulodelapgina</h2>
</header>
<nav>
<p><ahref="#">Enlace1</a></p>
</nav>
<section>
<h2>Parteprincipaldelapgina:Ttulo</h2>
<h3>Subttulodelaparteprincipal.</h3>
<article>
<h3>Artculoprimero</h3>
<p>Loremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummy
nibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.Utwisi
enimadminimveniam,quisnostrudexercitationullamcorpersuscipitlobortis
nislutaliquipexeacommodoconsequat.</p>
</article>
<article>
<h3>Artculosegundo</h3>
<p>Duisautemveleumiriuredolorinhendrerit
invulputatevelitessemolestieconsequat,velillumdoloreeufeugiatnulla
facilisisatveroerosetaccumsanetiustoodiodignissimquiblanditpraesent
luptatumzzrildelenitaugueduisdoloretefeugaitnullafacilisi.
Namlibertemporcumsolutanobiseleifendoptionconguenihilimperdiet
domingidquodmazimplaceratfacerpossimassum.Typinonhabentclaritatem
insitamestususlegentisiniisquifaciteorumclaritatem.Investigationes
demonstraveruntlectoreslegeremeliusquodiileguntsaepius.</p>
</article>
<article>
<h3>Artculotercero</h3>
<p>Claritasestetiamprocessusdynamicus,quisequiturmutationemconsuetudium
lectorum.
Mirumestnotarequamlitteragothica,quamnuncputamusparumclaram,
anteposueritlitterarumformashumanitatisperseaculaquartadecimaetquintadecima.
Eodemmodotypi,quinuncnobisvidenturparumclari,fiantsollemnesinfuturum.</p>
</article>
<br/><br/>
</section>
<aside>
<divid="anuncio1">
<h2>Espacioreservadoparapublicidad</h2>
<h2>Annciateaqu</h2>
<p>DaaconocertuempresaonegocioenInternetanuncindoteen
esteespacio.<p>
<p>Interesadosllamaraltelefono000_000_000
contactaren<ahref="http://www.prueba.org/contacto">xyz@xyzmail.com</a></p>
</div>
</aside>
<footer>
<h1>PginadelmanualdeHTML5porAnyelguti</h1>
<h2>Contactaconnosotros:<a
href="http://www.prueba.org/contacto">aprendeweb@ymail.com</a></h2>
<br/>
</footer>
</body>
</html>

otroejemplo:carpetamensajes
otroejemplo:carpetaDiseoGrficoPuertoVallarta

Estructura de HTML5

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Estructura de HTML5

Hochgeladen von

Copyright:

Verfügbare Formate

EstructuraHTML5

Esta figura es una representacin de unblognormal.Enesteejemplosepuedeclaramente

Das könnte Ihnen auch gefallen