18 vrućih novih HTML oznaka za upotrebu danas

HTML oznake
(Slika zaslužna za budućnost)

Dobrodošli u drugi dio vrućih HTML oznaka koje biste trebali koristiti trenutno. S tako velikim brojem HTML tagova koji se mogu koristiti, kako znati koji su najbolji? Pa, da bismo vam pomogli, nabrojali smo ukupno 30 sjajnih oznaka koje će vam pomoći da svoju web stranicu napravite na pravi način.

Ako ste propustili prvi dio popisa, nadoknadite prvi 12 vrućih HTML oznaka na našem bitnom popisu. Želite neke sjajne nove resurse? Evo našeg popisa izvrsnih alati za web dizajn . A ako vam treba neki novi komplet za kodiranje, pogledajte naš odabir najbolja računala za programiranje .

01.i

Tekst koji se prikazuje kao indeks ili nadpis, kao što su atomi u kemijskim formulama ili eksponenti u matematičkim formulama, može se pojedinačno oblikovati u CSS-u. Međutim, da bismo zadržali njihovo semantičko značenje, možemo se poslužiti znakom i elementi odnosno. Ne smiju se koristiti isključivo iz stilskih razloga. U tim je slučajevima CSS pravi pristup.



H2O a2 + b2 = c2

02.

Mnoga web mjesta pružaju kontaktne podatke kako bi pronašli tvrtku ili kontaktirali autora. The element treba upotrijebiti za umotavanje svih ovih podataka kako bi ih automatizirani alati lakše pokupili. Odnosi se na autora web stranice, ali se može odnositi i na autora članka ako je smješten unutar element.

Email: [email protected] Twitter: @netmag

03. i

Mape slika omogućuju da različiti dijelovi slike budu veze na koje se može kliknuti. Iako to nisu novi uzorci dizajna, ipak su korisni za stvaranje interakcija koje bi kroz tekst bile teške, kao što je karta. A traje a Ime atribut koji ga povezuje s element negdje drugdje s a karta korištenja atribut. Svaki unutar a definira mjesto na koje korisnik može kliknuti.

04.

HTML oznake: video

Neki preglednici eksperimentiraju s prikazom videozapisa u malom plutajućem prozoru na zaslonu dok kartica nije aktivna(Slika zaslužna: Matt Crouch)

The element bio je izvanredan dodatak koji je stigao u HTML5. Ovo, sa svojim ekvivalent, pokreće gotovo sve medije na webu danas.

Može imati atribut src koji definira sadržaj koji će se reproducirati ili skup unutar njega elemente iz kojih preglednik može birati. Odlučit će koji će izvor reproducirati na temelju redoslijeda koji im se daje. Možemo odabrati posluživanje videozapisa više kvalitete onima s zaslonima veće gustoće ili manje dinamičnog sadržaja za one koji preferiraju smanjeno kretanje.

Neki preglednici eksperimentiraju s prikazom videozapisa u malom plutajućem prozoru na zaslonu dok kartica nije aktivna. To se može omogućiti pomoću autopictureinpicture atribut. Također se može izričito onemogućiti korištenjem disablepictureinpicture .

Slično tome, sadržaj se može dijeliti s udaljenim uređajem poput Chromecasta ili Apple TV-a ako ga preglednik podržava. To se može kontrolirati pomoću JavaScript-a ili potpuno onemogućiti pomoću onesposobitiremoteplyback atribut.

05.

Dok je atribut cite na i

elementi mogu biti korisni metapodaci, sam element koristi se kada citirani izvor želimo pokazati korisniku. A element treba sadržavati samo ime citiranog djela, poput knjige ili drame. Ne bi trebao sadržavati imena bilo koga tko je uključen u njegovo stvaranje.

Net magazine

06.

Moderni uređaji dolaze sa zaslonima različitih veličina, omjera i gustoće piksela. Dostavljanjem samo malih ili samo velikih slika, korisnici dobivaju manje kvalitetno iskustvo primanjem slika niske razlučivosti ili sporijim učitavanjem stranice.

The element omogućuje nam definiranje različitih izvora za istu sliku, ovisno o više čimbenika kao što su širina zaslona, ​​orijentacija uređaja ili podrška za određeni format kao što je WebP. Sve što je potrebno je postavljanje odgovarajućeg medijskog upita za svaki definirani s srcset atribut.

