1.2 Semantiska element för struktur

article är ett format som är användbart när man skriver ett blogginlägg eller gör en nyhetsartikel.
När man använder sig av rubriker så kan det vara bra att lägga dem i en header. Fördelen med att använda en header är att html dokumentet blir tydligare formatt.

Footer används längst ned på dokumentet, där kan man lägga in information om dokumentets författare och kontaktinformation. Footer formatterar inte texten eller stylar den utan det är ett sätt att göra html dokumentet tydligare precis som header gör. Här är ett exempel på en footer: längst ned på sidan.

Section kan användas för att dela upp en sida i sektioner, t ex ett html dokument som den här med små artiklar kan delas upp så att alla artiklarna ligger inom en section. En stor skilland mellan "section" och "div" är att section inte ska användas för dela upp områden som ska stylas.

Figure används för att lägga in bilder, diagram etc. och om man vill en medföljande bildtext med "figcaption".
Figure gör i sig inget annat än att ge rum för att lägga in bilder och bildtext så att dokumentet blir tydligt. Figcaption kan användas för att beskriva bilden och/eller länka till källan där bilden tagits från. Använding av figure och figcaption kan t ex se ut såhär:

  
                      <figure> 
                     <img src="olympiskaRingar.png" alt="De olympiska ringarna">
                     <figcaption> De olympiska ringarna, IOK:s hemsida  <a href="http://www.olympic.org">Olympic.org </a>
                    					 </figcaption>
                                      </figure>     
                   			
                             

Vilket kommer se ut såhär:

Ett bra exempel på "aside" är nyhetsartiklar som ofta använder nyckel citat från artikeln som förstoras upp vid sidan texten för att fånga läsarens uppmärksamhet.
För att använda aside som i exemplet så lägger man aside inom artikel tagarna t ex såhär:

  <article>
             
             	<p >
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis erat in nisl eleifend viverra. Donec convallis id nunc vitae vehicula. 
Proin ipsum dui, vestibulum commodo urna eu, mollis convallis elit. 
Aenean fermentum volutpat enim sit amet sagittis. Sed et nunc posuere, congue ante sit amet, dignissim felis. Quisque id cursus velit.  </p>
                    
                  <aside>              
                      <p> Bara en massa exempel text </p>         
                          
                    </aside>
				</article>  

För att styra över vart aside ska hamna på hemsidan så får man använda CSS.
Aside bör relatera till det som den ligger inom, så om den ligger inom en artikel så är det som den ska relatera till, är det inom body taggarna så bör aside relatera till sidan i allmänhet.

Details används för att dölja information som visas först när användaren trycker på sammanfattningstexten(summary) som beskriver informationen som details innehåller.

En enkel details med summary kan se ut såhär:

  
               
               <details>
               	<summary> Browsers som details fungerar på </summary>
                		<p> Safari <br> Chrome <br> Opera <br> iOS Safara <br> Android browser <br> Blackberry Browser</p>
                   	
                    </details>
					 

Resultatet av koden blir såhär: