XHTML strukturering 2: Fallstudie: W3school strukturering av märken

Under alla omständigheter, hoppa inte över detta avsnitt. Läsning av detta kapitel förbättrar dina färdigheter, ger din webbplats en diet och gör att du får en klarare förståelse för skillnaden mellan markering och design. Tankarna i detta kapitel är enkla att lära sig, men de kan förbättra webbplatsens prestanda och göra det bekvämare att designa, skapa och uppdatera webbplatser.

I detta avsnitt lär du dig hur man skriver logiska och kompakta märken som gör det möjligt att minska bandbreddstrafiken med ungefär 50%, samtidigt som du minskar serverns belastning och stress och förkortar webbplatsens laddningstid. Genom att ta bort de element som presterar dåligt och ändra de dåliga vanor som inte har något gott att ge, kan vi uppnå de ovan nämnda målen.

Dessa dåliga vanor plågar många webbplatser på Internet, särskilt de som blander CSS-kod med huvudsakligen tabellbaserade layouter. Detta är en klumpig och ineffektiv metod, även för designers som har erfarenhet inom andra områden. Dessutom är sannolikheten för att detta problem uppstår lika stor, oavsett om det är webbplatser som skriver kod för hand eller de som skapar webbplatser med hjälp av synliga redigeringsverktyg, som Dreamweaver och GoLive.

Detta avsnitt kommer att presentera dessa vanliga fel så att du kan känna igen och förhindra dem, och lära dig hur du kan rätta till dem. Vi utforskar detaljerat unika identifieraregenskaper (id) och visar hur de gör det möjligt för dig att skriva mycket kompakta XHTML-kod, oavsett om du skapar en blandad layout eller en ren CSS-layout.

Måste varje element struktureras?

Som vi nämnde i föregående avsnitt kan varje element struktureras, CSS kan göra en ordnad eller oordnad lista visa som en heltäckande navigationsmeny, med till och med en kontrasteffekt på knappar. Dokumentets innehåll kan markeras med vanliga element, som indikerar deras semantiska roll i webbplatsdesignen genom specifika strukturerade egenskaper.

Vi skapade den första kinesiska testversionen av CodeW3C.com år 2006, och vi använde CSS för layout redan från början och XHTML för att strukturerar dokumentet. Varje element i detta är strukturerat, från rubriker till listor och till och med stycken. Du kan se att hemknappen och de sekundära menyns knappar på varje sida på CodeW3C har en kontrasteffekt. Här är XHTML-koden för dessa två komponenter:

<div id="header"><h1><a href="/">codew3c online instruktioner</a></h1></div>
<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="html-lärning">html-lärning</a></li>
<li id="x"><a href="/x.asp" title="XML-lärning">XML-lärning</a></li>
<li id="b"><a href="/b.asp" title="webbläsar-skript">webbläsar-skript</a></li>
<li id="s"><a href="/s.asp" title="Server-side skript">Server-side skript</a></li>
<li id="d"><a href="/d.asp" title="dot net handledning">dot net handledning</a></li>
<li id="m"><a href="/m.asp" title="Multimedia handledning">Multimedia handledning</a></li>
<li id="w"><a href="/w.asp" title="Bygg en webbplats">Bygg en webbplats</a></li>
</ul>
</div>

div, id och andra hjälpare

Om den används korrekt kan div bli en utmärkt hjälpare för strukturerad markering, medan id är ett förvånande litet verktyg som ger dig förmågan att skriva mycket kompakta XHTML, och att巧妙地 använda CSS, samt att lägga till komplexa och eleganta beteenden till webbplatsen genom standarddokumentobjektmodellen (DOM).

W3C definierar så här div i sin senaste XHTML2-drafts strukturmodell för XHTML:

div-elementet, genom att samarbeta med egenskaper som id, class och role, erbjuder en allmän mekanism för att lägga till extra struktur till dokumentet. Denna elementet definierar inte stilen för innehållet. Därför kan skapare använda detta element tillsammans med style-scheman, xml:lang, egenskaper och så vidare för att göra XHTML anpassad till sina egna behov och smak.

div 是 division 的简写。division 意为分割、区域、分组。比方说，当你将一系列的链接组合在一起，就形成了文档的一个 division。

确定结构的通用机制

所有编写 HTML 的人对段落和标题这类常见的元素都很熟悉，但是有些人对 div 就可能不那么熟悉了。在W3C的描述中我们可以找到理解 div 元素的关键，“一种添加结构的通用机制。”

