HTML: Semanttinen asettelu. Keskustelua HTML-koodin semantiikasta esimerkein
Semantiikka (ranskalainen sémantique antiikin kreikasta σημαντικός - tarkoittaa) - tiede ymmärtää tiettyjä merkkejä, symbolisarjoja ja muita symboleja. Tätä tiedettä käytetään monilla aloilla: lingvistiikassa, proksemiikassa, pragmatiikassa, etymologiassa jne. En voi kuvitella, mitä nämä sanat tarkoittavat ja mitä kaikki nämä tieteet tekevät. Ja sillä ei ole väliä, olen kiinnostunut semantiikan käytöstä verkkosivuston ulkoasussa.
Muistilappu
En käsittele termiä Semantic Web tässä. Ensi silmäyksellä saattaa vaikuttaa siltä, että aiheet Semantic Web ja semanttinen HTML-koodi ovat lähes sama asia. Mutta itse asiassa semanttinen verkko on melko filosofinen käsite, eikä sillä ole paljon yhteistä nykyisen todellisuuden kanssa.
Semanttinen asettelu - mikä se on?
Kielessä jokaisella sanalla on erityinen merkitys ja tarkoitus. Kun sanot "makkara", tarkoitat elintarviketuotetta, joka on jauhelihaa (yleensä lihaa) pitkänomaisessa kuoressa. Lyhyesti sanottuna tarkoitat makkaraa, et maitoa tai vihreitä herneitä.
HTML on myös kieli, jonka "sanoilla", joita kutsutaan tageiksi, on myös tietty looginen merkitys ja tarkoitus. Tästä syystä ensinnäkin semanttinen HTML-koodi on asettelu, jossa HTML-tunnisteita käytetään oikein , käyttämällä niitä aiottuun tarkoitukseen, kuten HTML-kielen ja verkkostandardien kehittäjät tarkoittivat.
microformats.org on yhteisö, joka pyrkii herättämään semanttisen verkon idealistiset ideat henkiin tuomalla sivun asettelun lähemmäksi samoja semanttisia ihanteita.
Miksi ja kuka ylipäätään tarvitsee semanttista asettelua?
Jos verkkosivuni tiedot näkyvät samalla tavalla kuin suunnittelussa, miksi vaivautua ryöstelemään aivojasi ja miettimään jonkinlaista semantiikkaa?! Tämä on lisätyötä! Kuka tätä tarvitsee?! Kuka arvostaa tätä paitsi toinen taittosuunnittelija?
Olen kuullut tällaisia kysymyksiä usein. Selvitetään se.
Semanttinen HTML web-kehittäjille
Semanttinen koodi käyttäjille
Lisää tiedon saatavuutta sivustolla. Ensinnäkin tämä on tärkeää vaihtoehtoisille aineille, kuten:
semanttinen koodi vaikuttaa suoraan HTML-koodin määrään. Vähemmän koodia -> kevyempiä sivuja -> latautuu nopeammin, vähemmän RAM-muistia tarvitaan käyttäjän puolella, vähemmän liikennettä, pienempi tietokannan koko. Sivustosta tulee nopeampi ja halvempi .
ääniselaimet joille tunnisteet ja niiden attribuutit ovat tärkeitä, jotta sisältö lausutaan oikein ja oikealla intonaatiolla, tai päinvastoin, ei liikaa.mobiililaitteet jotka eivät täysin tue CSS:ää ja siksi luottavat pääasiassa HTML-koodiin ja näyttävät sen näytöllä käytettyjen tunnisteiden mukaan.tulostuslaitteet Tieto tulostuu jopa ilman ylimääräistä CSS:ää paremmalla laadulla (lähempänä suunnittelua), ja ihanteellisen version luominen tulostamista varten muuttuu muutamaksi helpoksi CSS-käsittelyksi.Lisäksi on laitteita ja laajennuksia, joiden avulla voit nopeasti selata asiakirjaa - esimerkiksi Operassa otsikoiden perusteella.
Semanttinen HTML koneille
Hakukoneet parantavat jatkuvasti hakumenetelmiään varmistaakseen, että tulokset sisältävät haluamasi tiedot. todella etsimässä käyttäjä. Semanttinen HTML helpottaa tätä, koska... soveltuu paljon parempaan analysointiin - koodi on selkeämpi, koodi on looginen (näet selvästi missä otsikot ovat, missä navigointi, missä sisältö).
Hyvä sisältö ja laadukas semanttinen asettelu on jo vakava sovellus hyvät sijoitukset hakukonetuloksissa .
HTML-koodin semantiikka on aina kuuma aihe. Jotkut kehittäjät yrittävät aina kirjoittaa semanttista koodia. Toiset arvostelevat dogmaattisia kannattajia. Ja jotkut eivät edes tiedä, mikä se on ja miksi sitä tarvitaan. Semantiikka määritellään HTML:ssä tageissa, luokissa, tunnuksissa ja attribuuteissa, jotka kuvaavat tarkoitusta, mutta eivät määrittele niiden sisältämää tarkkaa sisältöä. Eli puhumme sisällön ja sen muodon erottamisesta.
Aloitetaan ilmeisellä esimerkillä.
Huono koodin semantiikka
Artikkelin otsikko
Ja kirjoittaja
Inko Gnito.
Hyvä koodin semantiikka
Artikkelin otsikko
Jonkun kirjoittaman artikkelin teksti. Inko Gnito - sen kirjoittaja.
Käytä tagia riippumatta siitä, onko HTML5 käyttövalmis vai ei tässä tapauksessa se on tavallista houkuttelevampi osoittaen luokan. Artikkelin otsikosta tulee otsikko, sisällysluettelosta kappale ja lihavoidusta tekstistä tunniste.
.
Mutta kaikkea ei esitetä niin selvästi HTML5-tunnisteilla. Katsotaanpa joukko luokan nimiä ja katsotaan, täyttävätkö ne semanttiset vaatimukset.
Ei semanttinen koodi. Tämä on klassinen esimerkki. Jokainen CSS-ruudukon työpenkki käyttää tämäntyyppisiä luokkanimiä ruudukkoelementtien määrittämiseen. Olipa kyseessä "yui-b", "grid-4" tai "spanHalf" - tällaiset nimet ovat lähempänä merkintöjen määrittämistä kuin sisällön kuvaamista. Niiden käyttö on kuitenkin väistämätöntä useimmissa tapauksissa, kun työskennellään modulaaristen ruudukkomallien kanssa.
Semanttinen koodi. Alatunniste on saanut vahvan merkityksen web-suunnittelussa. Tämä on sivun alaosa, joka sisältää elementtejä, kuten toistuvan navigoinnin, käyttöoikeudet, tekijätiedot ja niin edelleen. Tämä luokka määrittelee ryhmän kaikille näille elementeille kuvaamatta niitä.
Jos olet siirtynyt käyttämään HTML5:tä, on parempi käyttää elementtiä niissä tapauksissa. Huomautus koskee myös kaikkia muita verkkosivun osia (otsikon tulee olla , sivupaneeli - , ja niin edelleen). No, jos et ole vielä omaksunut HTML5:n tehoa (sinulla on luultavasti hyvä syy), vastaavat luokkanimet sopivat erinomaisesti tunnisteiden korvaamiseen.
Ei semanttinen koodi. Se määrittelee sisällön tarkasti. Mutta miksi tekstin pitää olla suurta? Erottuako pienemmistä teksteistä? "standOut" (korostus) on sopivampi tässä tapauksessa. Voit päättää muuttaa korostustekstin tyyliä, mutta et tee mitään sen koon suhteen, jolloin luokan nimi saattaa hämmentää sinua.
Semanttinen koodi. Tässä tapauksessa puhumme elementin tärkeystason määrittämisestä sovellusliittymässä (esimerkiksi kappale tai painike). Korkeamman tason elementissä voi olla kirkkaat värit ja suurempi koko, kun taas alemman tason elementit voivat sisältää enemmän sisältöä. Mutta tässä tapauksessa tyyleille ei ole tarkkaa määritelmää, joten koodi on semanttinen. Tämä tilanne on hyvin samanlainen kuin tagien käyttäminen
, , , ja niin edelleen, mutta muihin käyttöliittymäelementteihin.
Semanttinen koodi. Kunpa jokaisen luokan nimi olisi niin selkeästi määritelty! Tässä tapauksessa meillä on kuvaus osiosta, jossa on sisältöä, jonka tarkoitus on helppo kuvata, kuten "tweetit", "sivut" tai "admin-nav".
Ei semanttinen koodi. Tässä tapauksessa puhumme tyylin asettamisesta sivun ensimmäiselle kappaleelle. Tätä tekniikkaa käytetään kiinnittämään lukijoiden huomio materiaaliin. On parempi käyttää nimeä "intro", joka ei mainitse elementtiä. Mutta on vielä parempi käyttää valitsinta tällaisille kappaleille, kuten artikkeli p:first-of-type tai h1 + p .
Ei semanttinen koodi. Tämä on hyvin yleinen luokan nimi, jota käytetään elementtien muotoilun järjestämiseen. Mutta siinä ei ole mitään, mikä liittyisi sisällön kuvaukseen. Useat semanttiset teoreetikot suosittelevat käyttämään luokan nimeä, kuten "ryhmä". On todennäköistä, että he ovat oikeassa. Koska tämä elementti epäilemättä palvelee useiden muiden elementtien ryhmittelyä, suositeltu nimi kuvaa paremmin sen tarkoitusta yksityiskohtiin sukeltamatta.
Ei semanttinen koodi. Liian yksityiskohtainen kuvaus sisältömuodosta. On parempi valita jokin muu nimi, joka kuvaa sisältöä sen muodon sijaan.
Semanttinen koodi. Luokka kuvaa sisällön tilan erittäin hyvin. Esimerkiksi onnistumisviestillä voi olla täysin erilainen tyyli kuin virheviestillä.
Ei semanttinen koodi. Tässä esimerkissä yritetään määritellä sisällön muoto eikä tarkoitus. "plain-jane" on hyvin samanlainen kuin "normaali" tai "tavallinen". Ihanteellinen CSS-koodi tulee kirjoittaa siten, että sisällön muotoa kuvaavia luokkien nimiä, kuten "tavallinen", ei tarvita.
Ei semanttinen koodi. Tämän tyyppisiä luokkia käytetään yleensä määrittämään sivustoelementtejä, joita ei pitäisi sisällyttää linkkiketjuun. Tässä tapauksessa on parempi käyttää jotain kuten rel=nofollow linkeissä, mutta ei luokkaa kaikelle sisällölle.
Ei semanttinen koodi. Tämä on yritys kuvata sisällön muotoa, ei sen tarkoitusta.
Mutta...
Oletetaan, että verkkosivustollasi on kaksi artikkelia. Ja haluat antaa heille erilaisia tyylejä. "Elokuva-arvostelut" on sinisellä taustalla ja "Breaking News" on punainen tausta ja suurempi kirjasinkoko.
Yksi tapa ratkaista ongelma on tämä:
...
...
Toinen tapa on tämä:
...
...
Varmasti, jos haastat useita kehittäjiä siitä, mikä koodi vastaa paremmin semanttisia vaatimuksia, suurin osa varmasti viittaa ensimmäiseen vaihtoehtoon. Se vastaa täydellisesti tämän oppitunnin materiaalia: tarkoituksen kuvaus ilman linkkejä muotoiluun. Ja toinen vaihtoehto ilmaisee muodon ("blueBg" on luokan nimi, joka muodostuu kahdesta englanninkielisestä sanasta, jotka tarkoittavat "sinistä taustaa"). Jos päätät yhtäkkiä muuttaa elokuva-arvostelujen suunnittelua - esimerkiksi tehdä vihreän taustan, luokan nimi "blueBg" muuttuu kehittäjän painajaiseksi. Ja nimen "elokuva-arvostelu" avulla voit ehdottoman helposti muuttaa suunnittelutyylejä säilyttäen samalla erinomaisen koodituen.
Mutta kukaan ei väitä, että ensimmäinen esimerkki on parempi kaikissa tapauksissa poikkeuksetta. Oletetaan, että tiettyä sinisen sävyä käytetään monissa paikoissa sivustolla. Se on esimerkiksi tausta joillekin sivupalkin alatunnisteille ja alueille. Voit käyttää seuraavaa valitsinta:
Elokuva-arvostelu, alatunniste > div:nth-of-type(2), sivuun > div:nth-of-type(4) ( tausta: #c2fbff; )
Tehokas ratkaisu, koska väri määräytyy vain yhdestä paikasta. Mutta tällaista koodia on vaikea ylläpitää, koska siinä on pitkä valitsin, jota on vaikea visuaalisesti ymmärtää. Tarvitset myös muita valitsimia yksilöllisten tyylien määrittämiseen, mikä johtaa koodin toistoon. Tai voit valita toisenlaisen lähestymistavan ja pitää ne erillään:
Elokuva-arvostelu ( tausta: #c2fbff; /* Värin määritelmä */ ) alatunniste > div:nth-of-type(2) ( tausta: #c2fbff; /* Ja vielä yksi asia */ ) sivuun > div:nth-of - type(4) ( tausta: #c2fbff; /* Ja vielä yksi asia */ )
Tämä tyyli auttaa pitämään CSS-tiedoston järjestyksessä (eri alueet on määritelty eri osioissa). Mutta maksettava hinta on määritelmien toisto. Suurilla sivustoilla saman värin tunnistaminen voi olla useita tuhansia kertoja. Kauhea! Ratkaisu olisi käyttää luokkaa, kuten "blueBg", määrittämään väri kerran ja lisäämään se HTML-koodiin, kun haluat käyttää tätä mallia. Tietenkin on parempi kutsua sitä "mainBrandColor" tai "secondaryFont" päästäksesi eroon muotoilun kuvauksesta. Voit uhrata koodisemantiikan säästääksesi resursseja.
HTML-tunnisteiden tarkoitus on välittää järkeä asiakirja. Älä ole huolissasi siitä, miltä verkkosivusi näyttää. Keskity jokaisen käyttämäsi tunnisteen merkitykseen.
Kirjoittamasi sisällöstä riippuen voit valita sopivan elementin, joka vastaa tekstin merkitystä.
Alue elementit ovat riittävän leveitä materiaaleihin sopivaksi yleistä kohteet (kuten kappaleet tai luettelot) ja paljon muuta erityisiä sisältö kuten (näyttääksesi laskentatuloksen) tai (näyttääksesi tehtävän edistymisen).
Rakenneelementit: sivun järjestely Rakenneelementit auttavat sinua järjestämään sivusi pääosat. Ne sisältävät yleensä muita HTML-elementtejä.
Tässä on mitä tyypillinen verkkosivu voi sisältää:
kuten ensimmäinen sivuelementti, joka voi sisältää logon ja iskulauseen; luettelona linkkejä , jotka johtavat sivuston eri sivuille; sivun otsikkona; sivun pääsisältönä, kuten blogiartikkelina; kuten kestää sivuelementti sijaitsee alareunassa. Tekstielementit: sisällön määrittäminen Sisältä yleensä löytyvät rakenneosat teksti elementtejä, jotka on suunniteltu määrittämään kohde sisältöäsi.
Käytät pääasiassa:
Kappaleita varten;
(järjestämättömille) luetteloille; (järjestetyille) listoille; yksittäisille luettelokohteille; lainauksia varten. Sisäiset elementit: erilaista tekstiä Koska tekstielementit voivat olla pitkiä, mutta sisällöltään erilaisia, pienet kirjaimet elementit sallivat erottaa tekstin osia.
Sisäisiä elementtejä on monia, mutta tavallisesti kohtaat seuraavat:
Vain lukemalla tämän HTML-koodin voit helposti ymmärtää, mitä kukin tarkoittaa HTML-elementti .
Pääsivun otsikko
Tekstitys
Jotkut kaikenlaisia asioita ja jotkut omistettu ja jopa tärkeä sanat.
Toinen kappale.
Kerran sanottu
Yhteiset elementit Kun mikään semanttinen elementti ei sovi sisällöllesi, mutta haluat silti lisätä HTML-elementin (ryhmittelyä tai tyyliä varten), voit tyytyä johonkin kahdesta yleistä elementit:
lohkoelementeille;
sisäisille elementeille. Vaikka nämä HTML-elementit eivät itse asiassa sisällä mitään järkeä , niistä on hyötyä, kun alamme käyttää CSS:ää.
Älä välitä semantiikan kanssa Valittavana on noin 100 semanttista HTML-elementtiä. Se on paljon. Voi olla ylivoimaista käydä läpi tämä luettelo ja valita sisällöllesi sopiva kohde.
Mutta älä käytä liikaa aikaa sen murehtimiseen. Jos pysyt toistaiseksi seuraavassa luettelossa, se riittää.
Rakenteellinen Teksti Pienet kirjaimet
Tänään puhumme HTML5:n semantiikasta. Olen jo kirjoittanut lyhyen arvostelupostauksen aiheesta. Suosittelen, että tutustut siihen ennen tämän artikkelin lukemista. Nyt tarkastellaan tätä asiaa yksityiskohtaisemmin, kuinka HTML5-dokumentin semanttinen rakenne luodaan oikein ja asiantuntevasti.
Tässä artikkelissa luomme vähitellen HTML-sivun ja koristelemme sen semanttisilla HTML5-tageilla.
Kuva - HTML5-sivun semanttinen rakenne.
DOCTYPE ja sisällönkuvauskentät sivun otsikossa Aloitetaan tavallisella HTML5-dokumenttimallilla ja lisätään päähän sisällönkuvauskentät:
Sivun otsikko
Lisäsin tagin
. Sivun otsikon on oltava yksilöllinen koko sivustolle, ja sen otsikossa on oltava sen sivun koko olemus, jolle se on määritetty.</p><p>Mennään pidemmälle. HTML5 esitteli uusia tunnisteita, joita käytetään semanttisten merkintöjen luomiseen dokumenttiin. Nämä ovat header-, nav-, main-, article-, aside-, alatunnisteet jne. tagit. Näytön suhteen ne toimivat samalla tavalla kuin tavalliset. <div>tagit, eli nämä ovat lohkoelementtejä. Mutta jos <div>ei ole semanttista kuormaa, niin header-, nav-, main- ja muut tulisi käyttää vain tarkoituksenmukaisesti.</p><h3>Sivun otsikko</h3><p>Sivun otsikko muotoillaan otsikkotunnisteessa. Huomaa, että sivun otsikko on kirjoitettu h1-tunnisteella.</p><p> <!-- Header страницы -->
<header>
<h1>Sivuston otsikko</h1>
</header>
</p><p>Jos otsikon vieressä on myös iskulause, sijoitamme sen p-, div- tai span-kirjaimeen.</p><p> <!-- Header страницы -->
<header>
<h1>Sivuston otsikko</h1>
<p>sivuston iskulause</p>
</header>
</p><p><b>Huomautus H1-tunnisteesta</b></p><p>On huomattava, että HTML5:ssä H1-tunnistetta käytetään osoittamaan sen säilön otsikkoa, jossa se sijaitsee (tämä voi olla otsikko, osio, artikkeli jne.)</p><p>Ennen HTML5-tunnisteiden tuloa semantiikka oli hieman erilainen ja erilainen. Joten HTML4:ssä voi olla vain yksi H1-otsikko sivulla! Tämä oli pääsääntöisesti artikkelin otsikko tai sivun otsikko (esimerkiksi jos kyseessä on luokkasivu, jolla on useita artikkeleita.) H2:ta käytettiin alaotsikoina tai pääartikkelin osioissa. H3 alaosioille ja niin edelleen.</p><h3>Sivulla navigointi</h3><p>Sivuston päänavigoinnin suunnittelun tulee sisältyä nav-tunnisteeseen. Muista myös, että navigoinnin suunnittelu listaelementeillä on hyvä käytäntö.</p><p> <!-- Главная Навигация по сайту -->
<nav>
<ul>
<li>Koti</li>
<li>Portfolio</li>
<li>Galleria</li>
<li>Yhteystiedot</li>
</ul>
</nav>
</p><h3>Sisältö sivulla</h3><p>Sivun pääsisältö on muotoiltu päätunnisteeseen. Tämä voi olla yksi artikkeli tai useita artikkelien esikatseluja, jos puhumme blogisivusta, jossa on useita merkintöjä. Et voi sijoittaa sivupalkkia, sivun otsikkoa, alatunnistetta tai päänavigointia päätunnisteeseen!</p><p> <!-- Основное содержимое страниц -->
<main>...pääsivun sisältö...</main>
</p><h3>Artikkelin suunnittelu</h3><p>Artikkelitunnistetta käytetään artikkeleiden käärimiseen. Yleensä tämä tunniste sisältää sisältölohkon, joka voidaan poistaa sivun kontekstista ja käyttää erikseen muualla. Tämä voi olla artikkeli (artikkelin koko teksti tai esikatselu), viesti foorumilla jne.</p><p>Alla olevassa esimerkissä näytin artikkelin ulkoasun kontekstissa, päätunnisteen sisällä. Artikkelissa on otsikkolohko, jossa on artikkelin otsikko. Artikkelin julkaisupäivämäärä määritellään erityisellä aikatunnisteella, joka näytetään tavallisena rivielementtinä. Aikatunnisteella on erityinen attribuutti, jossa julkaisuaika on määritettävä konemuodossa. Tämä voi olla vain datetime="2015-09-30" tai tuntien minuuttien ja sekuntien datetime="2015-09-30T15:25:55" . Pubdate-parametri osoittaa, että artikkeli on julkaistu samaan aikaan kuin se kirjoitettiin. Jos tämä on uutinen, voi olla, että uutisten aika on yksi ja julkaisuaika eri, tätä varten sinun on määritettävä aikatunniste kahdesti ja laitettava pubdate vain tagiin, jossa julkaisuaika on ilmoitettu.</p><p> <main>
...
<!-- Статья -->
<article>
<!-- Шапка статьи если в шапке у нас больше чем заголовок -->
<header>
<!-- Заголовок статьи -->
<h1>Artikkelin otsikko</h1>
<!-- Дата публикации статьи -->
<time datetime="2015-09-30T15:25:55" pubdate>syyskuun 30. päivä</time>
</header>
<!-- Подзаголовок страницы -->
<h2>Artikkelin alaotsikko</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?</p><p>Yllä olevasta esimerkistä näet, että otsikko- ja alatunnisteita käytettiin artikkelin sisällä korostamaan artikkelin otsikkoa ja alatunnistetta.</p><h3>Sivupalkki tai sarake widgeteillä</h3><p>Jokaiselle yksittäiselle sivupalkin elementille käytämme sivupalkin. Sen sisällä otsikko on muotoiltu h1-tunnisteella. Joten sivupalkin sarake voi näyttää tältä:</p><p> <!-- Сайдбар -->
<div class="sidebar">
<!-- Виджет в сайдбаре -->
<aside>
<h1>Widgetin otsikko</h1>
...
</aside>
<!-- Виджет в сайдбаре -->
<aside>
<h1>Viimeiset muistiinpanot</h1>
...
</aside>
<!-- Виджет в сайдбаре -->
<aside>
<h1>Suosittuja kommentteja</h1>
...
</aside>
</div>
</p><h3>Osion tunniste</h3><p>Osatunnistetta käytetään edustamaan temaattisesti liittyvän sisällön ryhmää tai osiota. Sen käyttö on samanlaista kuin artikkelin pääasiallinen ero on, että elementin sisällöllä ei saa olla merkitystä <section>itse sivun kontekstin ulkopuolella. On suositeltavaa käyttää tunnisteita ( <h1> – <h6>) osoittaaksesi osion aiheen.</p><p>Jos haluat antaa esimerkin nyt lukemastasi artikkelista, voit kääriä jokaisen kappaleen tunnisteeseen <section>. Osatunnistetta voidaan esimerkiksi käyttää korostamaan aloitussivun sisältölohkoja. Tämä kuulostaa samanlaiselta kuin div-elementin määritelmä, jota käytetään usein sisällön säilytysastiana. Erona on, että div:llä ei ole semanttista merkitystä, eikä se kerro mitään sen sisällä olevasta sisällöstä. Osatunnistetta sitä vastoin käytetään osoittamaan selvästi, että sen sisältämä sisältö liittyy merkitykseltään. Voit korvata osan div-tageistasi osiotunnisteilla, mutta kysy itseltäsi aina kysymys: "Liittääkö tämä sisältö vai ei?"</p><p>Esimerkki osiotunnisteen käytöstä kaupunkiluettelossa:</p><p> <h1>Tapahtuma erillään</h1>
<section>
<header>
<h2>kaupungit</h2>
</header>
<p>Liity seuraamme näissä kaupungeissa vuonna 2010.</p>
<section>
<header>
<h3>Seattle</h3>
</header>
<p>Seuraa keltaista tiili tietä.</p>
<section>
<header>
<h3>Boston</h3>
</header>
<p>Se on Beantown ystävilleen.</p>
<section>
<header>
<h3>Minneapolis</h3>
</header>
<p>Se on niin <em>kiva</em>.</p>
<small>Majoitusta ei tarjota.</small>
</p><h3>Sivuston alatunniste - Alatunniste</h3><p>Sivuston alatunniste on suunniteltu tagilla <footer></p><p> <!-- Подвал сайта -->
<footer>
<p class="copyright">© 2015 sivusto Tekijänoikeus</p>
</footer>
</p><h3>Johtopäätös</h3><p>Voit tarkistaa sivun rakenteen HTML5 outliner -työkalulla. Se näyttää sivun rakenteen lohkojen ja otsikoiden mukaan.</p><p>HTML5:n semantiikka ei rajoitu edellä artikkelissa annettuihin tunnisteisiin. Mutta käyttämällä yllä olevia esimerkkejä, voit päivittää merkintäsi ja tehdä sivustostasi hakukoneystävällisemmän, mikä parantaa sivustosi sijoitusta hakutuloksissa.</p><p>Voit jatkaa tätä aihetta tutkimalla muita uusia HTML5-tageja. Sekä mikroformaatit tietojen suunnitteluun ja jäsentelyyn, kuten schema.org</p><p><b>Tärkeä huomautus HTML5-tunnisteiden käytöstä.</b> Spesifikaatio ei määrittele tiukkoja sääntöjä semanttisten tunnisteiden käytölle, se antaa vain suosituksia niiden käytöstä. Jos et ymmärrä tai et tiedä missä ja mitä HTML5-tunnistetta käyttää, on parempi käyttää diviä, jotta asiakirjan rakennetta ei vahingoiteta tai riko.</p><p><b>Artikkelit ja materiaalit</b></p>
<p>Kuvitukset: Kevin Cornell</p>
<p>Käännös: Vlad Merževitš</p>
<p>Haluan tehdä rohkean ennusteen. Kun sinä ja minä katoamme, HTML on edelleen olemassa. Ei vain aikakautemme miljardeilla arkistoiduilla sivuilla, vaan elävänä, hengittävänä organismina. Liian paljon vaivaa, energiaa ja investointeja käytettiin Internet-työkalujen, protokollien ja alustojen kehittämiseen, jotta se olisi niin helppo hylätä.</p>
<p>Keskitytään omaan vastuuseen. Valitettavasti historiassa meidät yhdistetään sivilisaatiollemme tärkeän työkalun kehittämiseen, jota käytetään viestintään tulevina vuosikymmeninä. Siten, kun omistamme mielemme, tyhjäkäynnillä tai vakavasti, HTML:n parantamiseen, meidän on tänään ymmärrettävä kauaskantoisten päätösten seuraukset.</p>
<p>HTML5, jota W3C äskettäin kaksinkertaisti ponnistelunsa seuraavan HTML-sukupolven muotoilemiseksi, on kehittynyt merkittävästi. Tämä on valtava projekti, joka kattaa paitsi HTML-rakenteen, myös jäsennysmallin, virheiden käsittelyn, DOM:n, resurssien poiminta-algoritmit, mediasisällön, 2D-grafiikan, tietomallit, suojauksen, lataussivut, asiakaspuolen tiedontallennustilan ja paljon muuta .</p>
<p>Myös HTML:n rakenteeseen, syntaksiin ja semantiikkaan on tehty muutoksia, jotka Lachlan Hunt käsitteli artikkelissa osittain.</p>
<p>Mutta tässä artikkelissa keskitytään vain HTML-semantiikkaan. Se on kiinnostanut minua useiden vuosien ajan ja uskon, että semantiikka on olennaisen tärkeä HTML:n tulevaisuuden kannalta.</p>
<p>BBC ilmoitti äskettäin hylkäävänsä ohjelmaluetteloissaan käytetyn hCalendar-mikromuodon ja valittavansa kätevän ja helposti saatavilla olevan lyhennemallin. Tämä osoittaa, että olemme epäilemättä ylittäneet HTML:n semanttiset ominaisuudet, jotka oli tarkoitettu kielelle. Meillä on yksinkertaisesti loppuneet HTML-elementit ja attribuutit, jotka rikastavat asiakirjojen semanttista merkintää. Jos jatkamme huijaamista olemassa olevilla HTML-rakenteilla, syntyy monia ongelmia, koska HTML semanttisena merkintäkielenä kärsii perustavanlaatuisesta puutteesta - sen semantiikka on kiinteä eikä laajennettavissa.</p>
<p>Tämä ei ole vain teoreettinen ongelma. Sadat tuhannet kehittäjät käyttävät class- ja id-attribuutteja luodakseen monipuolisia semanttisia merkintöjä. Samaan aikaan kehittäjät käyttävät lähes poikkeuksetta erityisiä sanakirjoja, joita he itse laativat, sen sijaan, että ne käyttävät olemassa olevista skeemoista otettuja arvoja. Tämä on parhaimmillaan pseudosemantiikkaa.</p>
<p>Monilla Internetin sivuilla käytetään mikromuotoja jäsennellymmän semantiikan lisäämiseen kuin saatavilla olevien HTML-elementtien ja attribuuttien heikko joukko. Tässä tapauksessa luokka-attribuutille käytetyt arvot asetetaan konsensussanastoista, toisinaan muista standardeista, kuten vCardista, ja joskus uusista sanastoista, joissa ei ole kiinteää standardia (kuten hReviewissa).</p>
<h2>Laajentuva semantiikka</h2>
<p>On olemassa todellinen ongelma, joka on ratkaistava. Tarvitsemme HTML:ään mekanismeja, jotka antavat kehittäjille mahdollisuuden lisätä selkeästi ja yksiselitteisesti merkityksellisempää semantiikkaa merkintään pseudosemantiikan sijaan. Tämä on ehkä yksi HTML5-projektin tärkeimmistä tavoitteista.</p>
<p>Mutta tällaisen mekanismin keksiminen ei ole niin helppoa, koska kaikilla ratkaisuilla on rajoituksia. On merkittäviä rajoituksia, joista ehkä suurin on taaksepäin yhteensopivuus. Ratkaisun ei pitäisi rikkoa satoja miljoonia laitteita, joita käytetään nykyään ja joita käytetään vielä monta vuotta. Kehittäjät eivät hyväksy laajasti ratkaisuja, joissa ei ole taaksepäin yhteensopivuutta, koska he pelkäävät lukijoiden menettämisen. Tällaiset päätökset kuihtuvat nopeasti viiniköynnökseen.</p>
<p>Ratkaisun tulee olla yhteensopiva myös tulevien versioiden kanssa. Ei siinä mielessä, että sen pitäisi toimia tulevissa selaimissa - se on selainkehittäjien vastuulla, mutta sen pitäisi olla laajennettavissa. Emme voi odottaa yhdenkään juuri nyt kehitettävän ratkaisun ratkaisevan kaikkia ajateltavissa olevia ja käsittämättömiä tulevaisuuden semanttisia tarpeita. Voimme suunnitella ratkaisun kasvaviin tarpeisiin niiden ilmaantuessa.</p>
<p>Tämä kahden rajoituksen tandem on todella suuri ongelma. Mutta kielen kontekstissa, jonka suuret iteraatiot ovat toistuneet vuosikymmeniä ja jonka merkitys globaalina viestintäalustana on ensiarvoisen tärkeä, tähän haasteeseen on vastattava.</p>
<p>Joten miten HTML5 ratkaisee tämän ongelman? HTML5 tuo joukon uusia elementtejä, joista joitain kutsun "rakenteellisiksi" - <section>
, <nav>
, <aside>
, <header>Ja <footer>. Elementti <dialog>sisältötyyppi on samanlainen kuin <blockquote>. On myös useita tietoelementtejä, kuten <meter>, joka "estää skalaarimittausta tunnetulla alueella tai murto-osaa, kuten käytettyä levytilaa" ja elementtiä <time>, joka määrittää päivämäärän ja/tai kellonajan.</p>
<p>Vaikka nämä elementit voivat olla hyödyllisiä ja näyttävät herättäneen kiinnostusta, ratkaisevatko ne todella ongelman, erityisesti taaksepäin ja tulevan yhteensopivuuden?</p>
<p>Katsotaanpa jokaista rajoitusta.</p>
<h2>taaksepäin yhteensopivuus</h2>
<p>Kuinka modernit selaimet käsittelevät uusia elementtejä, kuten <section>? No, Safarin, Operan, Mozillan ja jopa IE7:n uusimmat versiot renderöivät kaikki sivut näin.</p><p>
<h1>Huipputason otsikko</h1>
<section>
<h1>Toisen tason otsikko</h1>
<p>tämä on teksti osion sisällä</p>
<section>
<h1>Kolmannen tason otsikko</h1>
</p><p>Näyttää hienolta aloitukselta. Mutta kun yritämme asettaa esimerkiksi tämän tyylin elementille <section>
:</p><p>Osa (väri: punainen)</p><p>Useimmat mainitut selaimet muuttivat elementin tyyliä, mutta IE8 (ja IE6–7) eivät.</p>
<p>Meillä on siis vakava taaksepäin yhteensopivuusongelma 75 %:lla tällä hetkellä käytössä olevista selaimista. Ottaen huomioon Internet Explorerin puoliintumisajan voimme ennustaa, että suurin osa käyttäjistä käyttää edelleen IE6:ta ja IE7:ää muutaman vuoden kuluttuakin.</p>
<p>Jos HTML5 tuo uusia elementtejä, mikä on todennäköisyys, että useimmat kehittäjät ottavat ne käyttöön, koska ne eivät ole olennaisesti yhteensopivia useimpien selainten kanssa? Valitettavasti, jos näet vaihtoehtoisen ratkaisun CSS-ongelmaan, on sisällyttää elementtiin class-attribuutti <section>ja yritä sitten muuttaa tyyliä luokan avulla, niin se ei toimi IE:ssä. Voi olla kiertotapa, mutta jos ei, siihen se loppuu.</p>
<p>Siirrytään toiseen rajoitukseen - yhteensopivuus tulevien versioiden kanssa.</p>
<h2>Tulevaisuuden yhteensopiva</h2>
<p>Aloitetaan esittämällä kysymys: "Miksi keksiä uusia elementtejä?" Järkevä vastaus tähän olisi: "Koska HTML:stä puuttuu semanttinen rikkaus, ja lisäämällä näitä elementtejä lisäämme HTML:n semanttista rikkautta - mikä ei ole huono asia, vai mitä?"</p>
<p>Lisäämällä näitä elementtejä pyrimme lisäämään semanttisia ominaisuuksia HTML:ssä, mutta vain kapealla alueella. Riippumatta siitä, kuinka monta elementtiä otetaan käyttöön, harkitsemme aina semantiikan lisäämistä HTML-koodiin. Lisäämällä niin monta uutta elementtiä kuin haluamme, ei silti ratkaista ongelmaa. Meidän ei tarvitse lisätä tiettyjä <b>ehdot</b> HTML-sanakirjaan meidän on lisättävä mekanismi, jonka avulla voimme rikastaa asiakirjaa semantiikan avulla tarpeen mukaan. Teknisestä näkökulmasta meidän on tehtävä HTML:stä laajennettavissa oleva. HTML5:ssä ei ole laajennusmekanismia. Tästä syystä HTML5 tappaa merkittävän osan nykyaikaisista selaimista eikä todellisuudessa lisää semantiikkaa ollenkaan.</p>
<p>Mikset hyväksy olemassa olevaa sanakirjaa, samaa Docbookia? Sen asiakirjarakenteen sanasto on paljon rikkaampi, ja useat asiantuntijat ovat sitä kehittäneet useiden vuosien ajan. Tämä ei kuitenkaan ole argumentti Docbookin puolesta, pointti on, että tehtävä HTML:n semanttisen rikkauden mekanismin tarjoamisesta kulkee omalla tavallaan kiinnittäen vain vähän huomiota parhaisiin käytäntöihin liittyen työhön kolmekymmentä vuotta sitten (alkuperäinen työ alkoi 70-luvun alussa).</p>
<h2>Muutama ajatus ratkaisusta</h2>
<p>Vaikka kritisoin nykyisiä pyrkimyksiä, onko minulla käytännön neuvoja tämän ongelman ratkaisemiseksi? No, aloitan yhdestä.</p>
<p>Vaikka elementtien lisääminen HTML:ään ei ole aihetta, ainakin tässä keskustelussa attribuutit ovat toinen HTML:n looginen alue, johon keskitymme. Olemmehan melkein vuosikymmenen ajan käyttäneet class- ja id-attribuutteja mekanismeina HTML-semantiikan laajentamiseen. Monet kehittäjät tuntevat tämän lähestymistavan ja ovat tyytyväisiä siihen. Mikroformaatit-projekti on osoittanut, että olemassa olevat HTML-attribuutit eivät riitä tarjoamaan universaalia mekanismia HTML-semantiikan laajentamiseen. Joten jos haluamme käyttää määritteitä tämän ongelman ratkaisemiseksi, meidän on sisällytettävä yksi tai useampi uusi attribuutti. Ennen kuin perehdymme tämän toiminnan mekaniikkaan, testataan tätä ratkaisua samojen vaatimusten mukaisesti kuin uudet HTML5-elementit. Mikä tärkeintä, ovatko uudet HTML-attribuutit taaksepäin yhteensopivia? Ja jos on, tarjoaako tämä todellisen mekanismin semanttiselle HTML-laajennukselle?</p>
<p>Otetaan uusi attribuutti käyttöön. Kutsun sitä "rakenteeksi", mutta nimenomaisella nimellä ei ole väliä. Voimme käyttää sitä näin:</p><p>
<div structure="header">
</p><p>Katsotaan kuinka selaimemme käsittelevät sitä. Ja tietysti kaikkien selaimien on vaihdettava tyyliään CSS:n kautta.</p><p>Div (väri: punainen)</p><p>Mutta miten se tehdään?</p><p>Div (fontin paino: lihavoitu)</p><p>Itse asiassa melkein kaikki selaimet, mukaan lukien IE7, ovat tyylikkäitä <div>rakenne-attribuutilla, vaikka sellaista ei olisikaan! Valitettavasti onnemme päättyy tähän, koska... IE6 ei tee tätä. Mutta voimme käyttää attribuuttia HTML:ssä ja kaikki olemassa olevat selaimet tunnistavat sen. Voimme jopa käyttää CSS:ää HTML:n tyylistämiseen attribuutilla kaikissa nykyaikaisissa selaimissa. Ja jos haluamme kiertää vanhempia selaimia, voimme lisätä elementtiin luokan arvon ohjataksemme sen tyyliä. Vertaa tätä HTML5-ratkaisuun, joka lisää uusia elementtejä, joita ei voi muotoilla Internet Explorer 6:ssa tai 7:ssä, ja huomaat, että tämä ratkaisu on ehdottomasti paremmin yhteensopiva taaksepäin.</p>
<h2>Laajennettavuus attribuuttien avulla</h2>
<p>Uusien elementtien sijaan HTML5:n tulisi hyväksyä useita uusia attribuutteja. Jokainen näistä attribuuteista sisällytetään semantiikan luokkaan tai tyyppiin. Esimerkiksi, kuten minä, HTML sisältää rakenteellisen semantiikan, retorisen semantiikan, roolisemantiikan (otettu XHTML:stä) ja muita semantiikan luokkia tai luokkia. Näitä uusia attribuutteja voidaan käyttää samalla tavalla kuin luokkaattribuuttia: elementin luonnetta kuvaavan semantiikan liittämiseen elementtiin sekä metatietojen lisäämiseen elementistä.</p>
<p>Tämä ei eroa XHTML:n rooliattribuutista, mutta sen sijaan, että yksi attribuutti ottaisi kunnian kaikille semanttisille elementeille, meidän on määriteltävä erityyppiset elementin semantiikka ja erotettava ne. Esimerkiksi rooli-attribuutti XHTML:ssä toimii näin:</p><p>
<ul role="navigation sitemap">
<li href="downloads">ladata</li>
<li href="docs">Dokumentointi</li>
<li href="news">Uutiset</li>
</ul>
</p><p>Roolimääritteen arvot ovat välilyönnillä eroteltu luettelo oletussanakirjasta tai tietystä sanakirjasta.</p>
<p>Mikset vain ota roolimääritettä sellaisenaan? No, on olemassa muunlaisia semantiikkaa, joihin roolisanakirja ei sovellu. Esimerkiksi:</p><p>
<p rhetoric="irony">Hän on fantastinen ihminen.</p>
</p><p>Tässä on esitetty teoreettinen semantiikan tyyppi - "retoriikka", jota voidaan käyttää dokumentin retorisen luonteen merkitsemiseen. Tämä elementti ei tietenkään näytä ironista asiakirjassa. Pikemminkin se sisältää ironiaa.</p>
<p>Tässä on toinen esimerkki. HTML:stä puuttuu selvästi tapa liittää koneellisesti luettavat versiot esimerkiksi päivämäärän ihmisen luettavaan versioon. Tämä on BBC:n hCalendar-mikromuotoon liittyvän ongelman ydin, josta keskustelimme aiemmin. Siitä huolimatta <span><span role="2009-05-01">Ensi vuoden toukokuun ensimmäinen</span> ei todellakaan ole mitään järkeä, jotain linjaa <span><span equivalent="2009-05-01">Ensi vuoden toukokuun ensimmäinen</span> ilmestyy.</p>
<p>Jälleen, käytämmekö tälle semanttiselle attribuutille erityistä termiä "ekvivalentti" vai jotain muuta termiä, ei ole tärkeää. Tärkeintä on huomata, että tämä ei ole niin yksinkertaista kuin yhden luokan tai roolimääritteen käyttäminen kaikissa tapauksissa. Oikean laajennettavan ratkaisun saamiseksi, joka tarjoaa taaksepäin yhteensopivuuden ja riittävän joustavuuden, tämänsuuntaisia ratkaisuja kannattaa tutkia. Nimesin tämän osion "Joitakin ajatuksia ratkaisusta", koska hyväksyttävän ratkaisun saavuttamiseksi on tehtävä paljon työtä. Avoimia kysymyksiä ovat muun muassa seuraavat.</p>
<ul><li>Kuinka monta eri semanttista attribuuttia pitäisi olla? Laajentuvatko kategoriat ja jos ovat, miten?</li>
<li>Miten sanakirjat määritellään?</li>
</ul><ul><li>Keksimmekö vain haluamamme termit, samalla tavalla kuin luokkaattribuuttia käytetään, vai pitäisikö mahdolliset arvot määritellä vakiomäärityksellä? Vai pitäisikö olla olemassa mekanismi, jolla sanakirjat voidaan ottaa käyttöön (ja toivottavasti jakaa) jonkin profiilin avulla?</li>
<li>Jos kahden sanakirjan välillä on ristiriita, kuten kaksi identtistä termiä eri sanakirjoissa, miten se ratkaistaan?</li>
<li>Tarvitaanko nimiavaruutta tai muuta vastaavaa mekanismia?</li>
</ul><p>Sen sijaan, että kiirehtisin vastaamaan näihin kysymyksiin, nostan esiin ongelmat, joihin on puututtava, ja aloitan vuoropuhelun. HTML5:ssä tehtyjen päätösten seuraukset ja vaikutukset ovat liian suuret päätöksille, jotka tehdään ilman hyvää kielitieteen, semantiikan, semiotiikan ja niihin liittyvien alojen ymmärtämistä. Toivon, että on selvää, että pelkkä "uusien elementtien luominen" ei ole ratkaisu HTML:n semanttisen tehon lisäämiseen. Älkäämme kiirehtikö näihin päätöksiin, olemmehan antaneet lapsenlapsillemme tarpeeksi ongelmia ilmastonmuutoksen kanssa. Annetaan heille ainakin paras mahdollinen HTML-koodi.</p>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy loading=lazy>");</script>
</div>
</article>
<div class="related-posts">
<h3 class="title text-uppercase text-center">Lisää tästä aiheesta:</h3>
<div class="row">
<div class="post article-wrp with-border col-sm-6 col-md-4">
<div class="article-in-loop">
<a class="thumb-title" href="https://battlecase.ru/fi/top-programm-dlya-udaleniya-draiverov-skachat-driver-sweeper/">
<span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb">
<span class="embed-responsive-item">
<span class="super-wrp">
<span class="span-table">
<span class="span-table-row">
<span class="span-table-row-cell">
<img src="https://i2.wp.com/pc-assistent.ru/wp-content/uploads/2017/06/driver_sweeper_200x175.png" class="img-responsive" alt="Lataa Driver Sweeper – ohjelma ajurien poistamiseen käyttöjärjestelmästä Windows Lataa ohjelma kortin ajurien poistamiseen" loading=lazy loading=lazy>
</span>
</span>
</span>
</span>
</span>
</span>
<span class="date">
</span>
<span class="title">Lataa Driver Sweeper – ohjelma ajurien poistamiseen käyttöjärjestelmästä Windows Lataa ohjelma kortin ajurien poistamiseen</span>
</a>
</div>
</div>
<div class="post article-wrp with-border col-sm-6 col-md-4">
<div class="article-in-loop">
<a class="thumb-title" href="https://battlecase.ru/fi/vykidyvaet-na-rabochii-stol-sniper-elite-v2-vykidyvaet-na-rabochii-stol-sniper-elite-v2-chto/">
<span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb">
<span class="embed-responsive-item">
<span class="super-wrp">
<span class="span-table">
<span class="span-table-row">
<span class="span-table-row-cell">
<img src="https://i2.wp.com/i.rutab.net/upload/tech_issues/audio_check.png" class="img-responsive" alt="Heittää Sniper Elite V2:n työpöydälle Mitä tehdä, jos sniper elite 3 viivästyy" loading=lazy loading=lazy>
</span>
</span>
</span>
</span>
</span>
</span>
<span class="date">
</span>
<span class="title">Heittää Sniper Elite V2:n työpöydälle Mitä tehdä, jos sniper elite 3 viivästyy</span>
</a>
</div>
</div>
<div class="post article-wrp with-border col-sm-6 col-md-4">
<div class="article-in-loop">
<a class="thumb-title" href="https://battlecase.ru/fi/kak-naiti-kartinu-po-fotografii-poisk-pohozhei-fotografii-v-internet-poisk/">
<span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb">
<span class="embed-responsive-item">
<span class="super-wrp">
<span class="span-table">
<span class="span-table-row">
<span class="span-table-row-cell">
<img src="https://i2.wp.com/kompukter.ru/wp-content/uploads/2018/03/klikaem-po-znachku-foto-v-gugl.png" class="img-responsive" alt="Etsitään vastaavaa kuvaa Internetistä" loading=lazy loading=lazy>
</span>
</span>
</span>
</span>
</span>
</span>
<span class="date">
</span>
<span class="title">Etsitään vastaavaa kuvaa Internetistä</span>
</a>
</div>
</div>
</div>
</div>
</div>
<aside id="sidebar" class="col-sm-4 col-sidebar hidden-xs" role="complementary">
<div class="content-menu bs-docs-sidebar">
<div class="progress-right" id="progress-right">0%</div>
<script>
window.onscroll = function() {
var scrolled = window.pageYOffset || document.documentElement.scrollTop;
var scrollprogress = Math.round(scrolled / ((document.documentElement.scrollHeight - document.documentElement.clientHeight) / 100));
document.getElementById('progress-right').innerHTML = scrollprogress + '%';
}
</script>
<div class="ad clearfix text-center">
</div>
</div>
<script>
/**
* Скрипт закріплення блоку при прокрутці
*/
(function() {
var a = document.querySelector('#sidebar'),
b = null,
P = 0;
window.addEventListener('scroll', Ascroll, false);
document.body.addEventListener('scroll', Ascroll, false);
function Ascroll() {
if (b == null) {
var Sa = getComputedStyle(a, ''),
s = '';
for (var i = 0; i < Sa.length; i++) {
if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0) {
s += Sa[i] + ': ' + Sa.getPropertyValue(Sa[i]) + '; '
}
}
b = document.createElement('div');
b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;';
a.insertBefore(b, a.firstChild);
var l = a.childNodes.length;
for (var i = 1; i < l; i++) {
b.appendChild(a.childNodes[1]);
}
a.style.height = b.getBoundingClientRect().height + 'px';
a.style.padding = '0';
a.style.border = '0';
}
var Ra = a.getBoundingClientRect(),
R = Math.round(Ra.top + b.getBoundingClientRect().height - document.querySelector('#content').getBoundingClientRect().bottom); // селектор блока, при достижении нижнего края которого нужно открепить прилипающий элемент
if ((Ra.top - P) <= 0) {
if ((Ra.top - P) <= R) {
b.className = 'stop';
b.style.top = -R + 'px';
} else {
b.className = 'evr-sticky';
b.style.top = P + 'px';
}
} else {
b.className = '';
b.style.top = '';
}
window.addEventListener('resize', function() {
a.children[0].style.width = getComputedStyle(a, '').width
}, false);
}
})()
</script>
<style>
/* Додаємо відступ вгорі, щоб було на одному рівні із змістом */
body.single #breadcrumbs {
margin-bottom: 5px;
}
#content article {
padding-top: 15px;
}
#sidebar .evr-sticky {
position: fixed;
z-index: 101;
}
#sidebar .stop {
position: relative;
z-index: 101;
}
#div-gpt-ad-30906309 {
margin-top: 20px;
}
#sidebar .evr-sticky #div-gpt-ad-30906309,
#sidebar .stop #div-gpt-ad-30906309 {
margin-top: 20px;
}
#sidebar .content-menu {
transition: 0.5s all;
}
#sidebar .content-menu .title {
padding-top: 15px;
font-size: 20px;
margin: 0 0 15px 0;
}
#sidebar .content-menu .title .glyphicon {
padding-right: 5px;
}
#sidebar .content-menu ul {
padding: 0;
margin: 0;
overflow: auto;
}
#sidebar .content-menu .nav li {
margin: 0;
clear: both;
margin-bottom: 4px;
}
/* Bullet before text */
#sidebar .content-menu .nav li a:before {
content: "●";
position: absolute;
font-size: 17px;
color: #dedede;
left: 0;
top: -1px;
}
#sidebar .content-menu .nav li a {
position: relative;
display: inline-block;
font-size: 15px;
color: #000;
line-height: 1.2;
padding: 3px 0 0 18px;
overflow: hidden;
text-decoration: none !important;
}
#sidebar .content-menu .nav li.active:focus>a,
#sidebar .content-menu .nav li.active:hover>a,
#sidebar .content-menu .nav li.active>a,
#sidebar .content-menu .nav li a:hover {
text-decoration: none;
font-weight: normal;
color: #c23085;
background-color: transparent;
border-left: 0 none;
}
/* Bullet before text */
#sidebar .content-menu .nav li.active>a:hover:before,
#sidebar .content-menu .nav li.active>a:before {
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
left: 1px;
color: #c23085;
background: transparent;
}
#sidebar .content-menu .nav li a:hover:before {
color: #c23085;
background: transparent;
}
#sidebar a.go-top {
display: block;
margin-top: 5px;
padding: 14px 0 5px 0;
text-align: center;
text-transform: lowercase;
font-size: 17px;
color: #666;
background: transparent url(/wp-content/themes/sk-Evrikak/i/go-top-in-sidebar.png) no-repeat 50% 50%;
opacity: 0;
transition: 0.2s all;
}
#sidebar a.go-top:hover {
color: #000;
text-decoration: none;
}
/* Якщо блок зафіксовний */
#sidebar .evr-sticky a.go-top {
opacity: 1;
}
#sidebar .evr-sticky {
box-shadow: -9px 0 10px 0 rgba(0, 0, 0, 0.08) !important;
}
</style>
<script>
jQuery(document).ready(function() {
// (c) http://jsfiddle.net/gableroux/S2SMK/
// підсвітка активного пункту меню, bootstrap
jQuery('body').scrollspy({
target: '.bs-docs-sidebar',
offset: 70
});
// даємо висоту меню, щоб зробити прокрутку
jQuery(window).bind("load resize", function() {
var body_w = jQuery("body").width(); // визначаємо ширину вікна
var window_h = jQuery(window).height(); // визначаємо висоту вікна
//alert(window_h);
if (body_w > '767') { // якщо ширина більша 767
window_h = window_h - 375; // коригуємо висоту блоку з меню. віднімаємо висоту блоку «наверх», у перспективі треба буще ще відняти інші-нові блоки
var menu_h = jQuery('#sidebar .content-menu').height();
//if(menu_h > window_h) { // якщо висота усього сайдбару більше висоти екрану, то вказуємо висоту для меню. Воно автоматично розтягне висоту сайдбару, з’явиться прорутка у меню, і сайдбар займе усю висоту вікна
jQuery('#sidebar .content-menu ul.nav').css('height', window_h);
//}
}
});
// парсимо контент і формуємо меню
jQuery('#content .evr-section').each(function() {
var evr_section_id = jQuery(this).attr('id');
var evr_section_title = jQuery(this).find(':header:first').text();
var txt = '<li class="content-menu-item added-by-js"><a href="#' + evr_section_id + '">' + evr_section_title + '</a></li>';
//var txt = txt.unwrap();
//txt = jQuery('li', txt).unwrap;
//txt = txt.unwrap('h3');
//txt = jQuery(txt).wrap('<li>');
jQuery('#sidebar ul.nav').append(txt); // Insert
});
// Додаємо спеціальний клас для посилання на відео
jQuery('#sidebar .content-menu').find("a[href='#entry-video']").addClass('link-to-video');
// навігація по статті (плавна прокрутка до потрібного блоку)
jQuery('#sidebar .content-menu .nav a').click(function() {
jQuery.scrollTo(this.hash, {
offset: -10, // Відступ вгорі
duration: 750
});
return false;
});
// перейти вгору (плавна прокрутка вгору)
jQuery('#sidebar a.go-top').click(function() {
jQuery.scrollTo(this.hash, {
offset: 0, // Відступ вгорі
duration: 450
});
return false;
});
});
</script>
<link type="text/css" href="/wp-content/themes/sk-Evrikak/scroll-Pane/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="https://battlecase.ru/wp-content/themes/sk-Evrikak/scroll-Pane/jquery.mousewheel.js"></script>
<script type="text/javascript" src="https://battlecase.ru/wp-content/themes/sk-Evrikak/scroll-Pane/jquery.jscrollpane.min.js"></script>
<script>
// Прокрутка оновлюється при зміні висоти вікна
jQuery(function() {
jQuery('#sidebar .content-menu ul.nav').each(
function() {
jQuery(this).jScrollPane({
showArrows: jQuery(this).is('.arrow')
});
var api = jQuery(this).data('jsp');
var throttleTimeout;
jQuery(window).bind("load resize", function() {
// IE fires multiple resize events while you are dragging the browser window which
// causes it to crash if you try to update the scrollpane on every one. So we need
// to throttle it to fire a maximum of once every 50 milliseconds...
if (!throttleTimeout) {
throttleTimeout = setTimeout(
function() {
api.reinitialise();
throttleTimeout = null;
},
50
);
}
});
}
)
});
</script>
<style>
/* Styles specific to this particular page */
.scroll-pane {
overflow: auto;
height: 400px;
}
.jspTrack {
background: #dedede;
}
.jspVerticalBar {
width: 6px;
}
.jspDrag {
background: #309dc6;
}
</style>
</aside>
</div>
</div>
<div class="other-posts">
<div class="container">
<h3 class="title text-uppercase text-center h">Muut artikkelit:</h3>
<div class="row articles">
<div class="post article-wrp with-border col-sm-6 col-md-4 col-lg-3">
<div class="article-in-loop">
<a class="thumb-title" href="https://battlecase.ru/fi/samyi-moshchnyi-telefon-v-mire-na-dannyi-moment-samye-moshchnye-smartfony-top-10/">
<span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb">
<span class="embed-responsive-item">
<span class="super-wrp">
<span class="span-table">
<span class="span-table-row">
<span class="span-table-row-cell">
<img src="https://i1.wp.com/technosova.ru/wp-content/uploads/2018/10/2-2.jpg" class="img-responsive" alt="Tehokkaimmat älypuhelimet Top 10 tehokkain puhelin" loading=lazy loading=lazy>
</span>
</span>
</span>
</span>
</span>
</span>
<span class="date">Tehokkaimmat älypuhelimet Top 10 tehokkain puhelin</span>
<span class="title">Nykytekniikan avulla on mahdollista sovittaa teho ja suorituskyky tavalliseen älypuhelimeen...</span>
</a>
</div>
</div>
<div class="post article-wrp with-border col-sm-6 col-md-4 col-lg-3">
<div class="article-in-loop">
<a class="thumb-title" href="https://battlecase.ru/fi/kak-udalitsya-iz-moego-mira-kak-udalit-stranicu-i-akkaunt-v-moem-mire/">
<span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb">
<span class="embed-responsive-item">
<span class="super-wrp">
<span class="span-table">
<span class="span-table-row">
<span class="span-table-row-cell">
<img src="https://i1.wp.com/socialnie-seti.info/wp-content/uploads/2012/09/galochki-dlya-ydaleniya-stranici.jpg" class="img-responsive" alt="Kuinka poistaa sivu ja tili maailmastani" loading=lazy loading=lazy>
</span>
</span>
</span>
</span>
</span>
</span>
<span class="date">Kuinka poistaa sivu ja tili maailmastani</span>
<span class="title">Sattuu niin, että henkilö rekisteröitymisen jälkeen ymmärtää, että tämä sosiaalinen verkosto ei ole häntä varten ja haluaa...</span>
</a>
</div>
</div>
<div class="post article-wrp with-border col-sm-6 col-md-4 col-lg-3">
<div class="article-in-loop">
<a class="thumb-title" href="https://battlecase.ru/fi/ne-udalyaetsya-avast-chto-delat-kak-udalit-avast-s-kompyutera-esli-on-ne/">
<span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb">
<span class="embed-responsive-item">
<span class="super-wrp">
<span class="span-table">
<span class="span-table-row">
<span class="span-table-row-cell">
<img src="https://i2.wp.com/vellisa.ru/wp-content/uploads/2018/05/2-1.jpg" class="img-responsive" alt="Kuinka poistaa Avast tietokoneeltasi, jos sitä ei voida poistaa" loading=lazy loading=lazy>
</span>
</span>
</span>
</span>
</span>
</span>
<span class="date">Kuinka poistaa Avast tietokoneeltasi, jos sitä ei voida poistaa</span>
<span class="title">Nyt tarkastelemme kuinka poistaa Avast niin, että virustorjuntaohjelman poistamisen jälkeen tietokone ei...</span>
</a>
</div>
</div>
<div class="post article-wrp with-border col-sm-6 col-md-4 col-lg-3">
<div class="article-in-loop">
<a class="thumb-title" href="https://battlecase.ru/fi/kak-podklyuchit-nokia-lyumiya-800-k-kompyuteru-podklyuchenie-nokia-lumia-k/">
<span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb">
<span class="embed-responsive-item">
<span class="super-wrp">
<span class="span-table">
<span class="span-table-row">
<span class="span-table-row-cell">
<img src="https://i2.wp.com/sms-mms-free.ru/sites/default/files/images/Specifications_Nokia_800_Zune.jpg" class="img-responsive" alt="Nokia Lumian yhdistäminen tietokoneeseen" loading=lazy loading=lazy>
</span>
</span>
</span>
</span>
</span>
</span>
<span class="date">Nokia Lumian yhdistäminen tietokoneeseen</span>
<span class="title">Ensimmäistä kertaa artikkelit ja Lifehacks voivat tuottaa pettymyksen kaikille, jotka ovat äskettäin ostaneet tämän matkapuhelimen...</span>
</a>
</div>
</div>
</div>
</div>
</div>
<style>
/* Додаємо відступ внизу */
body.single #content .ad {
margin-bottom: 20px;
}
/* Додаємо відступ вгорі */
body.single #sidebar .ad {
margin-top: 20px;
}
</style>
<footer id="footer" class="clearfix">
<noindex>
<div class="container row-1 hidden-xs">
<nav class="nav">
<div class="menu menu-footer">
<ul id="menu-podval" class="menu">
<li class="menu-item type-custom object-custom home "><a href="https://battlecase.ru/fi/">Koti</a></li>
<li class="menu-item type-post_type object-page "><a href="">projektista</a></li>
<li class="menu-item type-post_type object-page "><a href="">Mainostajille</a></li>
<li class="menu-item type-post_type object-page "><a href="https://battlecase.ru/fi/sitemap.xml">Sivustokartta</a></li>
<li class="menu-item type-post_type object-page "><a href="https://battlecase.ru/fi/feedback/">Palaute</a></li>
</ul>
</div>
</nav>
</div>
<div class="border-blue clearfix"></div>
<div class="container row-2">
<div class="row">
<div class="col-sm-6">
<div id="text-2" class="block widget-container widget_text">
<div class="textwidget">
<div class="sn">
<a href="https://www.facebook.com/sharer/sharer.php?u=https://battlecase.ru/html-semanticheskaya-verstka-rassuzhdeniya-o-semantike-koda-html-s/" target="_blank"><img src="https://battlecase.ru/wp-content/themes/sk-Evrikak/i/sn/facebook.png" alt="" class="img-responsive" loading=lazy loading=lazy></a>
<a href="https://vk.com/share.php?url=https://battlecase.ru/html-semanticheskaya-verstka-rassuzhdeniya-o-semantike-koda-html-s/" target="_blank"><img src="https://battlecase.ru/wp-content/themes/sk-Evrikak/i/sn/vkontakte.png" alt="" class="img-responsive" loading=lazy loading=lazy></a>
<a href="https://youtube.com/" target="_blank"><img src="https://battlecase.ru/wp-content/themes/sk-Evrikak/i/sn/youtube.png" alt="" class="img-responsive" loading=lazy loading=lazy></a>
</div>
<style>
.sn a {
display: inline-block;
margin: 0 10px 0 0;
width: 55px;
}
@media (max-width:767px) {
.sn {
text-align: center;
}
.sn a {
margin: 0 7px;
width: 43px;
}
}
.sn a:hover {
opacity: 0.9;
}
</style>
</div>
</div>
</div>
</div>
</div>
<div class="border-3 clearfix"></div>
<div class="container row-3">
<div class="row">
<div class="col-sm-8 col-txt col-txt-1">Sivustolle lähetetty materiaali saattaa sisältää tietoja yli 18-vuotiaille käyttäjille.</div>
<div class="col-sm-4 col-txt col-txt-2 text-right">
<div class="project-by-um">2012-2018 <img src="https://battlecase.ru/wp-content/themes/sk-Evrikak/i/svg/logo-ukr-media.svg" width="90" class="img-responsive" loading=lazy loading=lazy>
</div>
</div>
</div>
</div>
</noindex>
</footer>
</div>
<div class="modal fade" id="modal-search" tabindex="-1" role="dialog" aria-labelledby="modal-searchLabel">
<div class="modal-dialog modal-lg itc-container" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Закрыть"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modal-searchLabel">Sivustohaku</h4>
</div>
<div class="modal-body">
<form role="search" method="get" class="form-search" id="modal-searchform" action="/">
<div class="form-group">
<input type="search" autocomplete="off" spellcheck="false" placeholder="Kirjoita hakuteksti" value="" name="s" id="modal-s" class="input-lg form-control">
</div>
</form>
<div class="modal-search-results"></div>
</div>
</div>
</div>
</div>
<link rel='stylesheet' id='dashicons-css' href='/wp-includes/css/dashicons.min.css?ver=4.9.1' type='text/css' media='all' />
<link rel='stylesheet' id='thickbox-css' href='/wp-includes/js/thickbox/thickbox.css?ver=4.9.1' type='text/css' media='all' />
<script type='text/javascript' src='https://battlecase.ru/wp-content/plugins/decomments/templates/decomments/assets/js/decom.min.js?ver=1513648647'></script>
<script type='text/javascript' src='https://battlecase.ru/wp-content/themes/sk-Evrikak/js/modernizr-2.8.3.min.js?ver=4.9.1'></script>
<script type='text/javascript' src='https://battlecase.ru/wp-content/plugins/visualizer/js/lib/clipboardjs/clipboard.min.js?ver=3.0.4'></script>
<script type='text/javascript' src='https://battlecase.ru/wp-content/plugins/mistape/assets/js/mistape-front.js?ver=1.3.3'></script>
<script type='text/javascript' src='https://battlecase.ru/wp-content/plugins/lazy-load/js/jquery.sonar.min.js?ver=0.6.1'></script>
<script type='text/javascript' src='https://battlecase.ru/wp-content/plugins/lazy-load/js/lazy-load.js?ver=0.6.1'></script>
<script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var thickboxL10n = {
"next": "\u0414\u0430\u043b\u0435\u0435 \u2192",
"prev": "\u2190 \u041d\u0430\u0437\u0430\u0434",
"image": "\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435",
"of": "\u0438\u0437",
"close": "\u0417\u0430\u043a\u0440\u044b\u0442\u044c",
"noiframes": "\u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u043e\u0432. \u0423 \u0432\u0430\u0441 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0442\u0435\u0433\u0438 iframe, \u043b\u0438\u0431\u043e \u0432\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438\u0445 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442.",
"loadingAnimation": "http:\/\/battlecase.ru\/wp-includes\/js\/thickbox\/loadingAnimation.gif"
};
/* ]]> */
</script>
<script type='text/javascript' src='/wp-includes/js/thickbox/thickbox.js?ver=3.1-20121105'></script>
<div id="mmenu_res" style="display:none;width:100%;height:40px;line-height:40px;background:#FD6A93;color:#FFFFFF;position:fixed;text-align:center;font-size:23px;;z-index:100000000">
<a class="mmenu_open" href="#irevoltmenu">
<span class="mmenu-icon-bar"></span>
<span class="mmenu-icon-bar"></span>
<span class="mmenu-icon-bar"></span>
</a> Luokat</div>
<div class="modal fade" id="modalAd" tabindex="-1" role="dialog" aria-labelledby="modalAdLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div class="ad text-center">
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="/wp-content/themes/sk-Evrikak/ad/ad_popup-and-bottom/show-ads.css">
<script src="/assets/jquery1.cookie1.js"></script>
<script src="https://battlecase.ru/wp-content/themes/sk-Evrikak/ad/ad_popup-and-bottom/show-ads.js"></script>
</body>
</html>
