HTML(5) Style Guides and Coding Conventions

Συμβάσεις κώδικα HTML

Οι προγραμματιστές ιστοσελίδων συχνά δεν είναι βέβαιοι για τον τύπο κώδικα και τη σύνταξη που χρησιμοποιούν στο HTML.

Στα έτη 2000-2010, πολλοί προγραμματιστές ιστοσελίδων μεταβίβαζαν από το HTML στο XHTML.

Με το XHTML, οι προγραμματιστές πρέπει να γράψουν αποτελεσματικό και καλά διαμορφωμένο κώδικα.

Το HTML5 είναι πιο ελαστικό στη��ασή του.

Με το HTML5, πρέπει να δημιουργήσετε τα δικά σαςΚαλές πρακτικές, οδηγίες στυλ και συμβάσεις κώδικα.

Έξυπνο και με επαγγελματική εγγύηση

Η λογική χρήση των στυλ μπορεί να κάνει πιο εύκολη την κατανόηση και χρήση του HTML από άλλους.

Στη μελλοντική, τα προγράμματα όπως οι αναγνώστες XML, μπορεί να χρειαστούν να διαβάσουν το HTML σας.

Χρησιμοποιήστε καλά διαμορφωμένη γλώσσα που μοιάζει με το XHTML για να γίνετε πιο έξυπνοι.

Σχόλια:Κρατήστε πάντα τα στυλ σας έξυπνα, καθαρά, καθαρά και καλά διαμορφωμένα.

Χρησιμοποιήστε τη σωστή τύπο του έγγραφου

Αποθηκεύστε πάντα την τύπο του έγγραφου στην αρχή του έγγραφου:

<!DOCTYPE html>

Αν ακολουθείτε συνεχώς μικρές γραμματοσειρές για τα ετικέτες, μπορείτε να χρησιμοποιήσετε:

<!doctype html>

Χρησιμοποιήστε μικρές γραμματοσειρές για τα στοιχεία

Το HTML5 επιτρέπει τη χρήση μικρών και μεγάλων γραμματοσειρών για τα ονόματα των στοιχείων.

Προτείνουμε να χρησιμοποιείτε μικρές γραμματοσειρές για τα στοιχεία:

  • Η μείξη γραμματοσειρών δεν είναι καλή
  • Οι προγραμματιστές έχουν συνηθίσει να χρησιμοποιούν μικρές γραμματοσειρές (π.χ. στο XHTML)
  • Η μικρή γραμματοσειρά φαίνεται πιο καθαρή
  • Η μικρή γραμματοσειρά είναι πιο εύκολη να γραφτεί

Μη καλό:

<SECTION> 
  <p>Αυτό είναι ένα παράγραφος.</p>
</SECTION>

Κακό:

<Section> 
  <p>Αυτό είναι ένα παράγραφος.</p>
</SECTION>

Κατάλληλο:

<section> 
  <p>Αυτό είναι ένα παράγραφος.</p>
</section>

Κλείστε όλα τα στοιχεία HTML

Στο HTML5, δεν χρειάζεται να κλείσετε όλα τα στοιχεία (π.χ. στοιχεία <p>).

Συστήνουμε να κλείσουμε όλα τα στοιχεία HTML:

It looks bad:

<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>

It looks good:

<section>
  <p>Αυτό είναι ένα παράγραφος.</p>
  <p>Αυτό είναι ένα παράγραφος.</p>
</section>

Closing empty HTML elements

In HTML5, closing empty elements is optional.

It is allowed to be like this:

<meta charset="utf-8">

It is also allowed to be like this:

<meta charset="utf-8" />

The slash (/) is required in XHTML and XML.

If you expect XML software to access your page, it is a good idea to maintain this habit.

Use lowercase attribute names

HTML5 allows mixed-case attribute names.

We recommend using lowercase attribute names:

  • Mixed attribute names are not good
  • Developers are accustomed to using lowercase attribute names (such as in XHTML)
  • Lowercase attribute names look purer in some cases
  • Lowercase attribute names are easier to write

It looks bad:

<div CLASS="menu">

It looks good:

<div class="menu">

Quoted attribute values

HTML5 allows attribute values without quotes.

We recommend quoting attribute values:

  • If the attribute value contains a value, it must be quoted
  • Mixed styles are absolutely bad
  • Quoted values are easier to read

This attribute value is invalid because it contains spaces:

<table class=table striped>

This is valid:

<table class="table striped">

Required attributes

Always use alt Attributes. This attribute is important when the image cannot be displayed.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Always define image size. This will reduce flickering because the browser reserves space for the image before it loads.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Spaces and equal sign

Spaces on both sides of the equal sign are legal:

<link rel = "stylesheet" href = "styles.css">

But concise spacing is easier to read, But space-less is easier to read, and groups entities better together:

<link rel="stylesheet" href="styles.css">

Avoid long code lines

It is very inconvenient to read HTML code by scrolling left and right when using an HTML editor.

Try to avoid code lines exceeding 80 characters.

Blank lines and indentation

Do not add blank lines without reason.

To improve readability, add blank lines to separate large or logical code blocks.

To improve readability, increase indentation by two spaces. Do not use TAB.

