Estructura de contingut HTML: guia completa per crear pàgines sòlides

Inici » Pitó » Estructura de contingut HTML: guia completa per crear pàgines sòlides

Aprendre a estructurar el contingut en HTML és la diferència entre una pàgina que simplement "mostra alguna cosa a la pantalla" i una pàgina fàcil de navegar, accessible i optimitzada per a SEO. Quan el vostre HTML està organitzat amb una jerarquia clara, els navegadors, els motors de cerca i les tecnologies d'assistència entenen a l'instant què significa cada secció i com encaixa tot plegat.

En lloc de pensar en l'HTML com una simple manera de posar etiquetes a una pàgina, és útil veure'l com el pla del vostre document. Amb una estructura sòlida, defineixes on es troba el contingut principal, com es relacionen els encapçalaments, què és la navegació, què és la informació secundària i quines parts descriuen el document en si a la capçalera. En aquesta guia, aprofundirem en l'estructura del contingut en HTML: des de l'esquelet global d'una pàgina fins als encapçalaments, la semàntica, l'accessibilitat i alguns patrons de disseny concrets per a pàgines del món real.

1. L'esquelet global d'un document HTML

Tots els documents HTML comencen amb la mateixa estructura d'alt nivell: doctype, html, head i body. Això pot semblar una frase feta a mida, però cada peça juga un paper crucial en com el navegador analitza i renderitza el vostre contingut i com els motors de cerca interpreten la vostra pàgina.

La primera línia és la declaració de tipus de document, escrita com a en HTML5. Aquesta instrucció no produeix una sortida visible; indica al navegador que utilitzi el mode estàndard en lloc del mode peculiar, evitant els comportaments de renderització antics que poden trencar completament el disseny o el CSS.

Just després del doctype ve l'element arrel , que envolta tot el document. Gairebé tot, tant les metadades del document com la pàgina visible, viu a l'interior … Aquí també és on declareu l'idioma humà del document amb l'atribut lang, per exemple per a anglès o per a l'espanyol d'Espanya.

Declarar l'idioma amb lang és essencial per a l'accessibilitat, el SEO i les eines de traducció. Els lectors de pantalla l'utilitzen per triar les regles de pronunciació correctes, els motors de cerca i els traductors automàtics l'utilitzen per entendre l'idioma principal, i el CSS pot fins i tot orientar-se a estils específics de l'idioma mitjançant selectors com ara [lang|=”fr”] o :lang(en).

Dins de l'element HTML arrel sempre tens dos fills directes: i . La capçalera conté totes les metadades i recursos necessaris per interpretar i presentar la pàgina (codificació, títol, CSS, icones, URL canòniques, etc.), mentre que el cos conté el contingut que els usuaris realment veuen i amb què interactuen a la finestra del navegador.

2. Què pertany a (i per què és important)

La secció de capçalera és invisible per als visitants vidents, però és absolutament fonamental per al comportament, el rendiment i la classificació del vostre lloc web. La informació que poseu aquí guia els motors de cerca, les plataformes socials, els navegadors i els dispositius sobre com gestionar i presentar la vostra pàgina.

Una de les primeres coses a dins hauria de ser la declaració de codificació de caràcters utilitzant . UTF-8 és l'estàndard per a HTML5, admet pràcticament tots els caràcters i emojis i garanteix que els títols, el text, el CSS i el JavaScript s'interpretin correctament independentment de l'idioma o els símbols que utilitzeu.

Cada pàgina també ha de definir un únic i descriptiu element. El contingut de dins … apareix a la pestanya del navegador, als marcadors, a l'historial del navegador i, el més important, com a titular principal en què es pot fer clic a les pàgines de resultats del motor de cerca, tret que se sobreescrigui amb metaetiquetes específiques. Des del punt de vista del SEO, aquesta és una de les peces de text més valuoses del document.

Un altre element meta gairebé obligatori en els dissenys moderns és la declaració de la finestra de visualització. Utilitzant Digues als navegadors mòbils que redimensionin el disseny a l'amplada del dispositiu en comptes de reduir un disseny d'escriptori a una pantalla petita, cosa que és vital per al disseny responsiu i per superar auditories bàsiques d'accessibilitat i dispositius mòbils.

