window.pipedriveLeadboosterConfig = { base: 'leadbooster-chat.pipedrive.com', companyId: 11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', version: 2, } ;(function () { var w = window if (w.LeadBooster) { console.warn('LeadBooster υπάρχει ήδη') } else { w.LeadBooster = { q: [], on: function (n, h) { this.q.push({ t: 'o', n: n, h: h }) }, trigger: function (n) { this.q.push({ t: 't', n: n }) }, } } })() 3 χρήσιμες ετικέτες HTML που μπορεί να μην γνωρίζατε ότι υπάρχουν - The Codest
The Codest
  • Σχετικά με εμάς
  • Υπηρεσίες
    • Ανάπτυξη λογισμικού
      • Ανάπτυξη Frontend
      • Backend Ανάπτυξη
    • Staff Augmentation
      • Frontend Developers
      • Backend Developers
      • Μηχανικοί δεδομένων
      • Μηχανικοί cloud
      • Μηχανικοί QA
      • Άλλα
    • Συμβουλευτική
      • Έλεγχος & Συμβουλευτική
  • Βιομηχανίες
    • Fintech & Τραπεζική
    • E-commerce
    • Adtech
    • Healthtech
    • Κατασκευή
    • Εφοδιαστική
    • Αυτοκίνητο
    • IOT
  • Αξία για
    • CEO
    • CTO
    • Διευθυντής παράδοσης
  • Η ομάδα μας
  • Case Studies
  • Μάθετε πώς
    • Blog
    • Συναντήσεις
    • Διαδικτυακά σεμινάρια
    • Πόροι
Καριέρα Ελάτε σε επαφή
  • Σχετικά με εμάς
  • Υπηρεσίες
    • Ανάπτυξη λογισμικού
      • Ανάπτυξη Frontend
      • Backend Ανάπτυξη
    • Staff Augmentation
      • Frontend Developers
      • Backend Developers
      • Μηχανικοί δεδομένων
      • Μηχανικοί cloud
      • Μηχανικοί QA
      • Άλλα
    • Συμβουλευτική
      • Έλεγχος & Συμβουλευτική
  • Αξία για
    • CEO
    • CTO
    • Διευθυντής παράδοσης
  • Η ομάδα μας
  • Case Studies
  • Μάθετε πώς
    • Blog
    • Συναντήσεις
    • Διαδικτυακά σεμινάρια
    • Πόροι
Καριέρα Ελάτε σε επαφή
Πίσω βέλος GO BACK
2022-10-04
Ανάπτυξη λογισμικού

3 χρήσιμες ετικέτες HTML που μπορεί να μην γνωρίζατε ότι υπάρχουν

The Codest

Jacek Ludzik

Σχεδιαστής προϊόντων

Στις μέρες μας, η προσβασιμότητα (A11y) είναι ζωτικής σημασίας σε όλα τα στάδια της κατασκευής προϊόντων προσαρμοσμένου λογισμικού. Ξεκινώντας από το κομμάτι του σχεδιασμού UX/UI, φτάνει σε προχωρημένα επίπεδα κατασκευής χαρακτηριστικών στον κώδικα. Παρέχει πολλά οφέλη για τους προγραμματιστές που εργάζονται για την αύξηση της DX, αλλά κυρίως για τους τελικούς χρήστες. Ένα από αυτά τα a11y μέρη στην HTML είναι οι σημασιολογικές ετικέτες και αυτό είναι που θα ήθελα να καλύψω εδώ.

Οι προγραμματιστές front-end πρέπει να είναι στενά εξοικειωμένοι με Ετικέτες HTML δεδομένου ότι αυτό είναι το φυσικό τους περιβάλλον σε καθημερινή βάση. Στοιχηματίζω ότι όλοι σας γνωρίζετε κάποιες βασικές ετικέτες όπως

,
,
και ούτω καθεξής. Αλλά, για παράδειγμα, γνωρίζατε ότι μπορείτε να προτείνετε μια στιγμή διακοπής λέξεων χρησιμοποιώντας μόνο HTML, χωρίς CSS;

WBR

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

Geburtstagskuchen

Αυτό είναι! Με μια τόσο απλή ετικέτα, μπορείτε να χειριστείτε τα περιεχόμενα του κειμένου όπως επιθυμείτε.

Αλλά τι γίνεται με την υποστήριξη του προγράμματος περιήγησης; Για να είμαι ειλικρινής, είναι αρκετά καλή. Τα περισσότερα προγράμματα περιήγησης θα καταλάβουν αυτή την ετικέτα, αλλά ο Opera στο Android και ο Safari στο iOS ενδέχεται να έχουν προβλήματα.

Πίνακας συμβατότητας wbr

ΜΕΤΡΟ

Φανταστείτε ότι κατασκευάζετε μια εφαρμογή διαχείρισης αποθήκευσης δίσκων. Πρέπει με κάποιο τρόπο να δείξετε στο UI πόσος αποθηκευτικός χώρος είναι ακόμα διαθέσιμος και θέλετε πραγματικά να το κάνετε όσο το δυνατόν πιο προσιτό. Αυτή είναι μια τέλεια περίπτωση χρήσης για το ετικέτα. Θα σας δώσει μόνο την τιμή εντός ενός καθορισμένου εύρους. Ένα άλλο καλό πράγμα σχετικά με αυτή την ετικέτα είναι τα χαρακτηριστικά της:

  • χαμηλή → όταν η τρέχουσα τιμή είναι χαμηλότερη από τη ρυθμισμένη χαμηλή τιμή, η γραμμή του μετρητή θα γίνει κόκκινη,
  • βέλτιστη → όταν οι τρέχουσες τιμές είναι υψηλότερες από τη βέλτιστη τιμή χαρακτηριστικών, η γραμμή του μετρητή θα γίνει πράσινη,
  • υψηλή → όταν η υψηλή τιμή είναι χαμηλότερη από τη μέγιστη και υψηλότερη από τη βέλτιστη τιμή, η γραμμή του μετρητή θα είναι πορτοκαλί. Διαφορετικά, θα είναι πράσινη.

Ίσως γνωρίζετε επίσης μια παρόμοια ετικέτα, η οποία είναι η πρόοδος. Ποια είναι λοιπόν η διαφορά μεταξύ τους; Η ετικέτα progress πρέπει να χρησιμοποιείται για τρέχουσες εργασίες. Με άλλα λόγια, χρησιμοποιήστε την ετικέτα προόδου όταν ασχολείστε με μια συγκεκριμένη εργασία. Με την ετικέτα μετρητή, θα πρέπει να χρησιμοποιείται για να δείχνει τη χρήση του δίσκου ή της μνήμης. Μια άλλη διαφορά είναι ότι η ετικέτα meter δεν υποστηρίζεται από τον IE και ότι αυτό είναι στην πραγματικότητα το μοναδικό μειονέκτημα αυτής της ετικέτας.

μετρητής συμβατότητας μετρητή

DEL και INS

Αναρωτηθήκατε ποτέ πώς να δημιουργήσετε μια προσβάσιμη ένδειξη των διαγραμμένων και προστιθέμενων τμημάτων περιεχομένου (diff στο GitHub ή ειδοποιήσεις μέσω email από το Jira όταν το ticket έχει ενημερωθεί); Το μόνο που χρειάζεται είναι να τυλίξετε το διαγραμμένο περιεχόμενο με τοετικέτα. Για παράδειγμα: <del><p>Μόλις διαγράφηκε το περιεχόμενο</p></del>. Για να εμφανίσετε μόνο το προστιθέμενο μέρος του περιεχομένου, μπορείτε να χρησιμοποιήσετε την εντολή με τον ίδιο ακριβώς τρόπο. Αυτή η ετικέτα προσφέρει επίσης δύο χαρακτηριστικά:

  • cite → uri ενός πόρου που εξηγεί γιατί προστέθηκε αυτό το μέρος,
  • datetime → δεδομένα και ώρα της αλλαγής.
πίνακας συμβατότητας ins

Υπάρχουν, φυσικά, πολύ πιο χρήσιμα ετικέτες στην HTML . Συνιστώ ανεπιφύλακτα τη χρήση όλων αυτών, όταν αυτό είναι δυνατό και σκόπιμο. Οι πελάτες σας και οι χρήστες της εφαρμογής θα σας ευχαριστήσουν για μια τέτοια προσέγγιση. Να είστε προσεκτικοί όμως, επειδή ορισμένες ετικέτες ενδέχεται να έχουν καταργηθεί. Μπορείτε πάντα να βεβαιωθείτε ότι μια λιγότερο συνηθισμένη ετικέτα που θέλετε να χρησιμοποιήσετε είναι ακόμα έγκυρη και έχει καλή υποστήριξη στο Τεκμηρίωση MDN.

Σχετικά άρθρα

Ανάπτυξη λογισμικού

Μάθετε περισσότερα για το Ruby on Rails με Pub/Sub

Το Pub/Sub μπορεί να προσφέρει πολλά οφέλη στο έργο - μπορεί να κάνει τον κώδικα καθαρό, να αποσυνδέσει τις υπηρεσίες και να τις κάνει εύκολα επεκτάσιμες. Μάθετε περισσότερα για το Pub/Sub στο ακόλουθο άρθρο...

The Codest
Michal Pawlak Ανώτερος προγραμματιστής Ruby
Ανάπτυξη λογισμικού

Εργαλεία Javascript σε δράση

Ανακαλύψτε μερικά εργαλεία ανάκτησης JavaScript για να βελτιώσετε το παιχνίδι προγραμματισμού σας. Μάθετε περισσότερα για το ESLint, το Prettier και το Husky!

The Codest
Reda Salmi React Προγραμματιστής
Ανάπτυξη λογισμικού

Πρόσληψη εσωτερικών έναντι εξωτερικών προγραμματιστών

Πρόσληψη εσωτερικά ή εξωτερικά; Είναι ένα απόλυτο δίλημμα! Μάθετε τα πλεονεκτήματα της outsourcing ή της δημιουργίας μιας εσωτερικής ομάδας στο ακόλουθο άρθρο.

The Codest
Grzegorz Rozmus Επικεφαλής μονάδας Java
Ανάπτυξη λογισμικού

9 λάθη που πρέπει να αποφύγετε κατά τον προγραμματισμό σε Java

Ποια λάθη πρέπει να αποφεύγονται κατά τον προγραμματισμό σε Java; Στο παρακάτω κομμάτι απαντάμε σε αυτό το ερώτημα.

The Codest
Rafal Sawicki Προγραμματιστής Java

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

    Σχετικά με εμάς

    The Codest - Διεθνής εταιρεία ανάπτυξης λογισμικού με κέντρα τεχνολογίας στην Πολωνία.

    Ηνωμένο Βασίλειο - Έδρα

    • Γραφείο 303B, 182-184 High Street North E6 2JA
      Λονδίνο, Αγγλία

    Πολωνία - Τοπικοί κόμβοι τεχνολογίας

    • Πάρκο γραφείων Fabryczna, Aleja
      Pokoju 18, 31-564 Κρακοβία
    • Πρεσβεία του εγκεφάλου, Konstruktorska
      11, 02-673 Βαρσοβία, Πολωνία

      The Codest

    • Αρχική σελίδα
    • Σχετικά με εμάς
    • Υπηρεσίες
    • Case Studies
    • Μάθετε πώς
    • Καριέρα
    • Λεξικό

      Υπηρεσίες

    • Συμβουλευτική
    • Ανάπτυξη λογισμικού
    • Backend Ανάπτυξη
    • Ανάπτυξη Frontend
    • Staff Augmentation
    • Backend Developers
    • Μηχανικοί cloud
    • Μηχανικοί δεδομένων
    • Άλλα
    • Μηχανικοί QA

      Πόροι

    • Γεγονότα και μύθοι σχετικά με τη συνεργασία με εξωτερικό συνεργάτη ανάπτυξης λογισμικού
    • Από τις ΗΠΑ στην Ευρώπη: Γιατί οι αμερικανικές νεοσύστατες επιχειρήσεις αποφασίζουν να μετεγκατασταθούν στην Ευρώπη
    • Σύγκριση υπεράκτιων κόμβων ανάπτυξης τεχνολογίας: Ευρώπη (Πολωνία), ASEAN (Φιλιππίνες), Ευρασία (Τουρκία)
    • Ποιες είναι οι κορυφαίες προκλήσεις των CTOs και των CIOs;
    • The Codest
    • The Codest
    • The Codest
    • Privacy policy
    • Website terms of use

    Πνευματικά δικαιώματα © 2025 από The Codest. Όλα τα δικαιώματα διατηρούνται.

    elGreek
    en_USEnglish de_DEGerman sv_SESwedish da_DKDanish nb_NONorwegian fiFinnish fr_FRFrench pl_PLPolish arArabic it_ITItalian jaJapanese ko_KRKorean es_ESSpanish nl_NLDutch etEstonian elGreek