HTML & CSS για αρχάριους (Μέρος 19): Σημασιολογία για τον ιστό (2)

Προς το παρόν, τα έγγραφα HTML δομούνται συνήθως με τοιχόπια (divs). Η μορφοποίηση και η τοποθέτηση αυτών των δοχείων γίνεται συνήθως μέσω CSS. Για λογισμικό όπως τα Screenreader, αυτή η διαδικασία είναι αναίσθητη, καθώς δεν μπορούν να αναγνωρίσουν ποια σημασία έχουν συγκεκριμένοι περιεχόμενοι. Αυτό αλλάζει μέσω των νέων στοιχείων δομής.

Επισήμανση Άρθρων

Με το στοιχείο article μπορείτε να σημειώσετε κείμενα (μηνύματα φόρουμ, άρθρα εφημερίδων κλπ.) ως άρθρα. Το ακόλουθο παράδειγμα δείχνει τον ορισμό ενός τυπικού άρθρου.

<article>
   <h1>Δημιουργία web apps (Μέρος 09): jQuery mobile (1)</h1>
   <p>Το jQuery είναι αμφίβολα ένα από τα πιο γνωστά frameworks σε JavaScript. Σε "κλασικές" ιστοσελίδες, το jQuery χρησιμοποιείται εκατομμύρια φορές...</p>
   ...
</article>

Λόγω του στοιχείου article, μπορείτε να οργανώσετε τα περιεχόμενά σας με σημασιολογικό τρόπο.

Πώς μπορεί να φαίνεται κάτι τέτοιο, είναι ξεκάθαρο μέσα από ένα blog.

<article>
  <header>
    <h1>Δημιουργία web apps (Μέρος 09): jQuery mobile (1)</h1>
    <p>Δημοσιεύθηκε στις: <time pubdate="pubdate">24.05.2014</time></p>
  </header>
  <p>Το jQuery είναι αμφίβολα ένα από τα πιο γνωστά frameworks σε JavaScript. Σε "κλασικές" ιστοσελίδες, το jQuery χρησιμοποιείται εκατομμύρια φορές...</p>
  ...
  <footer>
    <p><small>Πνευματικά δικαιώματα από PSD-Tutorials.de</small></p>
  </footer>
</article>

Σε αυτό το παράδειγμα, μέσα στο στοιχείο article, γίνεται η πολύ τυπική διαίρεση σε κορυφή, κύριο κομμάτι και υποσέλιδο. Και μια τέτοια διαίρεση είναι πολύ συνηθισμένη σε blogs.

Δημιουργία Ενοτήτων

Συνεχίζουμε με το στοιχείο section. Το στοιχείο section χωρίζει τη σελίδα σε διάφορες ενότητες. Μπορεί για παράδειγμα να πρόκειται για ενότητες, κεφάλαια, καρτέλες κλπ. Με το section μπορούν να χωριστούν λογικά τμήματα όπως η εισαγωγή και τα τρέχοντα νέα.

Το section χρησιμεύει στη διάκριση του περιεχομένου σύμφωνα με πραγματικά περιεχομενικά κριτήρια. Στη συνέχεια, θα αναφερθώ πάλι στη διαφορά μεταξύ section και div στο τέλος αυτού του οδηγού.

Το ακόλουθο παράδειγμα δείχνει μια τυπική δομή blog. Ωστόσο, αυτή η δομή περιέχει κάτι άλλο που πραγματικά απαιτείται σε πολλά blogs, δηλαδή ένα πεδίο σχολίων. Αυτό το πεδίο σχολίων ορίζεται εντός ενός στοιχείου section. Τα μεμονωμένα σχόλια εντός της περιοχής του section θα εμπεριέχονται σε ξεχωριστά στοιχεία article.

<article>
  <header>
    <h1>Δημιουργία web apps (Μέρος 09): jQuery mobile (1)</h1>
    <p>Δημοσιεύθηκε στις: <time pubdate="pubdate">24.05.2014</time></p>
  </header>
    <p>Το jQuery είναι αμφίβολα ένα από τα πιο γνωστά frameworks σε JavaScript. Σε "κλασικές" ιστοσελίδες, το jQuery χρησιμοποιείται εκατομμύρια φορές...</p>
  ...

  <section>
    <h2>Σχόλια</h2>
    <article>
      <header>
      <h3>Σχολιάστηκε από: Newsfriend</h3>
      <p><time pubdate datetime="2024-10-05T20:10-07:00">Πριν από μία ώρα</time></p>
    </header>
    <p>Ευχαριστώ για το εγχειρίδιο!</p>
    </article>
    <article>
      <header>
      <h3>Σχολιάστηκε από: Becker</h3>
      <p><time pubdate datetime="2024-10-05T20:10-07:00">Πριν από δύο ώρες</time></p>
    </header>
    <p>Εξαιρετικό! Αυτό με βοηθάει πολύ.</p>
    </article>
  </section>
</article>

Επαναλαμβάνω ότι θα μιλήσω λεπτομερώς για τα στοιχεία που χρησιμοποιούνται εδώ, όπως το header, footer κλπ. φυσικά στο τέλος αυτού του οδηγού. Εδώ απλώς να πούμε ότι: Μέσω αυτών των στοιχείων, μπορούν να χωριστούν τα περιεχόμενα σε κορυφή και υποσέλιδο, επιτρέποντας μια περαιτέρω λογική δομή των εγγράφων.

Ένα άλλο παράδειγμα που εξηγεί περισσότερο τη συνδυασμό των στοιχείων article και section. Πραγματικά, το στοιχείο section μπορεί να χρησιμοποιηθεί για να χωριστεί ένα άρθρο σε λογικά τμήματα περιεχομένου, τα οποία έχουν και δικές τους επικεφαλίδες.

<article> 
  <h1>Ανάπτυξη εφαρμογών</h1> 
  <p>Εδώ μπορείτε να μάθετε πώς να δημιουργήσετε web apps.</p>
  <section> 
     <h2>Δημιουργία web apps (Μέρος 09): jQuery mobile (1)</h2> 
     <p>Το jQuery είναι αμφίβολα ένα από τα πιο γνωστά frameworks σε JavaScript.</p> 
   </section> 
  <section> 
     <h2>Δημιουργία web apps (Μέρος 08): Το γρήγορο ξεκίνημα με το jQuery</h2> 
     <p>Το JavaScript είναι μια χρήσιμη τεχνολογία για ιστοσελίδες, καθώς μπορούν να γίνουν διάφορα ενδιαφέροντα πράγματα με αυτό.</p> 
   </section> 
 </article>

Επίσης, είναι εφικτό εντός ενός στοιχείου section να οριστούν στοιχεία article. Ένα τυπικό παράδειγμα μπορεί να είναι ένα πεδίο σχολίων, όπως έχει ήδη δείξει. Ωστόσο, είναι εφικτή και η διαίρεση της ενότητας σε θεματικές περιοχές που αντιμετωπίζονται στο blog.

Εδώ έχουμε και ένα αντίστοιχο παράδειγμα:

<section> 
  <h1>Ανάπτυξη Εφαρμογών</h1>
  <article> 
     <h2>Δημιουργία Web-Apps (Μέρος 09): jQuery mobile (1)</h2> 
     <p>Το jQuery είναι αναμφίβολα ένα από τα πιο γνωστά JavaScript frameworks.</p> 
   </article> 
  <article> 
     <h2>Δημιουργία Web-Apps (Μέρος 08): Γρήγορη εισαγωγή στο jQuery</h2> 
     <p>Το JavaScript είναι μια ωραία λύση για ιστοσελίδες, καθώς μπορείτε να κάνετε διάφορα ενδιαφέροντα πράγματα μέσω αυτού.</p> 
   </article>    
 </section>

Επίσης, μπορείτε να περιέχετε άλλα στοιχεία section μέσα σε ένα στοιχείο section. Οι ενσωματώσεις είναι επομένως επιτρεπτές. Ένα ακόμη παράδειγμα:

<section>
    <h1>PSD-Tutorials.de</h1>
    <section>     
      <h2>Καλώς ήλθατε</h2>     
      <p>Χαιρόμαστε...</p>
    </section>   
    <section>     
      <h2>Οδηγοί</h2>
      <P>Εδώ θα βρείτε τους πιο πρόσφατους οδηγούς μας...</p> 
    </section>
    <aside>
      <p>Επικοινωνία</p>
    </aside>
  </section>
  <footer>
    <p>(c) 2014 PSD-Tutorials.de</p>
  </footer>

Αυτή η ενσωμάτωση section έχει την ακόλουθη δομή:

1. PSD-Tutorials.de

1.1 Καλώς ήλθατε

1.2 Οδηγοί

1.3 Επικοινωνία

2. (c) 2014 PSD-Tutorials.de
   
   Τέτοια δομή είναι επίσης δυνατή.
   
   

Η διαφορά μεταξύ div, article και section

Είναι παραδεκτό ότι δεν είναι εύκολο να καταλάβετε τη διαχωριστική γραμμή μεταξύ div, article και section. Πράγματι, το στοιχείο article ορίστηκε κυρίως για τη δομή των αναρτήσεων ιστολογίου. Το στοιχείο section είναι στην πραγματικότητα ένα επίπεδο κάτω από το article. Επιπλέον, εντός του στοιχείου section πρέπει πάντα να ορίζεται μια επικεφαλίδα. Ακόμη κι αν στην πραγματικότητα δεν ορίζεται κάποια επικεφαλίδα, θα έπρεπε να είναι θεωρητικά εφικτό να οριστεί μια επικεφαλίδα μέσα στο αντίστοιχο στοιχείο.

Φυσικά, τα στοιχεία div δεν είναι απαγορευμένα στο HTML5, αλλά πρέπει να χρησιμοποιούνται κανονικά. Αυτά είναι ενδιαφέροντα για παράδειγμα όταν πρόκειται να συγκεντρώσετε στοιχεία μαζί.

Τέλος, ας επαναλάβουμε την ειδοποίηση σχετικά με τις οπτικές επιπτώσεις των προηγουμένως παρουσιασθέντων στοιχείων. Πράγματι, απαιτείται CSS για μια κατάλληλη μορφοποίηση. Το κανονικό πρότυπο χρήσης των στοιχείων που παρουσιάστηκαν δεν έχει κάποια επίδραση στο πρόγραμμα περιήγησης. Ουσιαστικά δομείτε περιεχόμενο με σημασιολογικό τρόπο. Όλα όσα αφορούν την εμφάνιση ρυθμίζονται μέσω φύλλων στυλ.