Més enllà del joc de caràcters, el títol i la finestra gràfica, la capçalera és on definiu la majoria de les metadades, els estils i els enllaços clau. Això inclou metadescripcions orientades a SEO, fitxers CSS, icones de llocs web, versions d'idiomes alternatius, URL canòniques, manifests web, preconnexions i molt més. Totes aquestes peces contribueixen indirectament a com s'entén l'estructura del vostre contingut i a com d'usable es percep el vostre lloc web.

Metadades essencials i recursos estructurals

CSS normalment està connectat dins utilitzant . Els fulls d'estil externs mantenen la presentació separada de l'estructura, es poden emmagatzemar a la memòria cau entre pàgines per a un millor rendiment i ajuden a mantenir una única font de veritat per al vostre sistema de disseny.

També podeu incloure CSS en un block within , or even import additional stylesheets from there. Per exemple, els desenvolupadors de vegades utilitzen @import dins d'una etiqueta d'estil per col·locar un full d'estil en una capa en cascada específica o declarar propietats CSS personalitzades (variables) al nivell :root abans de fer-hi referència a tot el lloc web.

El L'element serveix per a més propòsits que només fulls d'estil. Si canvieu l'atribut rel, podeu apuntar a una icona de favicon amb rel="icon", definir versions d'idiomes alternatius amb rel="alternate" i hreflang, especificar una URL canònica amb rel="canonical" o fer referència a manifests d'aplicacions i altres relacions que els navegadors i rastrejadors haurien de conèixer.

Definició d'icones amb garanteix que la teva marca sigui recognoscible a la pestanya del navegador i als marcadors. Podeu especificar diferents mides o tipus (com ara PNG o SVG) i fins i tot proporcionar icones especials per a plataformes com iOS amb rel="apple-touch-icon" o icones de màscara per a pestanyes fixades al Safari.

Els enllaços alternatius són crucials per a les configuracions multilingües o de sindicació de contingut. Quan utilitzeu , per exemple, esteu indicant als motors de cerca que existeix una versió francesa de la mateixa pàgina i a quina combinació d'idioma/regió s'adreça. De la mateixa manera, els enllaços alternatius poden apuntar a canals RSS o variants de PDF si especifiqueu un tipus adequat.

URL canòniques, scripts i els que s'utilitzen rarament

Els enllaços canònics amb rel="canonical" ajuden a resoldre situacions de contingut duplicat indicant quina URL és la font autoritària. Si el mateix article existeix en diverses rutes o es publica de manera creuada en altres dominis, l'URL canònica consolida els senyals de classificació i evita que el motor de cerca hagi d'endevinar quina versió indexar.

JavaScript s'adjunta mitjançant el element, which can either embed inline code or reference an external file through the src attribute. Com que JavaScript bloqueja la renderització per defecte, molts desenvolupadors col·loquen etiquetes de script al final del cos o utilitzen els atributs defer o async perquè el contingut HTML es pugui renderitzar abans que s'executin els scripts.

L'atribut defer indica al navegador que descarregui l'script sense bloquejar el renderitzat i que l'executi després que l'HTML s'hagi analitzat completament. En canvi, async també evita el bloqueig durant la descàrrega però executa l'script tan bon punt està a punt, cosa que pot interrompre el flux d'anàlisi, cosa que pot ser un problema quan l'script depèn d'elements DOM definits més endavant al document.

El L'element, que només apareix a la capçalera, defineix una URL base i una destinació predeterminada per a tots els enllaços relatius. En configurar De fet, li dius al navegador que totes les URL relatives de la pàgina s'han de resoldre des d'aquesta arrel i, opcionalment, obrir-les en un context de navegació específic, com ara una finestra nova o el marc de nivell superior.

Tot i que pot ser potent, té efectes secundaris, especialment per a àncores dins la pàgina i camins de recursos relatius. Només es permet un element base per document, ha d'aparèixer abans de qualsevol URL relativa i transforma àncores simples com ara en sol·licituds d'URL completes amb fragments adjunts a l'href base.

3. La capa de contingut visible: i disposició semàntica

