Διαφήμιση

Το HTML5 είναι το πιο πρόσφατο και καλύτερο Τι είναι το HTML5 και πώς αλλάζει τον τρόπο περιήγησής μου; [MakeUseOf Εξηγεί]Τα τελευταία χρόνια, μπορεί να έχετε ακούσει τον όρο HTML5 κάθε φορά. Είτε γνωρίζετε κάτι για την ανάπτυξη ιστού είτε όχι, η ιδέα μπορεί να είναι κάπως νεφελώδης και μπερδεμένη. Προφανώς,... Διαβάστε περισσότερα έκδοση της πιο διαδεδομένης γλώσσας σήμανσης στον Ιστό. Υπάρχουν κάποιες μεγάλες αλλαγές από την τελευταία έκδοση της γλώσσας και εάν δεν τις χρησιμοποιείτε, χάνετε κάποια πραγματικά εκπληκτική λειτουργικότητα.

Δεν έχουμε το περιθώριο να καλύψουμε κάθε νέο στοιχείο στην πέμπτη έκδοση του HTML, αλλά αυτά τα εννέα είναι μερικά από τα πιο σημαντικά. Για περισσότερες πληροφορίες σχετικά με τα νέα στοιχεία και API στο HTML5, φροντίστε να το κάνετε δείτε το W3Schools.

Εισαγωγή στα Σημασιολογικά Στοιχεία

Όπως το μεγαλύτερο μέρος του Διαδικτύου, το HTML5 έχει μετατοπιστεί στην εστίαση στη σημασιολογία. Τώρα, αντί να χρησιμοποιούνται ετικέτες απλώς για μορφοποίηση, χρησιμοποιούνται επίσης για να ενημερώνουν τα προγράμματα περιήγησης

και μηχανές αναζήτησης Οι 7 κορυφαίες σημασιολογικές μηχανές αναζήτησης ως εναλλακτική λύση στο Google Διαβάστε περισσότερα η έννοια του τι περιβάλλουν.

Για παράδειγμα,

απλώς λέει σε ένα πρόγραμμα περιήγησης ότι περιέχει μια παράγραφο.

, το οποίο θα συζητήσουμε για λίγο, λέει σε ένα πρόγραμμα περιήγησης ότι περιέχει το κύριο περιεχόμενο της σελίδας.

Ο σημασιολογικός ιστός εξακολουθεί να αναπτύσσεται και αρχίσαμε μόνο να χαράζουμε την επιφάνεια του τι μπορεί να κάνει. Το HTML5 βοηθάει στη μεταφορά σημασιολογική σήμανση Τι είναι η Σημασιολογική σήμανση και πώς θα αλλάξει το Διαδίκτυο για πάντα [Η τεχνολογία εξηγείται] Διαβάστε περισσότερα σε ένα πολύ μεγαλύτερο τμήμα του Διαδικτύου, και αυτό μπορεί να είναι καλό μόνο για το μέλλον της σημασιολογικής επεξεργασίας.

1.

ο

Η ετικέτα ορίζει "ανεξάρτητο, αυτόνομο περιεχόμενο". Το ευκολότερο παράδειγμα είναι, φυσικά, ένα άρθρο. Για αυτό το συγκεκριμένο άρθρο, θα ανοίξουμε την ετικέτα πριν από την εισαγωγή και θα την κλείσουμε μετά το τέλος.

Όλο το κείμενο στην αυτόνομη ενότητα σας.

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

Σε ένα φόρουμ, κάθε ανάρτηση ή νήμα θα μπορούσε να θεωρηθεί αυτόνομη και κάθε μια θα μπορούσε να επισημανθεί με τη δική της

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

2.

Σχετικά στενά με

είναι
. Αυτό ορίζει μια «θεματική ομαδοποίηση περιεχομένου, συνήθως με επικεφαλίδα». Έτσι
θα είναι μέσα
… σωστά?

Οχι απαραίτητα. Το W3 επισημαίνει ότι εξαρτάται από τη δομή του ιστότοπού σας. Ενδέχεται να έχετε αυτόνομο περιεχόμενο σε διαφορετικές ενότητες της σελίδας σας (για παράδειγμα, σκεφτείτε την πρώτη σελίδα ενός ιστότοπου ειδήσεων). Ενδέχεται να έχετε ενότητες εντός αυτού του άρθρου.

Γιατί χρειάζεστε ένα DAC

Όλα ακούγονται καλύτερα.

Πώς να ρυθμίσετε ένα DAC

Να τι πρέπει να κάνετε.. .

Μπορείτε ακόμη και να έχετε ενότητες μέσα σε ενότητες, αν ταιριάζει στη σελίδα σας. Να θυμάστε ότι μια ενότητα είναι απλώς μια "θεματική ομαδοποίηση περιεχομένου" και θα βρείτε πολλά μέρη για να το χρησιμοποιήσετε.

3.

Αυτό το στοιχείο "πρέπει να χρησιμοποιηθεί ως κοντέινερ για εισαγωγικό περιεχόμενο." Εν ολίγοις, είναι το τμήμα της σελίδας σας που βοηθά τους χρήστες να κατανοήσουν τι πρόκειται να διαβάσουν.

Αλλά μην ξεγελιέστε - μπορείτε να χρησιμοποιήσετε αυτό το κοντέινερ περισσότερες από μία φορές. Για παράδειγμα, μπορείτε να το χρησιμοποιήσετε για να προσδιορίσετε τον τίτλο της σελίδας και την εισαγωγική παράγραφο της ανάρτησης του ιστολογίου σας. Αλλά θα μπορούσατε επίσης να το χρησιμοποιήσετε για να επισημάνετε το εισαγωγικό περιεχόμενο για κάθε ενότητα.

Όλα όσα πρέπει να γνωρίζετε για τα DAC

Ακολουθεί μια χρήσιμη εισαγωγή στα DAC ...

Το υπόλοιπο του άρθρου σας πηγαίνει εδώ.

Οι ενότητες κεφαλίδας συνήθως περιέχουν τουλάχιστον μία ετικέτα επικεφαλίδας - H1, H2 και ούτω καθεξής. Δεν χρειάζεται, αλλά σε γενικές γραμμές, εάν χρησιμοποιείτε μια επικεφαλίδα ετικέτα, υπάρχει ένα καλό στοίχημα ότι συμπεριλαμβάνετε περιεχόμενο κεφαλίδας.

4.

Το W3 λέει ότι οι υποσημειώσεις περιέχουν συνήθως τον «συγγραφέα του εγγράφου, πληροφορίες πνευματικών δικαιωμάτων, συνδέσμους προς όρους χρήσης, στοιχεία επικοινωνίας κ.λπ.» Μπορείτε να το σκεφτείτε ως το "νοικοκυριό".

Η τεκμηρίωση αναφέρει επίσης ότι μπορείτε να έχετε περισσότερα από ένα υποσέλιδα στην σελίδα σας. Ίσως είναι καλή ιδέα να διατηρήσετε όλες αυτές τις πληροφορίες σε μία τοποθεσία.

5.

Αυτή η ετικέτα περιέχει τους συνδέσμους πλοήγησης για μια δεδομένη σελίδα. Λάβετε υπόψη ότι μόνο η ενότητα πλοήγησης λαμβάνει αυτήν την ετικέτα και όχι όλους τους συνδέσμους στη σελίδα σας. Είναι για γραμμές πλοήγησης και παρόμοια εργαλεία.

Αυτή είναι μια πολύ απλή ετικέτα - το μόνο που υπάρχει σε αυτό. Χρησιμοποιήστε το για να ορίσετε την ενότητα πλοήγησης και μην τη χρησιμοποιήσετε ξανά στη σελίδα σας.

6.

Ένα από τα πιο ενδιαφέροντα νέα στοιχεία στο HTML5 είναι η άκρη. Το W3 του δίνει τον κάπως ακατάλληλο ορισμό του «κάποιου περιεχομένου εκτός από το περιεχόμενο στο οποίο τοποθετείται».

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

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

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

Αλλά το

Το κύριο άρθρο πηγαίνει εδώ. Το άρθρο συνεχίζεται εδώ.

Επειδή υπάρχουν πολλές χρήσεις για αυτήν την ετικέτα, μπορεί να προκαλέσει σύγχυση. Εάν έχετε κατά νου ότι είναι "δευτερεύον περιεχόμενο" και ότι δεν χρειάζεται πάντα να είναι πλευρική γραμμή, θα έχετε μια καλύτερη ιδέα για το πώς να το χρησιμοποιήσετε.

7.

Πολλοί ιστότοποι έχουν πληροφορίες που πρέπει να εμφανίζονται, αλλά όχι εμφανώς. Ίσως είναι οι πληροφορίες πνευματικών δικαιωμάτων για μια φωτογραφία. Ή η εκτύπωση σε διαγωνισμό. Αυτό το είδος πληροφοριών είναι ακριβώς για ποιον είναι η ετικέτα λεπτομερειών.

