Olen perhetymässä parhaillaan HTML&CSS:ään ja hiukan mietityttyä noiden tagien oikea käyttö.
HTML kirjassani todetaan että loogisten tekstityylien (esim , ) käyttö on suositeltavampaa kuin fyysisten tekstityylien (esim , ), mutta se herättää kysymyksiä:
a) jos haluan kursiivista tekstiä ja käytän tagia voinko luottaa siihen että teksti todella on kursiivinen kaikissa (myös tulevissa) selaimissa?
b) jos laitan tagiin CSS määrittelyn jolla haluan varmistaa sen että teksti näky kursiivisena kaikissa selaimissa esim:
em {font-style:italic; }
..niin mitä jos joissakin selaimissa ei tuotakaan kursiivista "emphasized" tekstiä (mahdollisesti joku selain näyttää tekstin jollain muulla tavalla korostuneesti), tällöin tekstit näkyvät sekä kursiivisena että selaimen oletusarvoisesti käyttämänä tyylinä (jos se on eri kuin kursiivinen).
c) Voin tietenkin käyttää span&div tageja ja määritellä niihin halutut CSS tyylit mutta tällöin tagien semanttinen merkitys romuttuu (ja ilmeisesti se tekee näytönlukijoiden tehtävän liki mahdottomaksi).
Voisiko joku kertoa mikä on HTML tagien oikeaoppinen peruskäyttö tässä suhteessa, en oikein pääse tästä selville kirjoja lukemalla.
Haluaisin siis oppia sellaisen tagien käytön joka varmistaa sen että HTML/CSS määrittely
näkyy mahdollisimman samanlaisena kaikissa selaimissa (mahdollisimman hyvin varautuen myös tuleviin selaimiin --- mahdollisuuksien mukaan) mutta samalla sivun semanttinen rakenne pitäisi pysyä mahdollisimman "eheänä", onko tämä mahdollista?
HTML ja semantiikka?
6
375
Vastaukset
- näkemykseni
HTML (mukaanlukien CSS, DOM ja ehkä javaScript) on onneton esimerkki kun on aloitettu jostain pienestä ja sitten lähdetty laajentamaan ja kehittämään sitä ilman koordinointia ja ristiriitaisilla kaupallisilla intresseillä. Lopputulos on sekava, huomattava osa ei toimi muuta kuin tietyssä selaimessa, osa ei voida käyttää tietoturvallisuuden takia tai siksi että se ei tuetaan tulevissa selaimissa jne.
Tästä (ja muista syistä) käytän implisittisiä tyyli-määrittelyjä (bold, italic...) enkä (strong, em). Tällöin tiedän mitä saan, eli semanttisesti oikeaa tekstiä (esim. Wordissa ei ole määrittelyjä strong, em jne mutta kyllä sinä pystyt tuottamaan semaattisesti oikeaa tekstiä kuitenkin)
Mielestäni ainoa syy näihin strong, em tageihin olisi jos käyttää hyvin eksoottisia fontteja jotka eivät löydy kaikilta selaimilta. Tällaisia eksoottisia fontteja kannattaa kuitenkin mielestäni välttää koska ihminen lukee tunnettua fontilla kirjoitettu tekstiä nopeammin. - tekijämies
1) Et eikä ole tarkoituskaan. Selaimet (ja niitä on muitakin kuin tietokoneen monitorilta katseltavat) päättävät itse miten ne tulkitsevat loogiset tyylit. Aivan samoin kuin eri selaimet käyttävät eri oletusfonttia.
En ole selannut kännykällä nettisivuja mutta voisin olettaa ettei kursiivi ole paras mahdollinen siinä pienellä näytöllä ja voipi olla että jotkut selaimet käyttävät oletuksena jotain toimivampaa. En tiedä.
Toisaalta jos kerran käytät css:ää niin voit määritellä sen em-tagin esitysasun:
em {font-style: italic;}
Tämän jälkeen kaikki css:ää ymmärtävät selaimet näyttävät em:n kursiivina.
Mitenköhän muuten kursiivi luetaan äänen.. siis jos vaikka sokea selailee sivuasi niin miten -tagi tulkitaan? En tiedä mut tuli vaan meileen..
2) css:llä saa ohitettua kaikki selainten oletukset. Jos selain osaa kunnolla css:ää niin huolesi on turha ja tulevat selaimet tuskin ymmärtävät sitä huonommia ainakaan kuin nykyiset.
3) Käytä ainoastaan (x)html strict -versioihin kuuluvia tageja, ja käytä niitä loogisesti.
Itse käytän div -elementtiä lähinnä muiden elementtien ryhmittämiseen ja span-elementtiä muuhun css-kikkailuun (kyseisillä elementeillä ei ole mitään oletusarvoa kuin että että ensimmäinen on lohkoelementti ja jälkimmäinen in-line elementti)
Ei todellakaan ole hyvä jos sivut näkyvät mahdollisimman samanlaisina kaikissa selaimissa. Selaimia on muitakin kuin monitorilta katseltavia ja monitorejakin on niin eri kokoisia että en oikein ymmärrä millä tavalla sivujen pitäisi olla samanlaiset 14" ja 32" näytöltä katsottuna.
Opettele siis tekemään loogisesti rakennettuja sivuja joska näkyvät järkevästi ilman css:ääkin ja tietenkin ilman mitään lisäkikkareita.
Css:llä saat sitten helposti määriteltyä erilaiset ulkoasut eri medioihin, esimerkiksi monitorille, tulostimelle, puhesyntsalle jne.- kummastuttaa
Hyviä näkökohtia näkemykseni ja tekijämieheltä, mutta se asia joka vielä jäi vähän epäselväksi oli loogisten tagien oletustyylien "ohittaminen" CSS:llä, esim juuri EM tagin kohdalla.
Jos vaikka kännyselain näyttäisi EM korostuksen jollain muulla tyylillä kuin kursiivisena ja määrittelen CSS määrittelyn:
em {font-style:italic; }
, niin olenko ymmärtänyt oikein että nyt kännyselain näyttää EM tekstin sekä kursiivisena ETTÄ sillä tyylillä jolla kännyselain näyttää EM tekstin oletusarvoisesti (jos se ei ole kursiivinen)?
EM teksti voi siis näyttää aika pullamössöltä jos se on sekoitus kursiivisuutta "jotain-muuta-tyyliä-joka-vaihtelee-eri-näytöissä", tätä haluaisin välttää jos mahdollista. kummastuttaa kirjoitti:
Hyviä näkökohtia näkemykseni ja tekijämieheltä, mutta se asia joka vielä jäi vähän epäselväksi oli loogisten tagien oletustyylien "ohittaminen" CSS:llä, esim juuri EM tagin kohdalla.
Jos vaikka kännyselain näyttäisi EM korostuksen jollain muulla tyylillä kuin kursiivisena ja määrittelen CSS määrittelyn:
em {font-style:italic; }
, niin olenko ymmärtänyt oikein että nyt kännyselain näyttää EM tekstin sekä kursiivisena ETTÄ sillä tyylillä jolla kännyselain näyttää EM tekstin oletusarvoisesti (jos se ei ole kursiivinen)?
EM teksti voi siis näyttää aika pullamössöltä jos se on sekoitus kursiivisuutta "jotain-muuta-tyyliä-joka-vaihtelee-eri-näytöissä", tätä haluaisin välttää jos mahdollista.Aluksi käsitteellinen huomautus: selaimet eivät useinkaan käytä todellista kursiivia vaan sellaista, mitä typografit sanovat halveksien konekursiiviksi: tavallista tekstiä kallistettuna.
Jos kännyselain näyttää em-elementin vaikkapa punaisella värillä, niin sinä sivuntekijänä et _välttämättä_ pysty vaikuttamaan asiaan mitenkään. Kaikki riippuu viime kädessä selaimesta, ja CSS-koodisi on vain ehdotus, jonka selain voi toteuttaa kokonaan tai osittain.
Selain ei ehkä lainkaan _pysty_ esittämään kursiivia. Tyypillinen esimerkki on ns. tekstiselain, jossa ehkä toimivat värit mutta fontti on kiinteästi yksi ja sama.
Jos kirjoitat em { font-style: italic; } niin se on vain ehdotus em-elementtien esittämisestä (kone)kursiivilla. Se ei siis edes ehdota mitään esimerkiksi em-elementin väristä, fonttikoosta, äänenvoimakkuudesta jne. _Jos_ siis selain sen toteuttaa, niin se toteuttaa sen muiden asetusten _lisäksi_.
Valitettavasti esiintyy sellaista harhaanjohtavaa puhetapaa, että CSS:ssä "määritellään uudestaan" (redefine) elementtejä. Se ei pidä paikkaansa, vaan ensinnäkin elementin merkitys määritellään ihan muualla. Ulkoasunkin osalta CSS-koodi vain ehdottaa _muutoksia_, ei mitään sellaista, joka saisi selaimet jättämään huomiotta jonkin elementin normaalin esityksen säännöt.
Voit tietysti kirjoittaa lisäksi esimerkiksi
em { color: black; background: white; }
mutta se on todennäköisesti turhaa. Jos selain soveltaa jotain epätavallista em-elementtien esitystä, sillä on yleensä siihen syynsä. Samasta syystä
em { font-style: italic; }
on yleensä turha: useimmiten sillä ei ole vaikutusta, ja jos sillä taas on, se voi hyvinkin aiheuttaa mainitsemasi oudon vaikutuksen, jossa em-elementti on liiankin korostettu (esim. alleviivattu, lihavoitu tai punainen _ja_ kursivoitu).- kummastuttaa
Yucca kirjoitti:
Aluksi käsitteellinen huomautus: selaimet eivät useinkaan käytä todellista kursiivia vaan sellaista, mitä typografit sanovat halveksien konekursiiviksi: tavallista tekstiä kallistettuna.
Jos kännyselain näyttää em-elementin vaikkapa punaisella värillä, niin sinä sivuntekijänä et _välttämättä_ pysty vaikuttamaan asiaan mitenkään. Kaikki riippuu viime kädessä selaimesta, ja CSS-koodisi on vain ehdotus, jonka selain voi toteuttaa kokonaan tai osittain.
Selain ei ehkä lainkaan _pysty_ esittämään kursiivia. Tyypillinen esimerkki on ns. tekstiselain, jossa ehkä toimivat värit mutta fontti on kiinteästi yksi ja sama.
Jos kirjoitat em { font-style: italic; } niin se on vain ehdotus em-elementtien esittämisestä (kone)kursiivilla. Se ei siis edes ehdota mitään esimerkiksi em-elementin väristä, fonttikoosta, äänenvoimakkuudesta jne. _Jos_ siis selain sen toteuttaa, niin se toteuttaa sen muiden asetusten _lisäksi_.
Valitettavasti esiintyy sellaista harhaanjohtavaa puhetapaa, että CSS:ssä "määritellään uudestaan" (redefine) elementtejä. Se ei pidä paikkaansa, vaan ensinnäkin elementin merkitys määritellään ihan muualla. Ulkoasunkin osalta CSS-koodi vain ehdottaa _muutoksia_, ei mitään sellaista, joka saisi selaimet jättämään huomiotta jonkin elementin normaalin esityksen säännöt.
Voit tietysti kirjoittaa lisäksi esimerkiksi
em { color: black; background: white; }
mutta se on todennäköisesti turhaa. Jos selain soveltaa jotain epätavallista em-elementtien esitystä, sillä on yleensä siihen syynsä. Samasta syystä
em { font-style: italic; }
on yleensä turha: useimmiten sillä ei ole vaikutusta, ja jos sillä taas on, se voi hyvinkin aiheuttaa mainitsemasi oudon vaikutuksen, jossa em-elementti on liiankin korostettu (esim. alleviivattu, lihavoitu tai punainen _ja_ kursivoitu).Jos ymmärsin ("rivien välistä lukien") oikein, tarkoitatko että on:
a)
suotavaa käyttää loogisia tyylejä ( / jne) fyysisten sijan (, ) jos ensisijaisesti haluan kursiivista/lihavoitua tekstiä mutta en halua sitä väkisin "pakottaa" selaimelle joka --- syystä tai toisesta -- näyttää korostuneen tekstin mielummin jollakin muulla tavalla?
b) jättää CSS "ehdotus" elementin tyylimuutoksesta tekemättä (esimerkiksi em {font-style:italic; }), jos kohdan a) mukaisesi suosin ensisijaisesti kursiivista tyyliä mutta en pidä sitä "ehdottomana" / "välttämättömänä" (jolloin selain päättäköön itse millä tavalla korostuneen tekstin näyttää)?
Minulla on T. Linjaman kirjoittama HTML4 kirja jota luen ja hän kirjoittaa siitä että pitäisi suosia loogisia tyylejä fyysisten sijan mutta ei selvitä asiaa sen kummemmin. kummastuttaa kirjoitti:
Jos ymmärsin ("rivien välistä lukien") oikein, tarkoitatko että on:
a)
suotavaa käyttää loogisia tyylejä ( / jne) fyysisten sijan (, ) jos ensisijaisesti haluan kursiivista/lihavoitua tekstiä mutta en halua sitä väkisin "pakottaa" selaimelle joka --- syystä tai toisesta -- näyttää korostuneen tekstin mielummin jollakin muulla tavalla?
b) jättää CSS "ehdotus" elementin tyylimuutoksesta tekemättä (esimerkiksi em {font-style:italic; }), jos kohdan a) mukaisesi suosin ensisijaisesti kursiivista tyyliä mutta en pidä sitä "ehdottomana" / "välttämättömänä" (jolloin selain päättäköön itse millä tavalla korostuneen tekstin näyttää)?
Minulla on T. Linjaman kirjoittama HTML4 kirja jota luen ja hän kirjoittaa siitä että pitäisi suosia loogisia tyylejä fyysisten sijan mutta ei selvitä asiaa sen kummemmin.Ymmärsit suunnilleen oikein. Sinänsä se, käyttääkö - vai -merkkausta (taikka - vai -merkkausta), ei ole käytännössä kovinkaan merkittävää. Mutta se on oireellista ja kuvaa ajattelutapojen eroa - joka muuttuu käytännössäkin varsin olennaiseksi sitten, kun valitaan, kirjoitetaanko
väliotsikko
vai
väliotsikko
vai
väliotsikko
Fyysinen merkkaus kuten tai _tarkoittaa_ vain kursivointia tai lihavointia. Tästä seuraa, että niillä ei pitäisi olla mitään vaikutusta, jos kursivointi tai lihavointi ei ole mahdollista. (Käytännössä esimerkiksi teksti- tai puheselaimet saattavat toimia hiukan toisin, koska tiedetään, että niin usein sivuntekijä on kuitenkin _oikeasti_ tarkoittanut korostusta.)
Miten usein esiintyy tilanne, jossa jokin teksti pitäisi esittää nimenomaan kursiivilla tai lihavalla esitystilanteesta riippumatta? Lähinnä kahdentyyppisessä tilanteessa:
- Kun kursivointi on osa jotakin erityistä sopimusta, esimerkiksi eliöiden tieteellisissä nimissä tai fysiikan suureiden symboleissa. (Näissäkin vain siksi, ettei tällaisille asioille nykyisin ole loogista merkkausta.)
- Kun viitataan johonkin, joka on itsessään kursivoitua, etenkin lainattaessa painettua tekstiä, jossa on kursivointi ilman, että on yksiselitteisesti pääteltävissä, mitä kursivoinnilla tarkoitetaan.
_Korostukseen_ on loogista käyttää loogista merkkausta, koska se mitä halutaan varsinaisesti sanoa ei ole merkkien muoto paperilla vaan sanan tai asian korostaminen, tähdentäminen, painottaminen.
Mitä tulee b)-kohtaan, niin em { font-style: italic } ei mitenkään pakota selainta käyttämään kursivointia - silloinkaan, kun kursivointi olisi mahdollinen. Se vain lisää todennäköisyyttä sille. Eikä tämä edes yleensä ole hyvä asia, kuten kuvasin.
Ketjusta on poistettu 0 sääntöjenvastaista viestiä.
Luetuimmat keskustelut
- 182176
Nainen rakkaus sinua kohtaan ei kuole koskaan
Ihastunut olen moniin vuosien varrella mutta vain sinä jäit sydämeen enkä vaan osaa unohtaa. Olit silloin parasta elämäs561854- 1781493
- 821483
- 211459
Jättimäärä alokkaita keskeyttää asepalveluksen melkein heti "En pystynyt olemaan siellä enää"
Jättimäärä alokkaita keskeyttää asepalveluksen melkein heti – "En pystynyt olemaan siellä enää" Ennen sotaväki oli3091417Martina Aitolehti poseeraa Ibizalla
Ihanaa! Ibiza on ihan paras paikka lomailla hengaillen, viinistä ja iltamenoista nauttien. Säpinää riittää. Aitolehti1011051Ollaanko me tyhmiä mies?
Miten ihmeessä me onnistuttiin saamaan tästä näin pitkällinen ja masokistinen kuvio. Miten? Jos toisesta tykkää, näinhä631027Unelmoin päivästä, jolloin voimme olla yhdessä.
Niin pieni kuin sydän onkin, sä oot siellä ja ne mun isot tunteet sua kohtaan ❤️Sydämeni sykähtää joka kerta kun sut nää34995- 349884