Na primjer, korisnici koji se kreću u mračnom načinu mogu dobiti tamniju sliku pomoću upita preferirana shema boja: tamni medij.

To nam onda daje određenu kontrolu nad time koju sliku pokazati. Sličan srcset atribut na element daje pregledniku veću slobodu nad odabirom izvora. Koristiti element za namjerno usmjeravanje umjetnosti, poput pojednostavljenja dijagrama za manje zaslone.

07.

Umotavanjem riječi ili fraze u element, to ukazuje da je to pojam koji se definira. Kad se postavi unutar a

,

ili sadržaj koji ga okružuje tretira se kao definicija. Atribut id može se koristiti za povezivanje s njim kad god se sljedeći put pojavi na stranici.

Semantic markup is HTML that provides meaning to content as well as presentation.

08.

U tehničkom pisanju varijable su česta pojava. Kako bi se izbjegla zabuna s ostatkom riječi u rečenici, element se može koristiti za njihovo zasebno odvajanje i oblikovanje. Za veće izraze MathML može biti prikladniji pristup. Ali može biti korisno kada se odnosi na dijelove većeg izraza kao dio rečenice.

Using Pythagoras’ theorem, the squares of sides a and b give the square of the hypotenuse c.

09. i

HTML oznake: citat

The Verge uvija svoje citate u obliku element za njihovo uklanjanje iz glavnog toka(Slika zaslužna: Matt Crouch)

DO element je ugrađeni element dizajniran da sadrži citat nekoga ili nečega. Stilovi korisničkog agenta automatski će umotati njegov sadržaj u navodnike. Ima neobavezni atribut citiranja koji može biti veza natrag na izvorni izvor.

The

element izvodi istu ulogu, ali za dulje citate na razini bloka.

Jeremy Keith describes HTML as the unifying language of the World Wide Web.
It has an optional `cite` attribute that can be a link back to the original source.

10. i

HTML oznake: slika

BBC News koristi izvanmrežni opis kako bi čitateljima zaslona rekao da ne podržavaju
o svojoj ulozi(Slika zaslužna: Matt Crouch)

Blokovi teksta često mogu sadržavati sadržaj kao što je dijagram, grafikon ili slika na koji se upućuje. Iako je možda povezan, nije potrebno razumjeti kontekst. Za ovu vrstu sadržaja, element savršen je izbor.

U pravilu su svi povezani sadržaji koji mogu biti samostalni dobri kandidati jer se mogu konzumirati odvojeno od glavnog toka dokumenata. Na njih će se vjerojatno pozivati ​​broj u većem bloku teksta.

DO

element može se koristiti za opis sadržaja. Korištenjem ovoga dobiva se semantička poveznica i osigurava da opis ne čini dio same slike.

Ako je sadržaj tangencijalno povezan s glavnim dokumentom, poput citata, tada se element možda više odgovara.

JavaScript framework statistics 2010-2020

jedanaest.