Do not use unnecessary blank lines and indentation.

Απρόσκοπτο:

<body>
  <h1>Προσφιλέστερες Πόλεις</h1>
  <h2>Τόκιο</h2>
  <p>
    Το Τόκιο είναι η πρωτεύουσα της Ιαπωνίας, ο κέντρος της Μεγάλης Περιοχής Τόκιο,
    και η πιο πληθυσμιακή αστική περιοχή στον κόσμο.
    Είναι η έδρα της ιαπωνικής κυβέρνησης και του Αυτοκρατορικού Παλατιού,
    και η έδρα της Ιαπωνικής Αυτοκρατορικής Οικογένειας.
  </p>
</body>

Καλύτερα:

<body>
<h1>Προσφιλέστερες Πόλεις</h1>
<h2>Τόκιο</h2>
<p>
Το Τόκιο είναι η πρωτεύουσα της Ιαπωνίας, ο κέντρος της Μεγάλης Περιοχής Τόκιο,
και η πιο πληθυσμιακή αστική περιοχή στον κόσμο.
Είναι η έδρα της ιαπωνικής κυβέρνησης και του Αυτοκρατορικού Παλατιού,
και η έδρα της Ιαπωνικής Αυτοκρατορικής Οικογένειας.
</p>
</body>

Παράδειγμα πίνακα:

<table>
  <tr>
    <th>Όνομα</th>
    <th>Περιγραφή</th>
  <tr>
  <tr>
    <td>A</td>
    <td>Περιγραφή του A</td>
  <tr>
  <tr>
    <td>B</td>
    <td>Περιγραφή του B</td>
  <tr>
</table>

Παράδειγμα λίστας:

<ol>
  <li>LondonA</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>

Αποσύροντας τις ετικέτες <html> και <body>;

Στα πρότυπα HTML5, μπορεί να αποσυρθεί η ετικέτα <html> και η ετικέτα <body>.

Η παρακάτω κώδικας ελέγχεται ως HTML5:

παράδειγμα

<!DOCTYPE html>
<head>
  <title>Τίτλος Σελίδας</title>
</head>
<h1>Αυτό είναι ένα κεφαλίδι.</h1>
<p>Αυτό είναι ένα παράγραφος.</p>

Δοκιμάστε το προσωπικά

Δεν συνιστούμε την αποσύρρηση των ετικετών <html> και <body>.

Η ετικέτα <html> είναι η ρίζα του κειμένου. Είναι η ιδανική τοποθεσία για να καθορίσετε τη γλώσσα της σελίδας.

<!DOCTYPE html>
<html lang="en-US">

Για προσβάσιμες εφαρμογές (συμβουλευτές οθόνης) και μηχανές αναζήτησης, η δήλωση γλώσσας είναι σημαντική.

Η αποσύρρηση της ετικέτας <html> ή <body> μπορεί να προκαλέσει αποτυχία λογισμικού DOM και XML.

Η αποσύρρηση της ετικέτας <body> μπορεί να προκαλέσει σφάλματα σε παλιούς περιηγητές (IE9).

Αποσύροντας την ετικέτα <head>;

Στα πρότυπα HTML5, η ετικέτα <head> μπορεί επίσης να αποσυρθεί.

Προεπιλεγμένα, ο περιηγητής θα προσθέσει όλους τους στοιχεία πριν από το <body> στο προεπιλεγμένο ετικέτα <head>.

Αποσύροντας το ετικέτα <head>, μπορείτε να μειώσετε την πολυπλοκότητα του HTML:

παράδειγμα

<!DOCTYPE html>
<html>
<title>Τίτλος Σελίδας</title>
<body>
  <h1>Αυτό είναι ένα κεφαλίδι.</h1>
  <p>Αυτό είναι ένα παράγραφος.</p>
</body>
</html>

Δοκιμάστε το προσωπικά

Σχόλια:Για τους web developers, η παραίτηση από τις ετικέτες είναι άγνωστη. Η δημιουργία κανόνων απαιτεί χρόνο.

Μεταδεδομένα

Το στοιχείο <title> είναι απαραίτητο στο HTML5. Προσπαθήστε να δημιουργήσετε σημαντικούς τίτλους.

<title>Σύνταξη και Τεχνολογία Κώδικα HTML5</title>

Για να διασφαλιστεί η σωστή ερμηνεία και ο σωστός κατάλογος αναζήτησης από τους μηχανές αναζήτησης, η ορισμός γλώσσας και κωδικοποίησης χαρακτήρων στο έγγραφο πρέπει να γίνει όσο το δυνατόν πιο νωρίς:

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Σύνταξη και Τεχνολογία Κώδικα HTML5</title>
</head>

HTML Comments

Τα σύντομα σχόλια πρέπει να γράφονται σε μια γραμμή και να περιέχουν ένα κενό μετά από --> και πριν από -->:

<!-- This is a comment -->

Οι μακρύτεροι σχόλια που διαρκούν σε πολλές γραμμές πρέπει να γράφονται με <!-- και --> σε ξεχωριστές γραμμές:

