Avatar billede nph12 Nybegynder
17. juni 2012 - 12:36 Der er 10 kommentarer og
1 løsning

HTML5 - hjælp til at forstå de nye tags

Hej eksperter
Jeg har kastet mig over HTML5. Jeg er ikke helt sikker på, hvordan jeg skal forstå det nye "section" tag og nogle af de andre nye tags. Jeg har prøvet at lave et lille udkast til en hjemmeside, og i den forbindelse kan jeg godt bruge noget konstruktiv feedback til, hvordan jeg får siden skrevet rigtigt i HTML5.

Er det noget jeg har glemt? Er der noget jeg har misforstået? Er det noget jeg kan gøre smartere? Al konstruktiv feedback er velkommen:-)


<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Navn på hjemmesiden</title>
<link rel="stylesheet" type="text/css" href="screen.css">
</head>

<body>
   
    <div id="container"><!--container for definere siden-->
        <header><!--banner-->
            <img src="inc/banner.png" width="980" height="150">   
        </header>
        <nav><!--navigationsbar-->
            <ul>
                <li><a href="/index.php">Forside</a></li>
                <li><a href="/side2/index.php">Side2</a></li>
                <li><a href="/side3/index.php">Side3</a></li>
                <li><a href="/side4/index.php">Side4</a></li>
            </ul>
        </nav>
        <div id="content"><!--content indrammer indhold på siden-->
       
            <section id="slider"><!--imageslider -->
                   
            </section>
            <section><!--indhold midt på siden-->
           
            </section>
            <section =id="columns">
                <article id="column1"><!--tekstkolonne1-->
                    <header>
                        <h1>Kolonne1</h1>
                    </header>
                    <p>Tekst</p>
                </article>
                <article id="column2"><!--tekstkolonne2-->
                    <header>
                        <h1>Kolonne2</h1>
                    </header>
                    <p>Tekst</p>
                </article>
                <article id="column3"><!--tekstkolonne3-->
                    <header>
                        <h1>Kolonne3</h1>
                    </header>
                    <p>Tekst</p>
                </article>
           
            </section>
            <section>
                <footer><!--Footer-->
                    <p>En eller anden form for footer</p>   
                </footer>
            </section>
        </div>
    </div>
</body>
</html>
Avatar billede olebole Juniormester
17. juni 2012 - 16:49 #1
<ole>

"Er der noget jeg har misforstået?" >> Man kunne jo sige, du fundamentalt har misforstået den semantiske del af HTML5 - eller begrebet semantik genrelt  =)

Hvilke elementer, du bør bruge, afhænger af deres tekstuelle indhold - og indholdets indbyrdes relationer. Uden atkende indholdet giver det således ikke mening at diskutere elementvalg.

Dog kan man sige, at et SECTION element som regel er et underelement til et ARTICLE element - ikke omvendt. Jeg tror heller ikke, jeg både ville bruge FOOTER og SECTION til footeren.

/mvh
</bole>
Avatar billede scootergrisen Nybegynder
17. juni 2012 - 19:26 #2
Du kan starte med og fjerne dine <div>'er.
Hele ideen med de nye HTML tags som <header> osv er at så slipper man for at bruge <div> og det gør det blandt andet nemmere at se hvilke slut </div> der høre til hvor i stedet for man skal sidde og skrive kommentar om hvor de hører til.

Jeg syntes også <article> og <section> er forvirrende og vi er vist ikke de eneste.

<article> indeholder et for-sig-selv-stående-stykke-indhold som også giver mening hvis det kun bliver vist for sig selv. For eksempel et forum indlæg, avis artikkel, blog besked, bruger kommentar som også giver mening hvis det vises i et RSS feed.

Det giver vist ikke så meget mening og skrive følgende når du kun har en footer i section :
<section>
  <footer><!--Footer-->
      <p>En eller anden form for footer</p> 
  </footer>
</section>

Så skriv bare :
<footer>
  <p>En eller anden form for footer</p> 
</footer>

Så er det en footer til hele siden når den står som barn af <body>.
Og du behøver ikke skrive <!--Footer--> fordi tagnavnet i sig selv skulle gerne forklare hvad det er.
Avatar billede olebole Juniormester
17. juni 2012 - 20:03 #3
"Du kan starte med og fjerne dine <div>'er.
Hele ideen med de nye HTML tags som <header> osv er at så slipper man for at bruge <div> og det gør det blandt andet nemmere at se hvilke slut </div> der høre til hvor i stedet for man skal sidde og skrive kommentar om hvor de hører til."


Det er muligvis også en misforståelse af HTML5. Det kommer lidt an på, hvad du helt præcist mener  =)

Meningen er, at du stadig skal bruge anonyme containere som DIV til at formatere indholdet med. Tags som ARTICLE og SECTION er primært tænkt til semantisk opdeling af indholdet - ikke som formaterings tags.
Avatar billede scootergrisen Nybegynder
17. juni 2012 - 23:50 #4
Ellers slå det op hos W3C :

http://www.w3.org/TR/2012/WD-html5-20120329/the-section-element.html#the-section-element

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading

http://www.w3.org/TR/2012/WD-html5-20120329/the-article-element.html#the-article-element

The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
Avatar billede olebole Juniormester
18. juni 2012 - 00:05 #5
#4: Er det henvendt til mig?
Avatar billede scootergrisen Nybegynder
18. juni 2012 - 02:12 #6
#5 > Nej til spørgeren men du må da også gerne læse det.
Han/hun spurgte var usikker på <section> og det er jo hos W3C det forgår hvis man da forstår engelsk og den måde de skriver det både. Det kan godt være svært at forstå hvad de skriver nogen gange.
Avatar billede scootergrisen Nybegynder
19. juni 2012 - 00:16 #7
#5 > nej til spørgeren men du må da også gerne læse det.
Avatar billede olebole Juniormester
19. juni 2012 - 00:58 #8
Tak tak. Jeg har rodet med og holdt mig ret skarpt orienteret om HTML5 i en håndfuld år efterhånden, så der har jeg været masser af gange  *o)
Avatar billede scootergrisen Nybegynder
19. juni 2012 - 04:04 #9
#8 > ok vil gerne se hvad du har lavet i HTML 5. Jeg skriver også om HTML 5 og andre nye ting og vil gerne se hvad andre laver, specielt danskere da der ikke er så meget på dansk endnu.
Du kan se her hvad jeg har lavet : http://scootergrisen.dk/htmlgrisen/
Avatar billede olebole Juniormester
19. juni 2012 - 13:39 #10
"ok vil gerne se hvad du har lavet i HTML 5" >> Sikkert, men det er ikke derfor, jeg deltager i denne eller andre tråde
Avatar billede nph12 Nybegynder
31. juli 2012 - 14:29 #11
Lukketid
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester