zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Onepage, HTML5 Struktur: Ist mein Grundgerüst semantisch sauber?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.10.2014, 22:33
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.08.2008
Ort: Köln
Beiträge: 63
overflow befindet sich auf einem aufstrebenden Ast
Standard Onepage, HTML5 Struktur: Ist mein Grundgerüst semantisch sauber?

Hallo,

wie man aus dem Betreff entnehmen kann, bereite ich aktuell eine kleine Onepage vor. Über die Nachteile einer Onepage bin ich natürlich informiert.
Wir haben leider sehr wenig an Content und haben uns daher für eine übersichtliche Onepage entschieden.

Auf der Internetpräsenz wird es einen großen #header geben. So, wie man es aktuell von anderen Seiten kennt.

Dadrunter folgt eine kurze Einführung zur Seite (hgroup),
gefolgt von dem eigentlich Content (section).

Testweise arbeite ich mit einem Artikel (article).
Insgesamt sollten es jedoch zwei werden (Über Uns, Preise).

Die Kontaktdaten habe ich in die Fußzeile #footer gepackt.
Dort möchte ich neben der E-Mailkontaktadresse, noch die Googlemapsanzeige einblenden.

Anbei die Struktur
HTML-Code:
<body class="startpage">
    <header role="banner">
        <div class="hgroup">
            <h1>&Uuml;berschrift#h1</h1>
            <p>Iis varias doctrina ne dolor a in enim nescius.</p>
        </div>
    </header>
    <div class="wrapper">
        <main role="main">
            <section id="content">
                <header>
                    <h2>&Uuml;berschrift#h2</h2>
                    <p>Magna eiusmod cohaerescant eu malis officia ubi sint duis.</p>
                </header>
                <article>
                    <h3>&Uuml;berschrift#h3</h3>
                    <p>Possumus eu quamquam ea malis non doctrina. Ad aliquip consectetur, se legam nescius exquisitaque. Mentitum quo cupidatat. Dolore quamquam distinguantur se id eu duis veniam noster, quorum consequat de lorem culpa, ingeniis praetermissum ubi pariatur. Duis commodo quamquam ad veniam tractavissent vidisse tamen arbitror, commodo et legam ubi iudicem e aute quamquam do non elit occaecat ex offendit ne quid mandaremus, de officia qui proident, qui veniam incididunt illustriora. Ab aut transferrem, deserunt culpa pariatur. Se officia exercitation, esse de cernantur ubi quorum se fugiat ullamco hic deserunt in multos de quo quis laboris, ad velit offendit firmissimum ubi dolor exquisitaque senserit quem ingeniis ea e appellat praesentibus sed quibusdam se proident. Deserunt ut cillum.</p>
                </article>
            </section>
        </main>
        <footer role="contentinfo">
            <span>Senden Sie uns doch eine E-Mail</span>
            <a href="mailto:no@mailto.com">no@mailto.com</a>
        </footer>
    </div>
</body>
Die Fragen, die ich mir stelle:
- Ist die Struktur in Ordnung?
- Wäre es sinnvoller gewesen die Kontaktdaten als Artikel im Sections-bereich aufzuführen und den footer komplett wegzulassen?
- Was haltet ihr vom folgenden Aufbau
HTML-Code:
<footer role="contentinfo">
            <header>
                <h2>Kontakt</h2>
                <span>Wir freuen uns auf Sie</span>
            </header>
            <article>
                <h3>E-Mail-Kontakt</h3>
                <span>Was können wir für Sie tun?</span>
                <a href="mailto:no@mailto.com">no@mailto.com</a>
                <h3>Hier finden Sie uns</h3>
                #GOOGLEMAPS-EINBLENDUNG
                <h3>So können Sie uns erreichen</h3>
                #KONTAKTDATEN
            </article>
        </footer>
PS: Ja es wird keine Navigation geben = )
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.10.2014, 10:33
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.074
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Du brauchst keine &Uuml; etc. zu verwenden. Die kannst du getrost alle löschen und den UTF-8 Zeichensatz verwenden.
Auch darfst du im footer, so wie du es bereits auf der restlichen Seite machst, Absätze verwenden. Ja, man kann streiten, ob ein Satz einen Absatz wert ist, das ist also kein Muss.
Semantisch gesehen brauchst du solch ein Konstrukt nicht:
<header><div> </div> </header>
Ein header-Element lässt sich wie ein div stylen, das ist also unnötig. Außer, du brauchst das div für speziell verschachtelte Design-Elemente, aber dann ist es für die semantik unnötig
Ansonsten: Ja, kann man so aufbauen. Ob dein Inhalt allerdings wirklich ein "article" ist, geht aus dem Blindtext nicht hervor.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.10.2014, 00:57
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.08.2008
Ort: Köln
Beiträge: 63
overflow befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
Du brauchst keine &Uuml; etc. zu verwenden. Die kannst du getrost alle löschen und den UTF-8 Zeichensatz verwenden.
Stimmt, hast recht!

Zitat:
Zitat von cloned Beitrag anzeigen
Auch darfst du im footer, so wie du es bereits auf der restlichen Seite machst, Absätze verwenden. Ja, man kann streiten, ob ein Satz einen Absatz wert ist, das ist also kein Muss.
Danke

Zitat:
Zitat von cloned Beitrag anzeigen
Semantisch gesehen brauchst du solch ein Konstrukt nicht:
<header><div> </div> </header>
Ein header-Element lässt sich wie ein div stylen, das ist also unnötig. Außer, du brauchst das div für speziell verschachtelte Design-Elemente, aber dann ist es für die semantik unnötig
Den hgroup div-tag nehme ich immer Standardmässig auf. Je nach Design wird es dann entfernt oder auch nicht. Bin halt ein großer Fan vom <hgroup> gewesen.

Zitat:
Zitat von cloned Beitrag anzeigen
Ansonsten: Ja, kann man so aufbauen. Ob dein Inhalt allerdings wirklich ein "article" ist, geht aus dem Blindtext nicht hervor.
Gut vielen Dank. Damit wurde mir erstmal sehr weitergeholfen.
Mit Zitat antworten
  #4 (permalink)  
Alt 22.11.2014, 22:27
SASS/LESS Spezi!
neuer user
 
Registriert seit: 25.02.2008
Ort: Speyer
Beiträge: 18
olwazt befindet sich auf einem aufstrebenden Ast
Standard

Ich würde vllt noch die body class in eine ID ändern - ansonsten sollte das passen
__________________
Werbeagentur Speyer FORMGEFLECHT ✓
Mit Zitat antworten
Antwort

Stichwörter
html5, onepage

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Semantisch korrekt und HTML5 konform? doc.schiwagos (X)HTML 3 15.09.2013 21:57
HTML5 - Struktur bolshi (X)HTML 2 05.01.2011 15:05
semantisch aussagekräftige Struktur für einen Kalender Renner (X)HTML 3 31.01.2008 15:27


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:23 Uhr.