Ένας οδηγός αρχαρίων για συνδέσμους θέσης HTML5

Τι είναι οι Σύνδεσμοι τοποθεσίας HTML5 για;

idUp μέχρι HTML5, η ετικέτα έχει απαιτήσει ένα χαρακτηριστικό: href. Αλλά το HTML5 κάνει ακόμα και αυτό το χαρακτηριστικό προαιρετικό. Όταν γράφετε μια ετικέτα χωρίς χαρακτηριστικά, ονομάζεται σύνδεσμος θέσης κράτησης θέσης.

Ένας σύνδεσμος κράτησης θέσης φαίνεται ως εξής:

Προηγούμενη

Χρησιμοποιώντας συνδέσμους θέσης κατά την ανάπτυξη

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

σύνδεσμο κειμένου

ως το σύμβολο κράτησης θέσης. Και έχω στείλει sites mockup στους πελάτες με αυτούς τους placeholders μόνο για να έχει ο πελάτης να με ρωτήσει "γιατί οι συνδέσεις στο κείμενο δεν δουλεύουν;"

Το πρόβλημα με τη χρήση μιας ετικέτας hash (#) ως συνδέσμου με σύμβολο κράτησης θέσης είναι ότι ο σύνδεσμος είναι clickable και αυτό μπορεί να προκαλέσει σύγχυση στους πελάτες σας. Και αν κάποιος ξεχάσει να τις ενημερώσει με τις σωστές διευθύνσεις URL, οι σύνδεσμοι αυτοί μπορεί να εμφανιστούν σπασμένοι στο ζωντανό ιστότοπο, επειδή δεν συνδέονται με τίποτα.

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

Χρήση συνδέσμων τοποθεσίας σε ζωντανές τοποθεσίες

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

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

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

Και εκτός από την προσθήκη ειδικού styling (θα σας δείξω πόσο κάτω) σε ένα σύνδεσμο με σύμβολο κράτησης θέσης, ο σύνδεσμος δεν είναι clickable. Έτσι, οι πελάτες δεν συγχέονται σκέπτοντας ότι θα μπορούσαν να πάρουν κάτι άλλο αν κάνουν κλικ στο σύνδεσμο πλοήγησης όπου είναι σήμερα.

Σχεδιασμός συνδέσμων τοποθεσίας

Οι σύνδεσμοι τοποθεσίας είναι απλά στυλ και στυλ διαφορετικό από τους άλλους συνδέσμους στην ιστοσελίδα σας. Απλά φροντίστε να στυλίσατε τόσο την ετικέτα a όσο και την ετικέτα σύνδεσης a:. Για παράδειγμα:

α {χρώμα: κόκκινο; γραμματοσειρά-βάρος: έντονα. κείμενο-διακόσμηση: κανένα? } α: σύνδεσμος {χρώμα: μπλε; γραμματοσειρά-βάρος: κανονική; κείμενο-διακόσμηση: υπογράμμιση; }}

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

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

γραμματοσειρά-βάρος: κανονική;

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