<!-- 
  Αυτό είναι ένα παράδειγμα μακρού σχολίου. Αυτό είναι ένα παράδειγμα μακρού σχολίου. Αυτό είναι ένα παράδειγμα μακρού σχολίου.
  Αυτό είναι ένα παράδειγμα μακρού σχολίου. Αυτό είναι ένα παράδειγμα μακρού σχολίου. Αυτό είναι ένα παράδειγμα μακρού σχολίου.
-->

Οι μακρύτεροι σχόλια είναι πιο εύκολα παρατηρήσιμα αν είναι ενταγμένα με δύο κενά.

Στυλ

Χρησιμοποιήστε απλό γλωσσάκι για να συνδέσετε το αρχείο στυλ (το attribute type δεν είναι απαραίτητο):

<link rel="stylesheet" href="styles.css">

Οι σύντομοι κανόνες μπορούν να συμπιεστούν σε μια γραμμή, όπως αυτό:

p.into {γραμματοσειρά:"Verdana"; μεγέθύς γραμματοσειράς:16em;}

Οι μακρύτερες κανόνες πρέπει να μοιράζονται σε πολλές γραμμές:

body {
  χρώμα υποβάθρου: ανοιχτόγκρισο;
  γραμματοσειρά: "Arial Black", Helvetica, sans-serif;
  μεγεθύς γραμματοσειράς: 16em;
  χρώμα: μαύρο;
}
  • Το ανοιχτό κόμμα πρέπει να βρίσκεται στην ίδια γραμμή με τον επιλογέα.
  • Χρησιμοποιήστε ένα κενό πριν από το ανοιχτό κόμμα.
  • Χρησιμοποιήστε δύο χαρακτήρες απόκλισης για την απόκλιση.
  • Χρησιμοποιήστε διπλή κόμματα και ένα κενό μετά από κάθε attribute.
  • Χρησιμοποιήστε κενά μετά από κάθε κόμμα ή σemicolona.
  • Χρησιμοποιήστε σημεία στίξης (;) μετά από κάθε τιμή attribute (συμπεριλαμβανομένου του τελευταίου).
  • Χρησιμοποιήστε εισαγωγικά για να περιβάλλετε τιμές που περιέχουν κενά.
  • Το κλειστό κόμμα πρέπει να βρίσκεται σε νέα γραμμή χωρίς κενά.
  • Αποφύγετε να υπερβαίνετε τους 80 χαρακτήρες ανά γραμμή.

Σχόλια:Η προσθήκη κενού χαρακτήρα μετά από κόμμα ή σemicolona είναι γενική κανόνας για όλους τους τύπους γραφής.

Φόρτωση JavaScript σε HTML

Χρησιμοποιήστε απλό γλωσσικό στυλ για να φορτώσετε εξωτερικά σενάρια (το χαρακτηριστικό type δεν είναι απαραίτητο):

<script src="myscript.js">

Πρόσβαση στο στοιχείο HTML μέσω JavaScript

Οι συνέπειες της χρήσης "ακατάστατου" HTML είναι ότι μπορεί να προκαλέσουν σφάλματα JavaScript.

Αυτές οι δύο γραμμές JavaScript θα παράγουν διαφορετικά αποτελέσματα:

var obj = getElementById("Demo")
var obj = getElementById("demo")

Δοκιμάστε το προσωπικά

Αν είναι δυνατόν, χρησιμοποιήστε τις ίδιες συμβάσεις ονοματοδοσίας στο HTML (όπως στο JavaScript).

Παρακαλώ επισκεφθείτε τις οδηγίες για το JavaScript.

Χρησιμοποιήστε ονόματα αρχείων σε πεζά γράμματα

Οι περισσότεροι διακομιστές ιστοσελίδων (Apache, Unix) είναι ευαίσθητοι στη κεφαλαία και μικρά γράμματα για τα ονόματα αρχείων:

Δεν μπορείτε να προσέξετε το London.jpg ως London.jpg.

Άλλοι διακομιστές ιστοσελίδων (Microsoft, IIS) δεν είναι ευαίσθητοι στη κεφαλαία και μικρά γράμματα:

Μπορείτε να προσέξετε το London.jpg είτε ως london.jpg είτε ως London.jpg.

Αν χρησιμοποιείτε συνδυασμό κεφαλαίων και πεζών γραμμάτων, πρέπει να διατηρήσετε υψηλή συνέπεια.

Αν μεταφέρετε από έναν διακομιστή που δεν είναι ευαίσθητος στη κεφαλαία και μικρά γράμματα σε έναν που είναι ευαίσθητος, αυτές οι μικρές σφάλματα θα καταστρέψουν τον ιστότοπό σας.

Για να αποφύγετε αυτά τα προβλήματα, χρησιμοποιήστε πάντα ονόματα αρχείων σε πεζά γράμματα (αν είναι δυνατόν).

Επεκτάσεις αρχείων

Τα ονόματα αρχείων HTML πρέπει να χρησιμοποιούν την επέκταση .html(αντί .htm)

Τα αρχεία CSS πρέπει να χρησιμοποιούν την επέκταση .css.

Τα αρχεία JavaScript πρέπει να χρησιμοποιούν την επέκταση .js.