在本站的首页，我们将教程目录列表封装于一个 div 之中，这是因为教程目录并不是正文的任何元素的一部分。其中，h2元素标记每个教程的标题，同时 ul 列表元素标记每个教程的详细列表。但是在更大更具体的意义中，这个教程目录扮演了一个结构化的角色，即二级导航组件。为了强调这个角色，我们使用 navsecond 这个 id 标注这个 div。

你可以使用任何命名。"Gladys" 和 "orangebox"都完全符合 XHTML 的命名规则。但是语义的 (semantic) 或者元结构化 (meta-structural) 的命名是最好的（即能够解释其中元素所执行功能的命名）。

När kunden bestämmer sig för att använda blått, tycker du att det är mycket dumt att namnge en del av webbplatsen som orangebox (orange låda). I följande fall tycker du att du är ännu dummare, när det endast återstår sex månader till leverans, börjar du justera stilmåtten och kan inte komma ihåg vad "Gladys" (en kvinnlig förnamn) representerar, om det är navigationsområdet, sidopanelen eller sökfältet.

Därför hjälper det att beteckna id som "menu", "content" eller "searchform" att komma ihåg. Vidare är markering inte detsamma som design, en välstrukturerad sida kan formatteras i den form du önskar. Detta resulterar i att du, oavsett om du använder ren CSS-layout eller en blandad layout, helt förändrar din vana att tänka och skapa med markeringar för presentation.

id mot class

id-attribut är inget nytt för XHTML; class-attribut eller div-element är likaså. De kan spåras tillbaka till HTML-åldern. Id-attributet tilldelar en unik namn till ett element. Varje namn får endast användas en gång på den tilldelade sidan. ( Till exempel, om din sida innehåller en div med id "content", kan ingen annan div eller annat element använda detta namn. Å andra sidan kan class-attribut användas flera gånger i sidan ( till exempel kan fem stycken på sidan använda class-namnet "small" eller "footnote" ). Följande markeringar hjälper till att förtydliga skillnaden mellan id och class:

<div id="searchform">Komponenter för sökformulär placeras här. Detta
en av sidans sektioner är unik.</div>
<div class="blogentry">
   <h2>I dagens blogginlägg</h2>
   <p>Blogginnehållet finns här.</p>
   <p>Här är ett annat stycke av blogginnehåll.</p>
   <p>Liksom det kan finnas många stycken på en sida, så också
   det kan finnas många inlägg i en blogg. En bloggsida kan använda
   flera exemplar av klassen "blogentry" (eller något annat
   class).</p>
</div>
<div class="blogentry">
   <h2>Igårens blogginlägg</h2>
   <p>Faktiskt är vi inne i en annan div av class
   "blogentry."</p>
   <p>De förökar sig som kaniner.</p>
   <p>Om det finns tio blogginlägg på denna sida, kanske
   är tio divs av class "blogentry" också.</p>
</div>

I detta exempel används div med namn 'searchform' för att innesluta webbplatsområden som innehåller en sökformulär, medan div class='blogentry' används för att innesluta varje artikelinmatning i bloggen. På sidan finns endast en sökformulär, så vi valde att beteckna denna unika komponent med id. Men bloggen har många (artiklar) inmatningar, så class-attribut används i detta fall. På samma sätt har nyhetswebbplatser ofta flera div, där klasserna kan kallas 'newsitem' eller något annat.

Men inte alla webbplatser behöver div. En bloggwebbplats kan använda sig av h1, H2 och H2-titlar samt <p>-paragrafer, och nyhetswebbplatser är liknande. Vi visar här en div med class 'blogentry', inte för att uppmuntra dig att fylla din webbplats med div, utan bara för att visa principen: Använd flera class i samma HTML-dokument, men använd endast en gång id.

Teorin om klistermärke

Att tänka på id-attribut som klistermärke kan vara till hjälp. Jag sätter upp ett klistermärke på frysen för att påminna mig om att köpa mjölk, ett annat på telefonen för att påminna mig om att ringa en kund som har betalat sent. Det finns också ett annat på kassaboken för att påminna mig om att betala in räkningar innan den 15:e i månaden.

id också kommer att beteckna specialområden i dokumentet för att påminna dig om vilka områden som behöver särskilt hantering, på detta punkt är id-attribut liknande klistermärke. För att uppnå så kallad särskilt behandling, behöver du använda detta speciella id för att skriva några regler i stilmallarna eller lägga till några rader kod i JavaScript-filen. Till exempel, om du har några specifika regler i din CSS-fil, gäller dessa regler bara för element inom en div med id 'searchform'.

När ett id-attribut används som ett magnetiskt objekt (magnet) i en rad av specifika CSS-regler, kallas det en CSS-valare. Det finns mångaSkapa valaremetoder, men id är lätt att använda och har många användningsområden.

Styrkan hos id

id-attributet är oerhört kraftfullt. Det har följande förmågor:

  • Som en styleshetsvalshanterare, vilket ger oss förmågan att skapa kompakta, minimaliserade XHTML.
  • Som mål för hypermedia, ersättning för den föråldrade name-attributet.
  • Som en metod för att lokalisera specifika element från skript baserade på DOM.
  • Som namn för ett objektselement.
  • Som ett verktyg för allmän användning (general purpose processing) (i W3Cs exempel, "när data extraheras från en HTML-sida till en databas, eller när ett HTML-dokument konverteras till ett annat format, används som ett domänidentifieringsverktyg.")

Regler för id

id-värden måste börja med ett tecken eller en understrening; de får inte börja med ett siffra. Även om W3C-verifiering inte fångar upp denna fel, kommer en XML-parser att göra det. Dessutom måste id-namn och värden vara giltiga JavaScript-variabler om du använder id tillsammans med JavaScript i formulär. Mellanslag och bindestreck, särskilt bindestreck, är inte tillåtna. Dessutom är det inte en bra idé att använda understrecks tecken för class eller id-namn, på grund av begränsningar i CSS2.0 (och vissa webbläsare).

Semantiska taggar och tillgänglighet

Nu har vi diskuterat de allmänna XHTML-elementen (särskilt div och id), låt oss nu titta på några exempel från startsidan på denna webbplats. Först låt oss återgå till menyn som finns på rubrikpositionen:

<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="html-lärning">html-lärning</a></li>
<li id="x"><a href="/x.asp" title="XML-lärning">XML-lärning</a></li>
<li id="b"><a href="/b.asp" title="webbläsar-skript">webbläsar-skript</a></li>
<li id="s"><a href="/s.asp" title="Server-side skript">Server-side skript</a></li>
<li id="d"><a href="/d.asp" title="dot net handledning">dot net handledning</a></li>
<li id="m"><a href="/m.asp" title="Multimedia handledning">Multimedia handledning</a></li>
<li id="w"><a href="/w.asp" title="Bygg en webbplats">Bygg en webbplats</a></li>
</ul>
</div>

Vi har sju länkar, där varje länk tilldelas ett id för att motsvara det tillhörande innehållet: till exempel id 'h' motsvarar HTML-Handledningen, och så vidare. Dessa länkar är inneslutna i en lista med namnet 'menu', där id 'menu' markerar funktionen för denna lista - en menylista, och den yttre div med namnet 'navfirst' används för att markera denna sektion på sidan, skiljer den från element som huvudinnehåll (maincontent), sidopanel (sidebar) och fot (footer).

Elementen 'div' och 'ul' erbjuder en verklig struktur, vilket innebär att de markerar funktionen för innehållet (navigationsfält) och dess plats i dokumentet (överst på sidan). Till motsatsen, kan den traditionella tabelllayouten inte tillhandahålla någon semantisk information om data och kan lätt äta upp tre gånger så mycket bandbredd.

Observera att dessa markeringar inte innehåller img-taggar, så de involverar inte egenskaper som width, height, background eller border och liknande. Det använder inte celler i tabeller, vilket inte involverar en rad relaterade egenskaper. Den är mycket ren och liten, samtidigt som den tillhandahåller all information som behövs för att förstå den.

Genom att använda CSS tillsammans, erbjuder dessa markeringar besökarna på webbplatsen en pålitlig och snabbt laddad layout. Det erbjuder också möjligheten att skapa en mer flexibel och mångfaldig utseende för besökarna. Och utan CSS, kan våra välstrukturerade markeringar fortfarande leverera all innehåll utan att bli kaotiska.

Vaktsamma läsare kanske redan har märkt att texten innehållande elementet 'a' inte visas av webbläsaren, vilket också kan tillskrivas den perfekta kombinationen av strukturerade markeringar och CSS, som gör det möjligt för oss att definiera en utlösande mekanism med bara några rader CSS-regler. När användare använder en grafisk webbläsare, ser de vackra navigationsknappar, och när användare använder en ren textläsare, får de också tillgång till all text. På detta sätt är innehållet lika för alla användare.

Och eftersom märken inte innehåller bilder och tabellceller kan denna navigeringskomponent hänvisas till från vilken som helst sida inom webbplatsen utan att förändra strukturen, samtidigt som den ges olika visuella effekter. För att sammanfatta, genom att modulera koden har vi ökat kodens återanvändbarhet.