Mainos

HTML5 on uusin ja suurin Mikä on HTML5 ja miten se muuttaa selaustani? [MakeUseOf selittää]Viime vuosien aikana olet ehkä kuullut termin HTML5 satunnaisesti. Tiedätkö mitä tahansa web-kehityksestä vai ei, konsepti voi olla hieman sumuinen ja hämmentävä. On selvää, ... Lue lisää versio webissä yleisimmin käytetystä merkintäkielestä. Kielen viimeisestä versiosta on tehty joitain suuria muutoksia, ja jos et käytä niitä, kaipaat todella hienoja toimintoja.

Meillä ei ole tilaa peittää kaikkia uusia elementtejä HTML: n viidennessä versiossa, mutta nämä yhdeksän ovat tärkeimpiä. Muista saadaksesi lisätietoja HTML5: n uusista elementeistä ja sovellusliittymistä tarkista W3Schools.

Johdanto semanttisiin elementteihin

Kuten suurin osa Internetistä, myös HTML5 on siirtynyt keskittymään semantiikkaan. Nyt sen sijaan, että tunnisteita käytetään vain muotoiluun, niitä käytetään myös kertomaan selaimille ja hakukoneet 7 parasta semanttista hakukonetta vaihtoehtona Googlelle Lue lisää mitä he ympäröivät.

instagram viewer

Esimerkiksi,

vain kertoo selaimelle, että se sisältää kappaleen.

, josta keskustelemme hetkessä, kertoo selaimelle, että se sisältää sivun pääsisällön.

Semanttinen verkko kehittyy edelleen, ja olemme vasta alkaneet naarmuttaa pintaansa, mitä se voi tehdä. HTML5 auttaa tuomaan semanttinen merkintä Mikä on semanttinen merkintä ja miten se muuttaa Internetiä ikuisesti [tekniikka selitetty] Lue lisää paljon suurempaan osaan Internetiä, ja se voi olla hyvä vain semanttisen prosessoinnin tulevaisuuden kannalta.

1.

tunniste määrittelee ”itsenäisen, itsenäisen sisällön”. Helpoin esimerkki on tietenkin artikkeli. Tämän tietyn artikkelin osalta avasimme tunnisteen ennen johdantoa ja suljetaan sen tekemisen jälkeen.

Kaikki itsenäisen osan teksti.

Mutta on myös muita tapoja, joilla voit käyttää sitä. Esimerkiksi monet ruoanlaittoblogit sisältävät henkilökohtaisia ​​tarinoita siitä, miten resepti syntyi tai miksi se on tärkeä kirjoittajalle. Sen jälkeen seuraa itse resepti. Voisit väittää, että kukin näistä elementeistä voisi olla itsenäinen.

Foorumissa jokaista viestiä tai säiettä voidaan pitää itsenäisenä ja jokainen voidaan merkitä omalla

tag. Sitä käytetään suurimmaksi osaksi sivun pääsisältöön. Mutta muista, että voit käyttää sitä myös luovammin.

2.

Läheisesti sukua

On
. Tämä määrittelee sisällön temaattisen ryhmittelyn, tyypillisesti otsikon kanssa. Niin
on sisällä
... eikö niin?

Ei välttämättä. W3 huomauttaa, että se riippuu sivustosi rakenteesta. Sinun sivusi eri osioissa voi olla itsenäistä sisältöä (ajattele esimerkiksi uutissivuston etusivua). Sinulla saattaa sitten olla artikkeleita osioita.

Miksi tarvitset DAC: n

Kaikki kuulostaa paremmalta.

Kuinka perustaa DAC

Tässä on mitä sinun täytyy tehdä.. .

Sinulla voi olla jopa osioita osioissa, jos se sopii sivullesi. Muista, että osio on yksinkertaisesti "aihekohtainen ryhmittely" ja löydät paljon paikkoja, joissa sitä voi käyttää.

3.

Tätä elementtiä "tulisi käyttää säiliönä johdanto-osassa". Lyhyesti sanottuna se on sivusi osa, joka auttaa ihmisiä ymmärtämään, mitä he aikovat lukea.

Älä siis mene lankaan - voit käyttää tätä säilöä useammin kuin kerran. Voit esimerkiksi käyttää sitä blogin viestin sivun otsikon ja johdantokappaleen tunnistamiseen. Mutta voit käyttää sitä myös kunkin osan johdanto-osan merkitsemiseen.

Kaikki mitä sinun on tiedettävä DAC-laitteista

Tässä on hyödyllinen johdanto DAC: iin ...

Loppu artikkelista menee tähän.

Otsikkoosat sisältävät yleensä ainakin yhden otsikkotunnisteen - H1, H2 ja niin edelleen. Heidän ei tarvitse, mutta yleensä, jos käytät otsikkotunnistetta, on hyvä veto, että sisällytät otsikkosisällön.

4.

W3: n mukaan alatunnisteisiin sisältyy yleensä ”asiakirjan tekijä, tekijänoikeustiedot, linkit käyttöehtoihin, yhteystiedot jne.” Voit ajatella sitä "taloudenhoito" -tavaroina.