Όταν χρησιμοποιείτε την ετικέτα λεπτομερειών, δημιουργείτε κρυφό κείμενο που μπορεί εύκολα να εμφανιστεί. Ακολουθεί ένα παράδειγμα:

Κάντε κλικ εδώ για να δείτε πληροφορίες.

Ακολουθούν πιο λεπτομερείς πληροφορίες που δεν χρειάζεστε αμέσως.

Απλώς κάντε κλικ στο βέλος για να λάβετε τις λεπτομέρειες. Απλός. Η δημιουργία του είναι εξίσου εύκολη. Ακολουθεί ο κωδικός που χρησιμοποιείται για το παραπάνω παράδειγμα:

Κάντε κλικ εδώ για να δείτε πληροφορίες. Ακολουθούν πιο λεπτομερείς πληροφορίες που δεν χρειάζεστε αμέσως.

ο

Η ετικέτα ορίζει την πρόταση που θα εμφανίζεται, ενώ τα άλλα περιεχόμενα είναι κρυμμένα. Λάβετε υπόψη ότι μπορείτε να χρησιμοποιήσετε άλλες ετικέτες στην ενότητα λεπτομερειών: επικεφαλίδες, ενότητες και ούτω καθεξής.

Υπάρχουν και άλλα ωραία πράγματα που μπορείτε να κάνετε με HTML 8 εντυπωσιακά εφέ HTML που μπορούν να προσθέσουν όλοι στον ιστότοπό τουςΔεν χρειάζεται να γνωρίζετε CSS ή PHP για να δημιουργήσετε έναν φανταστικό ιστότοπο. Χρησιμοποιήστε αυτά τα δροσερά κόλπα HTML για να δημιουργήσετε φοβερά εφέ. Διαβάστε περισσότερα , ακόμη και αν δεν γνωρίζετε πολλά CSS ή JSON.

8-9.
και

Μην ανησυχείτε, το η ετικέτα που χρησιμοποιείτε εδώ και χρόνια δεν θα πάει μακριά.

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

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

πηγαίνει μέσα στην ετικέτα σχήματος και καθορίζει μια λεζάντα για μια εικόνα. Μπορεί να μοιάζει κάπως έτσι:

Αυτό είναι το λογότυπό μας!

Αυτό σας δίνει έναν ενσωματωμένο τρόπο για να προσθέσετε μια λεζάντα στις εικόνες σας. Δεν χρειάζεται πλέον να περάσετε από το CMS σας.

Επωφεληθείτε από την ισχύ HTML5

Τα νέα στοιχεία στο HTML5 προσθέτουν μεγάλη ισχύ, ειδικά για σημασιολογικούς σκοπούς. Υπάρχουν επιπρόσθετα στοιχεία για μορφοποίηση, μετρήσεις κλίμακας, πρόοδος εργασιών και άλλα. Μπορείς να δεις όλα τα νέα στοιχεία στο W3Schools.

Αλλά αν μπορείτε να μάθετε αυτά τα εννέα, θα είστε έτοιμοι να κάνετε καλή χρήση του HTML5. Και αν είστε νέοι στο HTML, μην ξεχάσετε να το δείτε αυτά τα παραδείγματα κώδικα 17 απλά παραδείγματα κώδικα HTML που μπορείτε να μάθετε σε 10 λεπτάΘέλετε να δημιουργήσετε μια βασική ιστοσελίδα; Μάθετε αυτά τα παραδείγματα HTML και δοκιμάστε τα σε ένα πρόγραμμα επεξεργασίας κειμένου για να δείτε πώς φαίνονται στο πρόγραμμα περιήγησής σας. Διαβάστε περισσότερα !

Ξεκινήσατε να χρησιμοποιείτε HTML5; Ποια νέα στοιχεία θεωρείτε τα πιο χρήσιμα; Μοιραστείτε τις σκέψεις σας στα παρακάτω σχόλια!

Ο Dann είναι σύμβουλος στρατηγικής περιεχομένου και μάρκετινγκ που βοηθά τις εταιρείες να δημιουργήσουν ζήτηση και δυνητικούς πελάτες. Επίσης, δημοσιεύει ιστολόγια σχετικά με τη στρατηγική και το μάρκετινγκ περιεχομένου στο dannalbright.com.