Ovaj bi element trebao sadržavati popis različitih radnji koje korisnik može izvršiti. Na primjer, ovo bi se koristilo pri odabiru četkica za boje u aplikaciji za slikanje. Zamislite ovo kao interaktivni ekvivalent

    element.

    Prije je atribut type utjecao na ponašanje izbornika. Vrsta konteksta omogućila bi dodavanje stavki u kontekstni - ili 'desni klik' - izbornika, ali to je u međuvremenu uklonjeno iz specifikacije. Trenutno je zadana i jedina dostupna vrsta alatna traka koja se koristi za prikaz tih elemenata na zaslonu.

    Prema zadanim postavkama, ovaj element nema stil i koristi se samo za značenje skupa radnji. Trenutno samo Firefox poštuje njegovu semantiku, ali nema štete ako se sada doda ovaj element kad postoji šira podrška.

  • Round
  • Flat
  • Fan
  • 12. i

    HTML oznake: del / ins

    Bitbucket koristi i za prikaz onoga što se kod promijenio u svakom urezivanju(Slika zaslužna: Matt Crouch)

    Prilikom prikazivanja promjena na bloku teksta može biti korisno vizualno vidjeti što se promijenilo. The element pokazuje što je uklonjeno i što ga je zamijenilo. Oboje mogu imati atribute cite i datetime, koji definiraju zašto i kada je došlo do ove promjene.

    Despite the constant negative press covfefecoverage

    13.

    HTML oznake: Ulaz

    The boja ulaz na iOS-u predstavlja dodirnije sučelje s ograničenim opcijama(Slika zaslužna: Matt Crouch)

    Dok element može biti jedan od najstarijih elemenata u okolici, ima puno trikova u rukavu. I danas ih mnoga web mjesta još uvijek ne koriste u svom punom potencijalu.

    The tip atribut na ulazu može dramatično promijeniti njegovo ponašanje. Na primjer, boja prikazat će korisniku odabir boja bez potrebe za dodatnim JavaScriptom. A domet prikazat će klizač za odabir između dvije vrijednosti, umjesto da zahtijeva unos određene vrijednosti. A datum ulaz prikazuje lokalizirani birač datuma bez dodatnih troškova. Iako imaju široku podršku preglednika, oni koji nemaju prikazat će redoviti unos teksta i tada im se može pružiti zamjensko iskustvo.

    Svi oni automatski provjeravaju svoj sadržaj na način koji ima smisla za taj unos. Za dodatne provjere, uzorak atribut može prihvatiti regularni izraz koji treba unijeti unesena vrijednost da bi se mogao poslati.

    14.

    Prikazivanje sadržaja u zasebnom, istaknutom prozoru popularan je obrazac na webu. To su obično poznati kao 'modaliteti', ali element pokriva više slučajeva upotrebe kao što su upozorenja.

    Samostalno, a element neće biti vidljiv. Pojavit će se samo s primijenjenim atributom open, automatski prikazanim iznad ostatka sadržaja stranice.

    Prateći JavaScript API omogućuje otvaranje dijaloških okvira pomoću metode showModal, koja mu tada daje pseudo-element :: backdrop. To se zatim može oblikovati da priguši sadržaj iza njega.

    Trenutno su podržani samo internetski preglednici Chrome, Edge i Samsung. Za one kojima nedostaje podrška, dijaloški će se okviri prikazati kao bilo koji drugi spremnik i mogu se višestruko ispuniti kako bi djelovali isto.

    This is a HTML-powered dialog box.

    petnaest.

    HTML oznake: kbd

    Časopis Smashing stilizira element koji će izgledati poput malog računalnog ključa(Slika zaslužna: Matt Crouch)

    Kada dajemo upute na tipkovnici, poput prečaca ili unosa za pretraživanje, moramo razlikovati nazive tipki od ostatka okolnog teksta. The element se posebno primjenjuje u tu svrhu. elementi se mogu ugnijezditi po potrebi, kao što je kombinacija prečaca.

    Close this window by pressing Esc

    16.

    HTML oznake: metar

    Pojava razlikuje se ovisno o pregledniku, ali njime se može upravljati pojedinačnim stiliziranjem pseudo-elemenata(Slika zaslužna: Matt Crouch)

    Za numeričke podatke koji imaju definirani raspon, element može pružiti vizualnu naznaku što ti podaci znače u kontekstu. Preglednik može uvjetno stilizirati element kako bi upozorio na previsoke ili niske vrijednosti. A ne smije se koristiti za označavanje napredovanja. Zbog toga je element je bolje prikladan.

    17.

    Iako određeni datum ili vrijeme u rečenici mogu biti očiti u kontekstu, strojevi koji raščlanjuju taj sadržaj možda neće razumjeti. The element odvaja datum ili vrijeme od ostatka rečenice i može pružiti a Datum vrijeme atribut koji prikazuje datum u formatu koji je lakši za raščlanjivanje strojevima.

    GenerateJS is happening on the 2nd April!

    18.
    ,
    i

    Koristi se za skupove parova ključ / vrijednost, poput rječnika. Popis opisa (

    ) grupira skup pojmova i njihove opise. Svaki je pojam sadržan u
    element, nakon čega slijedi opis unutar a
    . Više pojmova može se definirati jednim opisom i obrnuto. Red je jedino važan.

    Element
    A group consisting of a start tag, contents, and an end tag.

    Ovaj se sadržaj izvorno pojavio u časopisu net.

    Čitaj više: