Hem Sociala medier Hur man använder semantiska taggar för HTML5 och CSS3 programmering - dummies

Hur man använder semantiska taggar för HTML5 och CSS3 programmering - dummies

Innehållsförteckning:

Video: Web Development - Computer Science for Business Leaders 2016 2025

Video: Web Development - Computer Science for Business Leaders 2016 2025
Anonim

Eftersom webbutvecklare började använda flytande layouttekniker skapade de nästan alltid div dividerat nav, sidhuvud och sidfot. Utvecklarna av HTML5 bestämde sig för att skapa nya element med dessa namn. Ta en titt på följande kod för att se de semantiska taggarna i åtgärd.

semantisk header {border-bottom: 5px dubbel svart;} nav {float: left; bredd: 20%; rensa: vänster; minhöjd: 400px; gräns-höger: 1px solid svart;} avsnitt {float: left; bredd: 75%; padding-left: 1em;} artikel {float: left; bredd: 75%; padding-left: 1em;} footer {clear: both; border-top: 5px dubbel svart; text-align: center;}

Detta är min rubrik

Navigering

  • länka en
  • länk b
  • länk c
  • länk d
  • länk e

Avsnitt 1

Avdelningskropp …

Avsnitt 2

Kroppsdel ​​…

Artikel

Artikel kropp …

Footer

Andy Harris

andy @ aharrisbooks. netto

Som du kan se finns det ett antal nya semantiska märkningstaggar i HTML5:

  • header: Detta är inte detsamma som h1-h6-taggarna. Den betecknar en bit av sidan som innehåller en rubrik för sidan. Ofta fyller sidhuvudet sidbredd och kommer att ha någon form av bannerbild. Det innehåller ofta h1-innehåll.

  • nav: Den här taggen indikerar någon form av navigationssektion. Den har ingen speciell stil, men används ofta som antingen en horisontell eller vertikal meny för sidnavigering.

  • avsnitt: En sektion används för att ange en generisk del av sidan. Du kan ha flera sektioner på samma sida.

  • artikel: En artikel är som en sektion, men den är avsedd att användas med externa resurser. Många sidor byggs automatiskt av programvara, och när dessa sidor integrerar innehåll från andra källor är det avsett att använda artikeln för att integrera detta innehåll.

  • footer: En sidfot är avsedd att visa sidfoten längst ner på en sida. Vanligtvis täcker en sidfot på undersidan av en sida, även om detta inte är standardbeteendet.

Observera att inget av dessa element har någon specifik formatering. Det är upp till dig att tillhandahålla formatering via CSS-kod. Var och en av elementen kan formateras direkt som ett HTML-element (eftersom det är vad det är). Alla webbläsare med senaste versionen stöder de semantiska märkningstaggarna, men om du vill stödja äldre webbläsare (speciellt IE före version 8) behöver du fortfarande använda divs.

Hur man använder semantiska taggar för HTML5 och CSS3 programmering - dummies

Redaktörens val

Vad är en Java-karta? - dummies

Vad är en Java-karta? - dummies

Arrays och specialiserade listor gör det möjligt att utföra en fantastisk uppsättning uppgifter med Java. Det finns dock situationer där en Java-applikation behöver något som är mer relaterat till en databas, utan att egentligen ha allt databasbagage (som att behöva köpa en separat applikation). Till exempel kanske du vill kunna ...

Några få saker om Java Math - dummies

Några få saker om Java Math - dummies

Tro det eller inte, datorer - även de mest kraftfulla - Ha vissa begränsningar när det gäller att utföra matematiska beräkningar. Dessa begränsningar är vanligtvis obetydliga, men ibland slår de sig och biter på dig. Här är de saker du behöver se upp för när du gör matte i Java. Helhetsflöde Det grundläggande problemet ...

Vad är recursion i Java Programmering? - dummies

Vad är recursion i Java Programmering? - dummies

Rekursion är en grundläggande programmeringsteknik som du kan använda i Java, där en metod kallar sig för att lösa ett problem. En metod som använder denna teknik är rekursiv. Många programmeringsproblem kan lösas endast genom rekursion, och vissa problem som kan lösas med andra tekniker löses bättre genom rekursion. En av ...

Redaktörens val

4 Måste-inkludera i din blogg sidobardesign - dummies

4 Måste-inkludera i din blogg sidobardesign - dummies

Din bloggens sidofält är viktig fastighet som bör innehålla de element du vill ha mest. När du utformar din blogg sidofält kan du dra från en nästan oändlig lista över sidospårelement. Genom att välja noggrant vad som ska inkluderas (och vad som inte ska inkluderas) kan du ställa in din blogg från andra.

5 Användbara Wordpress Plugins - dummies

5 Användbara Wordpress Plugins - dummies

Om du bloggar på en självhävd plattform med WordPress-programvara, är det dags att anpassa din blogg med plug-ins - programvara som kan "anslutas" till din befintliga WordPress bloggprogramvara. Plug-ins gör det möjligt för dig att göra allt från funktionsbildspel i dina blogginlägg för att ansluta sociala medier till din webbplats. Här är fem användbara ...

7 Sätt att erövra Writer's Block som en Blogger - dummies

7 Sätt att erövra Writer's Block som en Blogger - dummies

Varje bloggare möter författarens block i ett tid eller annan. Om du är den typ av bloggare som sköter innehåll varje dag, kan författarens block vara stäverande. Kan du inte ta en paus för att få ditt skrivande mojo tillbaka? Prova en (eller flera) av dessa sju sätt att slå författarens block för att få dig tillbaka ...

Redaktörens val

10 Stora elektronikkomponentkällor - dummies

10 Stora elektronikkomponentkällor - dummies

Letar du efter några bra källor till dina elektroniska delar? Denna lista ger dig några fleråriga favoriter, både inom och utanför Nordamerika. Denna lista är inte uttömmande. Du hittar bokstavligen tusentals specialutbud för ny och begagnad elektronik. Plus, Amazon och eBay ger virtuella marknadsplatser för alla sorters säljare - ...

Elektronik Basics: Resistance - dummies

Elektronik Basics: Resistance - dummies

I elektronikvärlden är motståndet inte meningslöst. Faktum är att motstånd kan vara mycket användbart. Utan motstånd skulle elektronik inte vara möjligt. Elektronik handlar om att manipulera strömmen av ström, och ett av de mest grundläggande sätten att manipulera strömmen är att minska det genom resistans. Utan motstånd strömmar strömmen oreglerad och där ...

Digital elektronik: Så här installerar du BASIC Stamp Editor och Anslut till Stämpeldummorna

Digital elektronik: Så här installerar du BASIC Stamp Editor och Anslut till Stämpeldummorna

För att berätta för BASIC Stamp vad du vill göra i ditt digitala elektronikprojekt måste du programmera det. BASIC Stamp Windows Editor är den programvara som du använder på din dator för att skapa program som kan laddas ner till en BASIC Stamp-mikrokontroller. Denna programvara är tillgänglig gratis från Parallax webbplats. ...