Tot allò que els usuaris veuen i amb què interactuen realment viu dins de element. Aquí és on estructureu el vostre contingut amb elements semàntics que descriuen la funció de cada part de la pàgina: navegació, contingut principal, articles, barres laterals, peus de pàgina i més.

L'HTML5 va introduir un conjunt d'elements de disseny semàntic que van substituir els elements genèrics. contenidors en moltes situacions. Elements com ara , , , , , i descriure el significat en lloc de la mera aparença, cosa que ajuda les tecnologies assistives i els motors de cerca a construir un mapa mental de la teva pàgina.

normalment conté contingut introductori o de navegació per a la pàgina o per a una secció específica. Això pot incloure un logotip, un títol del lloc web, un menú principal o un encapçalament principal. Podeu tenir un encapçalament a nivell de pàgina a prop de la part superior del cos i encapçalaments addicionals dins de seccions o articles quan necessiteu subintroduccions.

està dedicat als blocs de navegació i s'utilitza normalment per a menús principals o grups d'enllaços importants. Podeu col·locar la navegació principal dins d'una capçalera, però la navegació també pot aparèixer en altres llocs, per exemple en una barra lateral o un peu de pàgina, sempre que s'utilitzi per a la navegació i no per a col·leccions genèriques d'enllaços no relacionats.

marca el contingut únic i central de la pàgina i només ha d'aparèixer una vegada per document. Dins de main normalment organitzaràs el teu contingut utilitzant per blocs temàtics, per a peces independents com ara entrades de blog o notícies, i per a informació relacionada però secundària com ara notes al marge, anuncis o navegació complementària.

Seccions, articles, notes a part i peus de pàgina

representa un bloc de contingut temàticament diferent, normalment amb el seu propi encapçalament. Això podria ser un capítol d'un article llarg, un bloc de "Característiques" a la pàgina d'un producte o una part de la pàgina d'inici, com ara "Testimonis" o "Preus". Les seccions ajuden a dividir els documents complexos en fragments lògics.

s'utilitza per a contingut autònom que pot funcionar per si sol fora del context que l'envolta. Alguns exemples són entrades de blog, entrades de documentació, comentaris d'usuaris, notícies o missatges de fòrums. Un article sovint inclou la seva pròpia capçalera (amb títol, autor i data) i peu de pàgina (amb etiquetes, enllaços per compartir o metadades).

està reservat per a contingut que està tangencialment relacionat amb el flux principal, com ara barres laterals, cites, enllaços relacionats o blocs publicitaris. Com que el seu propòsit és suplementari, els lectors de pantalla i altres eines el poden tractar en conseqüència, i els usuaris poden distingir més fàcilment la narrativa principal dels extres secundaris.

apareix al final d'una secció o a la part inferior de tota la pàgina. Un peu de pàgina a nivell de pàgina sol contenir avisos de drets d'autor, informació de contacte, navegació secundària, enllaços legals o crèdits del lloc, mentre que un peu de pàgina a nivell d'article pot contenir biografies d'autors, categories, dates d'actualització o publicacions relacionades.

La flexibilitat d'aquests elements permet barrejar-los i imbricar-los per adaptar-los al disseny, però mantenir el significat previst manté l'HTML portàtil i comprensible. Per exemple, podeu col·locar legítimament "nav" dins de la capçalera o en qualsevol altre lloc del cos, però no hauríeu d'utilitzar "nav" per a conjunts aleatoris d'enllaços que no formen part de la navegació, ni utilitzar "main" diverses vegades per pàgina.

4. Jerarquia d'encapçalaments i estructura textual

Els encapçalaments són l'eix vertebrador de l'estructura del contingut i defineixen la jerarquia de temes i subtemes al llarg del document. L'HTML proporciona sis nivells d'encapçalament, des de (el més important) fins a (menys important) i la manera com els organitzeu afecta tant els lectors humans com els motors de cerca.

Normalment hi ha una sola que expressa el tema principal de la pàgina, seguit de per a seccions primàries i - per a subseccions més profundes. Quan dos encapçalaments comparteixen el mateix nivell, representen seccions germanes, mentre que un encapçalament de nivell inferior introdueix una subsecció imbricada dins de l'anterior de nivell superior.

Els paràgrafs i altre contingut que segueixen un encapçalament pertanyen a la secció definida per aquest encapçalament. Quan apareix un nou encapçalament del mateix nivell, la secció anterior es considera tancada i en comença una de nova. Aquesta estructura implícita és el que utilitzen les tecnologies assistives per construir un esquema que els usuaris poden superar ràpidament.

Saltar nivells arbitràriament, com ara saltar directament de h1 a h4, pot confondre tant les eines automatitzades com els lectors. La recomanació general és avançar pas a pas en la jerarquia: de h1 a h2 per a les subseccions, després opcionalment a h3, i així successivament, descendint només un nivell a la vegada quan s'imbrica el contingut més profundament.

Els navegadors solen aplicar estils per defecte als encapçalaments: mides de lletra més grans, gruix de negreta i espaiat vertical addicional. Aquests estils integrats ja fan que l'estructura sigui visualment evident, però podeu refinar la presentació amb CSS mantenint intacta la jerarquia semàntica subjacent.

Paràgrafs, llistes i semàntica en línia

El contingut de text normal entra a elements, cadascun dels quals representa un paràgraf separat. Mantenir una idea principal per paràgraf millora la llegibilitat i s'alinea amb la manera com les tecnologies assistives permeten als usuaris navegar pels blocs de text.

Llistes ordenades ( ) i llistes no ordenades ( ) amb Els elements són ideals per a informació agrupada com ara passos, funcions o preguntes freqüents. Les llistes ordenades transmeten seqüència o prioritat, mentre que les llistes no ordenades simplement agrupen elements relacionats sense implicar un ordre; ambdues són extremadament útils per estructurar explicacions complexes.

Els elements en línia com ara , , , i altres enriqueixen el contingut sense interrompre el flux d'un paràgraf. comunica una gran importància (i normalment apareix en negreta), emfatitza el text (sovint en cursiva) i crea hipervincles que connecten documents del vostre lloc web o a recursos externs.

Imatges amb es consideren elements substituïts i no envolten el contingut, però encara participen en l'estructura semàntica a través d'atributs com ara alt. L'atribut alt és especialment important per a l'accessibilitat i el SEO, ja que descriu la imatge als usuaris que no la poden veure i als motors de cerca que només analitzen text.

La combinació acurada d'elements a nivell de bloc i en línia permet expressar jerarquia, relacions i èmfasi purament a través d'HTML, deixant els detalls visuals com ara els colors, les fonts i l'espaiat al CSS. Aquesta separació de preocupacions manté el marcatge net i facilita els canvis de disseny més endavant.

5. Accessibilitat i llenguatge en l'estructura del contingut

Un document HTML ben estructurat no només té un aspecte ordenat; és un requisit previ per a l'accessibilitat. Les persones que depenen de lectors de pantalla, navegació amb teclat o altres tecnologies d'assistència depenen de la semàntica HTML per entendre el contingut i moure's pel mateix de manera eficient.

Declaració de l'idioma del document amb lang a L'element és un dels primers passos d'accessibilitat. Quan l'idioma és explícit, els lectors de pantalla seleccionen la pronunciació i els diccionaris correctes, i les eines de traducció automatitzada gestionen el contingut amb més precisió entre regions i dialectes.

També podeu marcar els canvis d'idioma dins del cos utilitzant lang en elements com ara o . Quan un fragment canvia a un idioma diferent, establir lang="fr-CA" o lang="pt-BR" en aquest fragment indica a les eines d'assistència que les regles de pronunciació i lectura haurien de canviar només per a aquesta part.

Més enllà del llenguatge, els encapçalaments, els punts de referència i el text alternatiu formen el nucli de l'estructura accessible. Una jerarquia clara d'encapçalaments, l'ús correcte de main, nav, header, footer, section i aside, a més d'atributs alt significatius a les imatges, permeten que les tecnologies d'assistència creïn un esquema i proporcionin navegació per punts de referència com ara "saltar al contingut principal" o "anar a la navegació".

El color i l'estil visual per si sols no haurien de ser mai l'única manera de transmetre informació important. Un alt contrast, mides de lletra llegibles, estats de focus per als elements interactius i textos d'enllaç descriptius com ara "Més informació sobre la prevenció d'incendis" en lloc de només "Feu clic aquí" formen part de fer que el vostre contingut estructurat sigui utilitzable per al màxim nombre de persones possible.

Validar el vostre HTML i executar comprovacions d'accessibilitat mitjançant eines automatitzades i proves manuals ajuda a descobrir problemes estructurals a temps. Les eines poden detectar atributs alt que falten, imbricació no vàlida, seqüències d'encapçalament trencades o ús incorrecte de punts de referència, tot això es pot corregir directament al vostre marcatge abans que afecti els usuaris reals.

6. Planificació de l'estructura de contingut d'un lloc web

Abans d'escriure una sola etiqueta, val la pena planificar l'estructura lògica del vostre lloc web i les vostres pàgines. Pensar en termes de seccions, prioritats d'informació i fluxos de navegació porta a un HTML més fàcil de mantenir, ampliar i optimitzar per als motors de cerca.

Un punt de partida comú és esbossar un mapa del lloc o un diagrama estructural del lloc web. Això normalment inclou pàgines de nivell superior com ara Inici, Quant a, Serveis, Bloc, Contacte i, a continuació, qualsevol subpàgina o categoria que es ramifiqui a partir d'aquestes, que mostri com els usuaris navegaran entre elles.

Dins d'una sola pàgina, podeu planificar la vostra futura estructura HTML com una sèrie de blocs semàntics. Per exemple, podeu definir una capçalera amb un logotip i una barra de navegació, una àrea principal amb diverses seccions (protagonista, característiques, testimonis, preus), un apartat per al contingut secundari i un peu de pàgina que contingui informació de contacte i enllaços legals.

Assignar encapçalaments a aquests blocs des del principi manté la coherència de la jerarquia h1-h6. Tu decideixes per endavant quin serà l'únic h1, quines seccions mereixen encapçalaments h2 i on són necessaris subtítols més profunds com ara h3 o h4 per explicar temes complexos sense aclaparar el lector.

Des d'una perspectiva de SEO i UX, és intel·ligent col·locar el contingut clau i les seccions importants més aviat al DOM. Els motors de cerca generalment presten més atenció al contingut que es troba a la part superior del document, i els usuaris agraeixen trobar informació principal ràpidament en lloc de desplaçar-se per sobre de llargues introduccions o elements decoratius.

Millors pràctiques per a estructures HTML mantenibles

Feu servir noms de classe i identificadors descriptius per etiquetar els elements estructurals quan sigui necessari, però eviteu sobreimbricar els divs. Classes com .main-nav, .site-header o .sidebar us indiquen d'un cop d'ull què fa un component, cosa que fa que el vostre HTML i CSS siguin molt més fàcils de llegir mesos després.

Mantingueu l'HTML el més pla possible, tot expressant una jerarquia genuïna. Els contenidors profundament imbricats que només existeixen per a l'estil sovint es poden substituir per un CSS més pensat, donant lloc a un marcatge més net i lleuger amb què tothom és més fàcil de treballar.

Agrupa el contingut relacionat dins d'elements semàntics en comptes de dispersar-lo per la pàgina. Per exemple, una entrada de blog hauria d'estar dins d'un article, amb el seu títol, data, autor i contingut junts, mentre que les entrades relacionades o la biografia de l'autor poden estar en un apartat o en un peu de pàgina d'article, clarament separats de la narrativa principal.

Revisa la teva estructura cada vegada que amplies una pàgina o redissenyes una secció. És fàcil que els documents HTML acumulin contenidors puntuals i elements ad-hoc al llarg del temps, de manera que refactoritzar-los periòdicament per tornar-los a una forma semàntica coherent val la pena en termes de manteniment, rendiment i accessibilitat.

Documentar els patrons estructurals, com ara la manera de crear capçaleres, seccions, articles i peus de pàgina, ajuda a mantenir la coherència dels equips grans. Una petita guia interna que expliqui quins elements s'han d'utilitzar per a la navegació, com organitzar els encapçalaments i com marcar els components repetits pot evitar que la base de codi es converteixi en un mosaic estructural.

7. Patrons d'estructura pràctics per a tipus de pàgina comuns

