Twitter-Kundenportfolio-Website

1254
Ivo Wetzel

Ich erstelle eine Art "Portfolio-Website" für mich (eine Menge Platzhalterinhalt ...), und ich habe mich gefragt, ob ich die Semantik des HTML-Codes verbessern kann5noch weiter, vor allem das articleZeug.

Ich bin mir nicht ganz sicher, ob ich sectionElemente darin verwenden sollte. Ich habe eine Reihe von HTML5-"Guides" und einige der Elementspezifikationen durchgelesen, aber diese haben oft unterschiedliche Positionen.

Ich denke, die Verwendung von Abschnitten würde zur Semantik beitragen, da die Folien einen anderen "Teil / Abschnitt" des "Artikels" darstellen.

Schimpfen Sie nicht über das CSS. es wird von LESS generiert.

Die Seite kann hier eingesehen werden .

Manuell formatiertes HTML

<!DOCTYPE html>
<html>
  <head>
    <title>A Python Twitter Client | BonsaiDen</title>
    <link rel="shortcut icon" href="/images/favicon.ico">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold">
    <link rel="stylesheet" href="/stylesheets/style.css">

    // will get copied to a local file sooner or later
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>

    // the content
    <article>

      // quite some divs here
      <div>
        <div id="content">  // maybe use section?

          // gets replaced via ajax

          <header data-page="/atarashii">
            <h1 class="small">A Python Twitter Client</h1>
            <div class="external">
              <a href="https://github.com/BonsaiDen/Atarashii">Go to Project &#x27A4;</a>
            </div>
            <div class="clear"></div> // always hate these clear things...
          </header>

          <div>
            <p>A Twitter Client for GNOME...</p>
          </div>

          // ajax end

        </div>

        <div id="slideshow">  // maybe use section?
          <header>
            <h1 id="slideTitle">[SlideShowItem Title]</h1>
          </header>

          <div id="slideContent">
            <p>[Slideshow Image]</p>
          </div>
        </div>
        <div class="clear"></div>
      </div>
    </article>


    <header>

      // navigation, surprise!
      <nav>

        // really happy with this
        <ul>
          <li class="left">
            <h1>Projects</h1>
            <ul>
              <li><a href="/garden">JavaScript Garden</a></li>
              <li><a href="/shooter">NodeGame: Shooter</a></li>
              <li><a href="/atarashii" class="active">Atarashii</a></li>
            </ul>
          </li>

          <li>
            <h1>Code</h1>
            <ul>
              <li><a href="/neko">neko.js</a></li>
              <li><a href="/bison">BiSON.js</a></li>
            </ul>
          </li>

          <li>
            <h1>Web</h1>
            <ul>
              <li><a href="/stackoverflow">Stack Overflow</a></li>
              <li><a href="/github">GitHub</a></li>
              <li><a href="/website">The Website</a></li>
            </ul>
          </li>

          <li class="right">
            <h1>ME</h1>
            <ul class="info">
              <li><a href="/me">Ivo Wetzel</a></li>
              <li class="simple">

                // div div div :/
                <div>
                  <div id="picture">
                    <img src="images/snufkin.png" alt="Ivo Wetzel"/>
                    <a href="/me"></a>
                  </div>

                  <ul>
                    <li class="first"><a href="http://twitter.com/BonsaiDen">Twitter</a></li>
                    <li><a href="mailto: ivo.wetzel@googlemail.com">E-Mail</a></li>
                  </ul>

                  <div class="clear"></div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </header>

    // no real content so far but a background image thingy
    <footer></footer>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script src="/javascripts/page.js"></script>
  </body>
