Els primers elements en un document HTML
Cada document HTML a la Web està format per diversos elements. Molts dels elements són molt comuns i es troben en gairebé tots, com ara paràgrafs, encapçalaments, imatges i enllaços. Tan freqüents com aquests elements són, però, opcionals. No els necessitem tècnicament en una pàgina web, encara que hi ha alguna pàgina que falti en aquests elements probablement serà bastant escassa.
A més d'aquests elements HTML opcionals, hi ha altres que realment es requereixen d'una pàgina. La majoria d'aquests elements es troben a l'àrea
de la pàgina HTML. Aquests elements són els que no es mostren a les pàgines web (en la seva major part). Els elements estan amagats per als visitants humans al vostre lloc, però encara són molt útils, ja que transmeten informació al navegador web, així com als motors de cerca, sobre aquesta pàgina.
Tècnicament, només hi ha una etiqueta que s'ha de trobar a la part superior de tots els documents HTML: l'element . Aquest parell d'etiquetes comença i acaba amb la seva pàgina web i permet al navegador saber que tot entre aquestes dues etiquetes és contingut HTML. L'únic que veu sovint abans de l'etiqueta d'obertura és el doctype de les pàgines. Això seria així:
Després de l'etiqueta és aquell parell d'etiquetes
abans esmentat. A l'interior d'aquest parell de etiquetes hi trobareu diversos elements importants, com ara les etiquetes
i <meta>. </p>
<h3> L'element TITLE </h3><p> Sempre haureu d'incloure una <title> vostra pàgina web. Hi ha diversos motius, incloent: </p>
<ol><li> Els motors de cerca utilitzen el TÍTOL com a principal mitjà de catalogació de llocs. Si la vostra pàgina web no té un títol descriptiu, els motors de cerca els donaran un rànquing inferior al d'altres pàgines. Això també és el que es mostra com a <a href="https://ca.eyewated.com/com-establir-un-text-justificat-amb-css/">text de</a> l' <a href="https://ca.eyewated.com/com-establir-un-text-justificat-amb-css/">enllaç</a> a la pàgina de resultats del motor de cerca (també conegut com SERP). </li><li> Es mostra a la part superior de la finestra del navegador o a la pestanya, que descriu la pàgina al navegador. </li><li> És el que s'escriu quan algú marca el vostre lloc. Si la gent marca el vostre lloc, voleu que us recordeu que era el vostre lloc i que no era el "Document sense títol", que és el títol de pàgina predeterminat utilitzat en moltes plataformes de programari de desenvolupament web. </li></ol><p> Atès que l'etiqueta <title> està dissenyada per mostrar una visió general del que és la pàgina, totes les pàgines del vostre lloc han de tenir un títol <title> únic, ja que totes les pàgines del vostre lloc inclouen contingut únic. Intenta mantenir el contingut d'aquesta etiqueta en menys de 60 caràcters. Podeu incloure més, però els motors de cerca retallaran el contingut si arriba a aquest número. </p>
<h3> Meta Informació o Meta Dades </h3><p> <a href="https://ca.eyewated.com/com-les-etiquetes-meta-normalment-afecten-el-vostre-lloc-web/">Les metadades</a> són dades contingudes al <capçal> del vostre document HTML que proporciona informació addicional sobre la seva pàgina web al navegador web i altres dispositius. Podeu incloure informació com ara el nom de l'autor, el programa que s'utilitzava per crear la pàgina, la data de venciment de la pàgina i, potser el més important, les <a href="https://ca.eyewated.com/com-les-etiquetes-meta-normalment-afecten-el-vostre-lloc-web/">descripcions</a> i les <a href="https://ca.eyewated.com/com-utilitzar-paraules-clau-en-html/">paraules clau</a> que siguin rellevants per a la mateixa pàgina. </p>
<p> L'etiqueta META més important que haureu d'incloure en els vostres documents web és, de fet, el joc de caràcters o el conjunt de caràcters. Això és important per a la <a href="https://ca.eyewated.com/meta-charset-tag-en-html5/">seguretat de les vostres pàgines web</a> . </p>
<p> El conjunt de caràcters sempre hauria de ser la primera <a href="https://ca.eyewated.com/conegui-els-fonaments-de-les-linies-i-com-usar-los-en-el-disseny/">línia</a> del vostre HEAD perquè els pirates informàtics no puguin entrar. En el context, al llarg de la resta de les etiquetes que hem cobert, voldríem: </p>
<p> <! doctype html> <br> <html> <br> <capçalera> <br> <meta charset = "utf-8"> <br> <title> Aquest és el contingut del títol </ title> <br> </ head> <br> </ html> </p>
<h3> Més informació sobre les etiquetes meta </h3><p> Les etiquetes meta són molt importants per obtenir una bona classificació als motors de cerca, però si només teniu temps d'escriure un <a href="https://ca.eyewated.com/com-les-etiquetes-meta-normalment-afecten-el-vostre-lloc-web/">títol descriptiu</a> o metaetiquetes, <strong>escriviu el títol</strong> . El títol del document anirà més enllà de la <a href="https://ca.eyewated.com/com-utilitzar-paraules-clau-en-html/">ubicació</a> del <a href="https://ca.eyewated.com/com-utilitzar-paraules-clau-en-html/">motor de cerca</a> que les etiquetes meta. </p>
<ul><li> Màgia amb Meta Tags: <a href="https://ca.eyewated.com/etiquetes-meta-utils/">utilitzeu etiquetes meta</a> per obtenir una <a href="https://ca.eyewated.com/com-les-etiquetes-meta-normalment-afecten-el-vostre-lloc-web/">millor ubicació del motor de cerca</a> </li><li> <a href="https://ca.eyewated.com/com-sutilitza-letiqueta-meta-refresh/">Més etiquetes meta</a> : va més enllà de les paraules clau i les descripcions per obtenir el màxim rendiment de les vostres <a href="https://ca.eyewated.com/com-les-etiquetes-meta-normalment-afecten-el-vostre-lloc-web/">dades meta</a> </li><li> Enllaços de Meta Tag: enllaços addicionals per a l'ajuda de l'etiqueta meta </li></ul><h3> Altres elements </h3><p> A més dels elements que ja hem cobert, altres coses importants que trobareu al <capçal> d'una pàgina són enllaços als fitxers CSS de Javascript d'un lloc, ja sigui com a enllaços a fitxers JS o com a codi Javascript en línia. </p>
<p> Article original de Jennifer Krynin. Editat per Jeremy Girard el 21/07/17 </p>
</div>
<div class="amp-related-wrapper">
<h2>Alike posts</h2>
<div class="amp-related-content">
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/crea-un-mapa-del-lloc-abans-de-construir-el-teu-lloc/">Crea un mapa del lloc abans de construir el teu lloc</a></h3>
<div class="amp-related-meta">
Disseny web i Dev </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/conegui-els-atributs-de-letiqueta-marc/">
<amp-img src="https://exse.eyewated.com/pict/a4979fed709d33ef-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/conegui-els-atributs-de-letiqueta-marc/">Conegui els atributs de l'etiqueta marc</a></h3>
<div class="amp-related-meta">
Disseny web i Dev </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/anatomia-dun-fitxer-rss/">
<amp-img src="https://exse.eyewated.com/pict/521b5b72b23d2f90-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/anatomia-dun-fitxer-rss/">Anatomia d'un fitxer RSS</a></h3>
<div class="amp-related-meta">
Disseny web i Dev </div>
</div>
</div>
<div class="amp-related-content">
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/com-configurar-un-alies-dns-amb-apache/">Com configurar un àlies DNS amb Apache</a></h3>
<div class="amp-related-meta">
Disseny web i Dev </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/que-incloure-en-la-seva-cartera-de-disseny-web/">
<amp-img src="https://exse.eyewated.com/pict/9b445c1977243099-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/que-incloure-en-la-seva-cartera-de-disseny-web/">Què incloure en la seva cartera de disseny web</a></h3>
<div class="amp-related-meta">
Disseny web i Dev </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/flux-normal/">
<amp-img src="https://exse.eyewated.com/pict/b7890fc02c693579-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/flux-normal/">Flux normal</a></h3>
<div class="amp-related-meta">
Disseny web i Dev </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/quan-sha-de-crear-un-lloc-web-basat-en-la-base-de-dades/">
<amp-img src="https://exse.eyewated.com/pict/66204897da253105-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/quan-sha-de-crear-un-lloc-web-basat-en-la-base-de-dades/">Quan s'ha de crear un lloc web basat en la base de dades?</a></h3>
<div class="amp-related-meta">
Disseny web i Dev </div>
</div>
</div>
<div class="amp-related-content">
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/el-disseny-web-es-totes-hores/">El disseny web és totes hores</a></h3>
<div class="amp-related-meta">
Disseny web i Dev </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/els-avantatges-i-inconvenients-dafegir-comentaris-al-vostre-lloc-web/">
<amp-img src="https://exse.eyewated.com/pict/f3f2f8cb74c62e8a-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/els-avantatges-i-inconvenients-dafegir-comentaris-al-vostre-lloc-web/">Els avantatges i inconvenients d'afegir comentaris al vostre lloc web</a></h3>
<div class="amp-related-meta">
Disseny web i Dev </div>
</div>
</div>
</div>
<div class="amp-related-wrapper">
<h2>See Newest</h2>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/ibm-thinkpad-r40/">
<amp-img src="https://exse.eyewated.com/pict/6d3c7e079c7533fb-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/ibm-thinkpad-r40/">IBM Thinkpad R40</a></h3>
<div class="amp-related-meta">
Guies de compra </div>
</div>
</div>
<div class="amp-related-content">
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/thx-anuncia-laplicacio-tune-up-a-lhome-theater/">THX anuncia l'aplicació Tune-Up a l'Home Theater</a></h3>
<div class="amp-related-meta">
Comentaris del producte </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/7-maneres-de-trobar-contrasenyes-perdides-de-windows/">
<amp-img src="https://exse.eyewated.com/pict/61363a6515ee32e6-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/7-maneres-de-trobar-contrasenyes-perdides-de-windows/">7 maneres de trobar contrasenyes perdides de Windows</a></h3>
<div class="amp-related-meta">
Windows </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/maneres-dadministrar-lus-de-dades-de-xarxa-dequips-mobils/">
<amp-img src="https://exse.eyewated.com/pict/5bc930c7832540af-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/maneres-dadministrar-lus-de-dades-de-xarxa-dequips-mobils/">Maneres d'administrar l'ús de dades de xarxa d'equips mòbils</a></h3>
<div class="amp-related-meta">
Internet i xarxa </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/els-millors-videojocs-x-com/">
<amp-img src="https://exse.eyewated.com/pict/08478693c5ab3512-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/els-millors-videojocs-x-com/">Els millors videojocs X-COM</a></h3>
<div class="amp-related-meta">
Jocs </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/guia-dun-usuari-per-escriure-un-fitxer-de-tipus-mime-de-epub/">
<amp-img src="https://exse.eyewated.com/pict/5278576df6c73509-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/guia-dun-usuari-per-escriure-un-fitxer-de-tipus-mime-de-epub/">Guia d'un usuari per escriure un fitxer de tipus MIME de EPUB</a></h3>
<div class="amp-related-meta">
Disseny web i Dev </div>
</div>
</div>
</div>
<div class="amp-related-wrapper">
<h2>Sapid posts</h2>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/3-maneres-dorganitzar-la-teva-colleccio-de-musica-mp3/">
<amp-img src="https://exse.eyewated.com/pict/85b2d72674753257-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/3-maneres-dorganitzar-la-teva-colleccio-de-musica-mp3/">3 maneres d'organitzar la teva col·lecció de música MP3</a></h3>
<div class="amp-related-meta">
Web i cerca </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/com-arrossegar-i-deixar-anar-a-lipad/">
<amp-img src="https://exse.eyewated.com/pict/f3ab7466f9b8334c-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/com-arrossegar-i-deixar-anar-a-lipad/">Com arrossegar i deixar anar a l'iPad</a></h3>
<div class="amp-related-meta">
IPad </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/reproductors-i-discos-blu-ray-de-4k-ultra-hd-el-que-necessites-saber/">
<amp-img src="https://exse.eyewated.com/pict/cc659a2c53503d79-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/reproductors-i-discos-blu-ray-de-4k-ultra-hd-el-que-necessites-saber/">Reproductors i discos Blu-ray de 4K Ultra HD: el que necessites saber</a></h3>
<div class="amp-related-meta">
Guies de compra </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/tutorial-de-configuracio-de-privadesa-de-facebook/">
<amp-img src="https://exse.eyewated.com/pict/093e07bfedc234fb-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/tutorial-de-configuracio-de-privadesa-de-facebook/">Tutorial de configuració de privadesa de Facebook</a></h3>
<div class="amp-related-meta">
Mitjà de comunicació social </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/com-compartir-la-connexio-a-internet-a-windows/">
<amp-img src="https://exse.eyewated.com/pict/235d7f94854739ee-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/com-compartir-la-connexio-a-internet-a-windows/">Com compartir la connexió a Internet a Windows</a></h3>
<div class="amp-related-meta">
Internet i xarxa </div>
</div>
</div>
<div class="amp-related-content">
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/trieu-lestil-de-notificacio-de-correu-nou-al-correu-mac-os-x/">Trieu l'estil de notificació de correu nou al correu Mac OS X</a></h3>
<div class="amp-related-meta">
Macs </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/com-fer-un-degradat-personalitzat-a-gimp/">
<amp-img src="https://exse.eyewated.com/pict/95e63c3fce993f56-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/com-fer-un-degradat-personalitzat-a-gimp/">Com fer un degradat personalitzat a GIMP</a></h3>
<div class="amp-related-meta">
Programari </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/que-son-els-dos-els-tres-i-els-tres-en-lanimacio/">
<amp-img src="https://exse.eyewated.com/pict/dcedc2919c1b33c3-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/que-son-els-dos-els-tres-i-els-tres-en-lanimacio/">Què són els dos, els tres i els tres en l'animació?</a></h3>
<div class="amp-related-meta">
Programari </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/indesign-frame-and-shape-tools/">
<amp-img src="https://exse.eyewated.com/pict/a827f5cb58e0340f-120x86.gif" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/indesign-frame-and-shape-tools/">InDesign Frame and Shape Tools</a></h3>
<div class="amp-related-meta">
Programari </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/que-podeu-fer-amb-lapple-watch-sense-un-telefon-vinculat/">
<amp-img src="https://exse.eyewated.com/pict/97be0c01d26f306d-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/que-podeu-fer-amb-lapple-watch-sense-un-telefon-vinculat/">Què podeu fer amb l'Apple Watch sense un telèfon vinculat</a></h3>
<div class="amp-related-meta">
Wearables </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/millors-complements-i-accessoris-per-a-la-llar-a-casa/">
<amp-img src="https://exse.eyewated.com/pict/d19c21b63e3c3b4c-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/millors-complements-i-accessoris-per-a-la-llar-a-casa/">Millors complements i accessoris per a la llar a casa</a></h3>
<div class="amp-related-meta">
Guies de compra </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/revisio-lookout-1-3-0-complement-de-cerca-doutlook/">
<amp-img src="https://exse.eyewated.com/pict/d4402cdab3b532a4-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/revisio-lookout-1-3-0-complement-de-cerca-doutlook/">Revisió Lookout 1.3.0 - Complement de cerca d'Outlook</a></h3>
<div class="amp-related-meta">
Correu electrònic i missatgeria </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/canon-eos-7d-dslr-review/">
<amp-img src="https://exse.eyewated.com/pict/73a29f93774333b2-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/canon-eos-7d-dslr-review/">Canon EOS 7D DSLR Review</a></h3>
<div class="amp-related-meta">
Comentaris del producte </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/com-bloquejar-anuncis-al-vostre-ipad/">
<amp-img src="https://exse.eyewated.com/pict/4570d6e6335c3369-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/com-bloquejar-anuncis-al-vostre-ipad/">Com bloquejar anuncis al vostre iPad</a></h3>
<div class="amp-related-meta">
IPad </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/on-veure-pellicules-i-videos-gratuits-en-linia/">
<amp-img src="https://exse.eyewated.com/pict/4be5cbb280c83481-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/on-veure-pellicules-i-videos-gratuits-en-linia/">On veure pel·lícules i vídeos gratuïts en línia</a></h3>
<div class="amp-related-meta">
Web i cerca </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/ipod-touch-tot-el-que-necessites-saber/">
<amp-img src="https://exse.eyewated.com/pict/038844eec0e9344d-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/ipod-touch-tot-el-que-necessites-saber/">IPod touch: tot el que necessites saber</a></h3>
<div class="amp-related-meta">
IPhone i iPod </div>
</div>
</div>
</div></article>
<footer class="amp-wp-footer">
<div class="amp-wp-footer-inner">
<a href="#" class="back-to-top">Back to top</a>
<p class="copyright">
© 2024 ca.eyewated.com </p>
<div class="amp-wp-social-footer">
<a href="#" class="jeg_facebook"><i class="fa fa-facebook"></i> </a><a href="#" class="jeg_twitter"><i class="fa fa-twitter"></i> </a><a href="#" class="jeg_google-plus"><i class="fa fa-google-plus"></i> </a><a href="#" class="jeg_pinterest"><i class="fa fa-pinterest"></i> </a><a href="" class="jeg_rss"><i class="fa fa-rss"></i> </a>
</div>
</div>
</footer>
<div id="statcounter">
<amp-pixel src="https://c.statcounter.com/12022999/0/02d06b5d/1/">
</amp-pixel>
</div>
</body>
</html>
<!-- Dynamic page generated in 1.224 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2019-10-03 21:43:07 -->
<!-- 0.001 -->