Diferents tipus de pàgines solen compartir patrons estructurals que podeu reutilitzar i adaptar entre projectes. Reconèixer aquests patrons us ajudarà a dissenyar estructures de contingut que semblin naturals per als usuaris i que siguin fàcils d'implementar en HTML.

Una pàgina d'inici típica pot començar amb un global que conté un logotip i un element principal . Això sovint va seguit d'un amb múltiples blocs: una secció principal amb un h1 i una crida a l'acció, una secció de funcions, potser una secció per a testimonis i una secció final que convida els usuaris a posar-se en contacte o registrar-se.

Sota el contingut principal, un normalment proporciona informació global i navegació suplementària. Aquí trobareu enllaços a polítiques de privadesa, condicions del servei, opcions de contacte, xarxes socials i menús secundaris, cosa que facilita la seva cerca sense distreure del contingut principal anterior.

Una pàgina d'entrada de blog és una candidata perfecta per a element. L'article normalment contindria la seva pròpia capçalera amb el títol de la publicació (sovint l'h1 de la pàgina), la data de publicació i els detalls de l'autor, seguit del cos de la publicació, dividit en seccions amb encapçalaments h2/h3, i finalment un peu de pàgina que conté etiquetes, botons per compartir o enllaços de contingut relacionat.

Les barres laterals o panells secundaris es representen naturalment per elements. Poden incloure llistes de publicacions recents, filtres de categories, formularis de subscripció a butlletins o ajuda contextual. Com que "aside" està marcat semànticament com a contingut complementari, les tecnologies assistives el poden presentar com a tal als usuaris.

Les pàgines de contacte i les pàgines de servei reutilitzen els mateixos blocs de construcció, però emfatitzen la claredat i la facilitat d'interacció. Uns encapçalaments clars, uns paràgrafs concisos, uns controls de formulari correctament etiquetats i un ordre de lectura lògic garanteixen que els usuaris puguin trobar com contactar amb tu o entendre la teva oferta sense haver d'endevinar.

8. Elements HTML, atributs i el seu paper en l'estructura

Sota tots aquests patrons, tot en HTML es redueix a elements, etiquetes i atributs. Entendre com funcionen junts us dóna un control precís sobre l'estructura del contingut, els ganxos de presentació i el comportament.

Un element HTML està compost d'una etiqueta d'obertura, atributs opcionals, contingut i, en la majoria dels casos, una etiqueta de tancament. Per exemple, Això és un paràgraf. inclou l'etiqueta d'inici , el node de text i l'etiqueta final , tots els quals junts representen un element de paràgraf.

Els atributs apareixen dins de l'etiqueta d'obertura i proporcionen informació addicional sobre l'element. Vénen com a parells name="value", com ara class="highlight", id="intro" o href="/contact". Alguns atributs són globals i poden aparèixer en qualsevol element (com ara class, id, lang), mentre que d'altres són específics de determinades etiquetes (com ara src per a img o type per a input).

Les classes són especialment importants per estructurar i donar estil a documents més grans. Si assignau la mateixa classe a diversos elements (per exemple, class="important"), podeu aplicar regles CSS comunes o orientar-les a JavaScript, mantenint l'estructura flexible i alhora manejable.

No tots els elements necessiten etiquetes de tancament; alguns són elements buits (void) que no tenen contingut. Elements com , , i Entren en aquesta categoria. Encara participen en la vostra estructura, però només a través dels seus atributs, ja que no envolten cap text intern ni fills.

El World Wide Web Consortium (W3C) manté l'especificació que defineix com funcionen conjuntament tots aquests elements i atributs. Seguir aquests estàndards manté les vostres pàgines interoperables entre navegadors i dispositius, i garanteix que l'estructura de contingut, dissenyada amb cura, es comporti de manera predictible per a tots els visitants.

Posar tot això en pràctica significa tractar l'HTML com l'eix vertebrador semàntic del vostre lloc web: un esquema clar del document, un ús precís dels encapçalaments, un disseny ben pensat amb la pàgina principal, la secció, l'article, el marge i el peu de pàgina, metadades accessibles a la capçalera i atributs significatius a cada element fan que, en conjunt, el vostre contingut sigui més fàcil de llegir, navegar i posicionar-se bé als motors de cerca.