Asiakirjoissa todetaan myös, että sivullasi voi olla useita alatunnisteosioita. On kuitenkin luultavasti hyvä idea pitää kaikki nämä tiedot yhdessä paikassa.

5.

Tämä tunniste sisältää tietyn sivun navigointilinkit. Huomaa, että vain navigointiosio saa tämän tunnisteen, ei kaikki sivusi linkit. Se on tarkoitettu navigointipalkkeihin ja vastaaviin työkaluihin.

Tämä on todella yksinkertainen tunniste - siinä kaikki. Käytä sitä määrittääksesi navigointiosan, äläkä käytä sitä uudelleen sivullasi.

6.

Yksi HTML5: n mielenkiintoisimmista uusista elementeistä on sivu. W3 antaa sille jonkin verran turhaa määritelmää "joillekin sisällöille sen sisällön lisäksi, johon se on sijoitettu".

Lyhyesti sanottuna syrjintä on mitä tahansa, mikä liittyy ympäröivään tietoon (mutta on erillään siitä). Se voi olla sivupalkki, joka lisää yksityiskohtia sisältöösi. Kun sitä käytetään sarjassa

tunnisteita, se tarjoaa lisätietoja, joita ei tarvita pääsisällön ymmärtämiseksi.

Esimerkiksi, jos olisimme sisällyttäneet tähän artikkeliin sivupalkin, joka antaa tietoja HTML5: n historiasta, se olisi sivu.

Mutta

Pääartikkeli on täällä. Artikkeli jatkuu täällä.

Koska tälle tunnisteelle on useita käyttötapoja, se voi olla hämmentävä. Jos pidät mielessä, että se on ”toissijaista sisältöä” ja että sen ei aina tarvitse olla sivupalkki, sinulla on parempi käsitys sen käytöstä.

7.

Monilla verkkosivustoilla on tietoa, joka on näytettävä, mutta ei näkyvästi. Ehkä kyse on valokuvan tekijänoikeustiedoista. Tai hieno painatus kilpailussa. Tällainen tieto on tarkalleen mitä yksityiskohdatunniste on.

Kun käytät yksityiskohdatunnistetta, luot piilotetun tekstin, joka voidaan helposti näyttää. Tässä on esimerkki:

Napsauta tätä nähdäksesi tiedot.

Tässä on tarkempia tietoja, joita et tarvitse heti.

Napsauta nuolta saadaksesi yksityiskohdat. Yksinkertainen. Sen luominen on yhtä helppoa. Tässä on yllä olevassa esimerkissä käytetty koodi:

Napsauta tätä nähdäksesi tiedot. Tässä on tarkempia tietoja, joita et tarvitse heti.

tag määrittelee näytettävän virkkeen, kun taas muu sisältö on piilotettu. Huomaa, että voit käyttää muita tunnisteita tietoosassa: otsikot, osiot ja niin edelleen.

On muitakin hienoja asioita, joita voit tehdä HTML: n avulla 8 hienoa HTML-efektiä, jotka kuka tahansa voi lisätä verkkosivustoilleenSinun ei tarvitse tietää CSS: ää tai PHP: tä rakentaaksesi hieno sivusto. Käytä näitä hienoja HTML-temppuja luodaksesi mahtavia tehosteita. Lue lisää myös, vaikka et tiedä paljon CSS: ää tai JSON: ta.

8-9.
ja

Älä ole huolissasi tunniste, jota olet käyttänyt vuosia, ei katoa.

kiertää kuvatunnisteen ja ilmoittaa selaimelle, että se on itsenäinen kuva, kaavio, koodiluettelo tai muu kuva.

Jos hahmo poistetaan sivulta, se ei vaikuta sisällön kulkuun.

menee kuvakoodiin ja määrittelee kuvan kuvatekstin. Se voi näyttää noin:

Tämä on logomme!

Tämä antaa sinulle sisäänrakennetun tavan lisätä kuvateksti kuvatekstiin. Sinun ei tarvitse käydä CMS: n läpi enää.

Hyödynnä HTML5: n teho

HTML5: n uudet elementit lisäävät paljon voimaa, etenkin semanttisiin tarkoituksiin. Muotoilua, skalaarimittauksia, tehtävän etenemistä ja muuta varten on lisäelementtejä. Sinä pystyt näkemään kaikki uudet elementit W3Schools -sivustolla.

Mutta jos osaat hallita näitä yhdeksää, saat hyvät mahdollisuudet hyödyntää HTML5: ää. Ja jos olet uusi HTML-koodi, muista tutustua nämä koodiesimerkit 17 yksinkertaista HTML-koodiesimerkkiä, jotka voit oppia 10 minuutissaHaluatko luoda perussivun? Opi nämä HTML-esimerkit ja kokeile niitä tekstieditorissa nähdäksesi kuinka ne näyttävät selaimellasi. Lue lisää !

Oletko alkanut käyttää HTML5: tä? Mitkä uudet elementit ovat mielestäsi hyödyllisimpiä? Jaa ajatuksesi alla olevissa kommenteissa!

Dann on sisältöstrategia ja markkinointikonsultti, joka auttaa yrityksiä luomaan kysyntää ja johtaa. Hän myös blogeja strategia- ja sisältömarkkinoinnista osoitteessa dannalbright.com.