</html>
Antworten
15
Ah! Bitte schreiben Sie Ihren Doctype in Kleinbuchstaben! David Murdoch vor 9 Jahren 1
@David Ich verwende Jade-Templates (also ich gebe ihnen die Schuld), aber eine gute Stelle :) Ich werde das reparieren. Ivo Wetzel vor 9 Jahren 0
Noch ein Kommentar, warum hast du `
Inhalt
`Sie sollten in der Lage sein, das` loszuwerden
ohne Nebenwirkungen.
Hailwood vor 9 Jahren 0
@Hailwood Oben auf der Seite gibt es eine sehr kleine Schattenblende, und ich kann es nicht schaffen, die gesamte Seite ohne das zusätzliche div zu überspannen, es sei denn, ich mache einen Header nur dafür und entferne den anderen Header. Ivo Wetzel vor 9 Jahren 0
@DavidMurdoch kann ich wissen, warum Doctype in Kleinbuchstaben? Ich hielt es für unempfindlich. avi vor 6 Jahren 0
Weil Großbuchstaben hässlich sind und ich bin pedantisch. Oh, und könnte ein oder zwei Byte sparen, wenn GZIPping. :-) David Murdoch vor 6 Jahren 0

5 Antworten auf die Frage

8
citadelgrad

Ihr Artikel-Tag "Inhalt" sollte wahrscheinlich ein Nebeneffekt sein.

Mark Pilgrims Eintauchen in HTML5 empfiehlt Artikel-Tags:

Das Artikelelement stellt eine Komponente einer Seite dar, die aus einer in sich geschlossenen Komposition in einem Dokument, einer Seite, einer Anwendung oder einer Website besteht und unabhängig voneinander vertrieben oder wiederverwendbar sein soll, z. B. bei der Syndizierung. Dies kann ein Forumsbeitrag, ein Zeitschriften- oder Zeitungsartikel, ein Webprotokolleintrag, ein vom Benutzer übermittelter Kommentar, ein interaktives Widget oder Gadget oder ein beliebiger anderer unabhängiger Inhalt sein.

und für beiseite tags:

Das side-Element stellt einen Abschnitt einer Seite dar, der aus Inhalt besteht, der tangential mit dem Inhalt um das side-Element zusammenhängt und der als getrennt von diesem Inhalt betrachtet werden kann. Solche Abschnitte werden in gedruckter Typografie häufig als Seitenleisten dargestellt. Das Element kann für typografische Effekte wie Anführungszeichen oder Seitenleisten, für Werbung, für Gruppen von Navigationselementen und für andere Inhalte verwendet werden, die als getrennt vom Hauptinhalt der Seite betrachtet werden.

Ich glaube, ID = "content" sollte wahrscheinlich ein Abschnitt sein, den Sie vorgeschlagen haben.

Meiner Meinung nach gibt er die besten Erklärungen ab, wann und wo die einzelnen Tags verwendet werden sollen.

+1 Beste Antwort noch. Könnte die Diashow anhand Ihrer Beschreibung einer Nebenbemerkung nicht auch als Nebenbemerkung betrachtet werden? Hailwood vor 9 Jahren 0
Das "beiseite" macht hier zwar mehr Sinn, ich werde dann das Artikelelement damit ersetzen. @Hailwood Ich wundere mich darüber, im Moment plane ich, eine "Abbildung" und eine "Figcaption" dafür zu verwenden (die Folien scheinen der Beschreibung des Elements zu entsprechen, das in der Spezifikation angegeben wurde). Ivo Wetzel vor 9 Jahren 0
3
unor

Über Ihr "aktualisiertes HTML":

meta- charsetvorhertitle

Sie sollten das metaElement mit dem charsetAttribut als erstes Element in headeinfügen. Andernfalls wird es möglicherweise nicht für das titleElement verwendet.

    <meta charset="utf-8">
    <title>Coding. Clean and Functional. | BonsaiDen</title>

Favicon

Sie könnten iconanstelle von verwendenshortcut icon (aus historischen Gründen immer noch erlaubt) verwenden.

Gliederung

Eine Überschrift der Website fehlt. Fügen Sie ein h1(mit dem Site-Namen und / oder dem Site-Logo) hinzu, möglicherweise in Ihrem<header></header> .

Keine Notwendigkeit zu verwenden header

Wenn Ihre headerElemente nur eine Überschrift ( h1- h6) enthalten, können Sie sie weglassenheader ganz . Dies ist nur nützlich, wenn Sie zusätzlichen einleitenden Inhalt hinzufügen. Sie können sie jedoch natürlich aus Gründen der Konsistenz behalten.

Eine Überschrift für nav

Wenn Sie Ihre Links navmit Überschriften strukturieren möchten, sollten Sie diese um eine Ebene höher setzen, z. B. "Navigation" ( h1). Verwenden Sie dann h2für die anderen Überschriften (oder verwenden Sie sectionElemente mit jeweils h1). Sie sollten a nicht ulfür die gesamte Navigation verwenden, sondern ulfür jeden Unterabschnitt ein neues .

<nav>
 <h1>Navigation</h1>

 <h2>Projects</h2>
 <ul>
  <li><a href="/garden">JavaScript&nbsp;Garden</a></li>
  <li><a href="/shooter">NodeGame:&nbsp;Shooter</a></li>
  <li><a href="/atarashii">Atarashii</a></li>
 </ul>

 <h2>Code</h2>
 <ul>
  <li><a href="/neko">neko.js</a></li>
  <li><a href="/bison">BiSON.js</a></li>
 </ul>

 <h2>Web</h2>
 <ul>
  <li><a href="/stackoverflow">Stack&nbsp;Overflow</a></li>
  <li><a href="/github">GitHub</a></li>
  <li><a href="/website">The&nbsp;Website</a></li>
 </ul>

 <h1>ME</h1>
 <ul class="info">
  <li><a href="/me" class="">Ivo Wetzel</a></li>
  <li class="simple"><a id="picture" href="/me" class=""><img src="images/snufkin.png" alt="Ivo Wetzel"></a>
   <ul>
    <li class="first"><a href="http://twitter.com/BonsaiDen">Twitter</a></li>
    <li><a href="mailto:ivo.wetzel@googlemail.com">E-Mail</a></li>
   </ul>
  </li>
 </ul>

</nav>

Ich denke jedoch, dass Ihre Twitter- und E-Mail-Links nicht Teil der Hauptnavigation sind. Sie sollten sie daher besser in die Fußzeile der Website verschieben.

Hauptinhalt?

Welches ist dein Hauptinhalt der Seite? Ist es #content("Codieren. Reinigen und Funktionieren")? Wenn ja, warum ist es in aside? Sie sollten es nicht einschließen aside! Verwenden Sie stattdessen sectionals direktes Kind body(oder articlefalls zutreffend).

Wenn die Diashow Teil Ihres Hauptinhalts ist, sollten Sie dies auch nicht verwenden aside.

2
Hailwood

Meiner Meinung nach einem Abschnitt Element ist im Grunde ein wichtiger Unter div damit meine ich, ist ein Profilelement verwendet, um eine bemerkenswerte Abteilung in Ihrem Inhalt zu bezeichnen.

Eine der besten Möglichkeiten, über die ich nachdenken kann, wenn Sie ein bestimmtes Element an einem bestimmten Ort verwenden sollten, ist:

Stellen Sie sich vor, Sie verwenden einen Bildschirmleser wie eine blinde Person. Sie können weder Bilder noch Farben sehen. Die Tatsache, dass Sie für jeden Teil Ihres Inhalts einen anderen Hintergrund haben, macht für sie keinen Unterschied.

Aber wenn der Bildschirmleser plötzlich " Neuer Abschnitt " vorliest, macht das mehr Sinn, nicht wahr?

Meiner Meinung nach.

Sie sollten Ihren Inhalt oder Ihre Diashow nicht durch einen Abschnitt ersetzen.

Ein Abschnitt sollte in Ihrem Content-Div verwendet werden.

Obwohl,

Dies kann keine Auswahl sein, aber ersetzt ein content div nicht den Platz, an dem sich ein Artikelelement befinden sollte?


Findet jemand anderes, dass w3schools voll mit C *** ist?

Das <article>Tag definiert externen Inhalt.
Bei dem externen Inhalt kann es sich um einen Nachrichtenartikel eines externen Anbieters oder um einen Text aus einem Weblog (Blog) oder um einen Text aus einem Forum oder um einen anderen Inhalt aus einer externen Quelle handeln.

Wenn dies der Fall wäre, hätten sie das Tag genannt <external>

Der letzte Punkt ist ein guter Punkt, das Problem ist, dass die Folien mehr oder weniger Teil des Artikels sind, da sich der Artikel ändert, um einen Überblick über das Projekt zu geben, also sollte der Artikel in dem Artikel enthalten sein, den ich denke. Vielleicht könnte ich dasselbe in ein "figure" -Element einfügen und den Titel zu einer "figcaption" machen, wäre das sinnvoller? Ivo Wetzel vor 9 Jahren 0
2
David Murdoch

<div class="clear"></div> kann und sollte durch die großartige Clearfix-Lösung ersetzt werden

Fügen Sie dies dem ENDE Ihrer CSS hinzu:

/* >> The Magnificent CLEARFIX: http://j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; }
.clearfix:after { clear: both; }
/* fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }

Fügen Sie dann einfach class="clearfix"jeden Container hinzu, der Elemente enthält.

Sie sollten auch http://html5boilerplate.com/ besuchen, falls Sie dies noch nicht getan haben.

Hm, ein bisschen gegoogelt über das Float-Zeug und wie es sich herausstellt, kann ich in meinem Fall auch einen einfachen `overflow: auto 'verwenden, was bisher gut funktioniert (nur zweimal verwendet). Kennen Sie Probleme mit dieser Lösung? Ivo Wetzel vor 9 Jahren 0
Ich hatte schon einmal ein Problem mit der Verwendung von `overflow: auto`, aber ich kann mich nicht erinnern, was es war. Es gibt auch [this] (http://www.impressivewebs.com/overflow-hidden-problem/). Ich benutze jetzt immer ".clearfix", nur für den Fall. David Murdoch vor 9 Jahren 0
Ich verstehe, ich wechselte jetzt zu .clearfix. Ivo Wetzel vor 9 Jahren 0
2
Yi Jiang

Wenn ich durch den Code schaue, ist einer der No-Brainers, die sofort herausspringen, die Trennung von Profilanker und Image. Der Überlagerungseffekt ist natürlich wichtig, aber mit etwas CSS-Ellenbogenfett kann dies viel sauberer erreicht werden:

a {
    background: #fff;
    display: block;
    height: 128px;
    width: 128px;
}

a img:hover {
    opacity: 0.9;
}

Siehe: http://www.jsfiddle.net/yijiang/Tv7AP/


Bei der Betrachtung des Codes scheint der einzige Grund, warum Sie eine div#navigation > aStruktur haben, der Hintergrundschatten. Wenn dies der Fall ist, können Sie das Äußere leicht entfernen, divindem Sie entweder ein box-shadowoder ein 1px breites Hintergrundbild verwenden, das sich entlang der y-Achse mit einiger Auffüllung wiederholt:

nav {
    -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3), 0 -3px 0 rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3), 0 -3px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3), 0 -3px 0 rgba(0, 0, 0, 0.3);
}

Darüber hinaus li class="right"macht mich das Sehen etwas traurig, aber das Sehen li class="left"macht mich noch trauriger. Der einzige Grund, warum Sie die leftKlasse verwenden, ist, doppelte Grenzen zu vermeiden (die richtige Klasse ist, dem Profilbereich anscheinend etwas mehr Platz zu geben) wirklich nur eine Klasse verwenden:

nav ul li {
    border-right: 4px solid #052C4F;
}

nav ul li.right {
    border-right: 0;
}
Auch nur zu Nitpick, aber nicht ein Zeiger; } `etwas unnötig? ;) Yi Jiang vor 9 Jahren 0
Oh ja, ich denke, das ist von Anfang an noch vorhanden. Das img hover-Ding ist genial; Ich habe das eingefügt. Beim letzten Versuch habe ich versucht, es zu ändern, aber ich hatte immer ein paar merkwürdige Versätze, die ich nicht loswerden konnte, also verlasse ich die 2/2-Grenze vorerst. Ivo Wetzel vor 9 Jahren 0
@Ivo Sie haben eine Frage zur HTML5-Semantik gestellt und die Antwort, die Sie ausgewählt haben, bezieht sich nur auf CSS. Die Frage und Antwort sollte in Beziehung gesetzt werden, damit sie den Menschen hilft, die nach einer Antwort auf die Frage suchen. Stapelantworten helfen mehr als nur Fragesteller. Sie sollten Ihre Frage bearbeiten. citadelgrad vor 9 Jahren 0