Jaki jest właściwy sposób na pisanie kursywą? Widziałem następujące cztery podejścia:

<i>Italic Text</i>

<em>Italic Text</em>

<span class="italic">Italic Text</span>

<span class="footnote">Italic Text</span>

<i>

To jest „stara droga”. <i>nie ma znaczenia semantycznego i przekazuje jedynie efekt prezentacji wynikający z użycia kursywy. O ile widzę, jest to oczywiście błędne, ponieważ nie jest semantyczne.

<em>

Wykorzystuje to znacznik semantyczny do celów czysto prezentacyjnych. Zdarza się, że <em>domyślnie renderuje się kursywą, dlatego jest często używany przez tych, którzy są świadomi, że <i>należy go unikać, ale nie są świadomi jego znaczenia semantycznego. Nie cały tekst kursywą jest pisany kursywą, ponieważ jest podkreślony. Czasami może być dokładnie odwrotnie, jak notatka boczna lub szept.

<span class="italic">

Wykorzystuje klasę CSS do umieszczenia prezentacji. Jest to często reklamowane jako poprawny sposób, ale znowu wydaje mi się to niewłaściwe. Nie wydaje się, aby miało to znaczenie semantyczne <i>. Ale jego zwolennicy płaczą, o wiele łatwiej jest później zmienić cały kursywę, jeśli, powiedzmy, chciałeś go odważnie. Jednak tak nie jest, ponieważ zostałbym wtedy z klasą o nazwie „kursywa”, która pogrubiła tekst. Co więcej, nie jest jasne, dlaczego kiedykolwiek chciałbym zmienić cały kursywę na mojej stronie lub przynajmniej możemy pomyśleć o przypadkach, w których nie byłoby to pożądane lub konieczne.

<span class="footnote">

Używa klasy CSS dla semantyki. Jak dotąd wydaje się to być najlepszym sposobem, ale w rzeczywistości ma dwa problemy.

1. Nie cały tekst ma wystarczające znaczenie, aby uzasadnić znaczniki semantyczne. Na przykład, czy kursywą tekst na dole strony jest naprawdę przypisem? A może to na bok? Lub coś zupełnie innego. Być może nie ma on żadnego specjalnego znaczenia i musi być zapisany kursywą, aby oddzielić go od tekstu poprzedzającego go.

2. Znaczenie semantyczne może się zmienić, gdy nie jest obecne w wystarczającej sile. Powiedzmy, że użyłem „przypisu” opartego na niczym więcej niż tekście znajdującym się na dole strony. Co się stanie, gdy kilka miesięcy później chcę dodać więcej tekstu na dole? To nie jest już przypis. Jak możemy wybrać klasę semantyczną, która jest mniej ogólna, <em>ale unika tych problemów?

Podsumowanie

Wydaje się, że wymóg semantyki wydaje się zbyt uciążliwy w wielu przypadkach, w których chęć zrobienia czegoś kursywą nie ma znaczenia semantycznego.

Co więcej, chęć oddzielenia stylu od struktury spowodowała, że ​​CSS jest reklamowany jako zamiennik <i>sytuacji, w których są w rzeczywistości mniej przydatne. To pozostawia mnie z pokornym <i>tagiem i zastanawiam się, czy ten tok myślenia jest przyczyną, dla której został w specyfikacji HTML5?

Czy są też jakieś dobre posty na blogu lub artykuły na ten temat? Być może przez osoby zaangażowane w decyzję o zachowaniu / utworzeniu <i>tagu?

Powinieneś użyć różnych metod dla różnych przypadków użycia:

1. Jeśli chcesz podkreślić frazę, użyj <em>.
2. <i>Tag ma nowe znaczenie w HTML5 , reprezentujący „rozpiętość tekstu w alternatywnym głosem lub nastroju”. Dlatego powinieneś używać tego tagu do takich rzeczy jak myśli / odłożenia lub wyrażenia idiomatyczne. Specyfikacja sugeruje również nazwy statków (ale nie sugeruje już nazw książek / piosenek / filmów; użyj <cite>do tego zamiast).
3. Jeśli tekst pisany kursywą jest częścią większego kontekstu, powiedzmy akapit wprowadzający, należy dołączyć styl CSS do większego elementu, tj. p.intro { font-style: italic; }

<i>nie jest zły, ponieważ nie jest semantyczny. To źle (zwykle), ponieważ jest prezentacyjne. Rozdzielenie obaw oznacza, że ​​informacje prezentacyjne powinny być przekazywane za pomocą CSS.

Nazewnictwo w ogólności może być trudne, aby poprawnie uzyskać, a nazwy klas nie są wyjątkiem, ale mimo to musisz to zrobić. Jeśli używasz kursywy, aby blok wyróżniał się z tekstu podstawowego, być może nazwa klasy „wyróżniająca przepływ” byłaby w porządku. Pomyśl o ponownym użyciu: nazwy klas służą do kategoryzacji - gdzie indziej chciałbyś zrobić to samo? To powinno ci pomóc w znalezieniu odpowiedniej nazwy.

<i>jest zawarty w HTML5, ale ma określoną semantykę. Jeśli powód, dla którego zaznaczasz coś jako kursywę, spełnia jedną z semantyków określonych w specyfikacji, dobrze byłoby użyć <i>. W przeciwnym razie nie.

Nie jestem ekspertem, ale powiedziałbym, że jeśli naprawdę chcesz być semantyczny, powinieneś używać słowników (RDFa).

Powinno to spowodować coś takiego:

<em property="italic" href="http://url/to/a/definition_of_italic"> Your text </em>

emsłuży do prezentacji (ludzie zobaczą ją kursywą), propertya hrefatrybuty i łączą się z definicją kursywy (dla maszyn).

Powinieneś sprawdzić, czy istnieje takie słownictwo, być może właściwości już istnieją.

Więcej informacji o RDFa tutaj: http://www.alistapart.com/articles/introduction-to-rdfa/

TLDR

Prawidłowym sposobem na pisanie kursywą jest zignorowanie problemu, dopóki nie przejdziesz do CSS, a następnie styl zgodnie z semantyką prezentacji. Dwie pierwsze podane opcje mogą być właściwe w zależności od okoliczności. Dwa ostatnie są błędne.

Dłuższe wyjaśnienie

Nie martw się o prezentację podczas pisania znaczników. Nie myśl kursywą. Myśl w kategoriach semantyki. Jeśli wymaga stresu, to jest to em. Jeśli jest styczny do głównej treści, to jest to aside. Może będzie pogrubiony, może kursywą, może fluorescencyjny zielony. Nie ma znaczenia, kiedy piszesz znaczniki.

Kiedy przejdziesz do CSS, możesz już mieć element semantyczny, który ma sens wstawiania kursywy dla wszystkich jego wystąpień w Twojej witrynie. emjest dobrym przykładem Ale może chcesz wszystko aside > ul > lina swojej stronie kursywą. Musisz oddzielić myślenie o znacznikach od myślenia o prezentacji.

Jak wspomniano DisgruntledGoat , ijest semantyczny w HTML5. Jednak semantyka wydaje mi się dość wąska. Korzystanie prawdopodobnie będzie rzadkie.

Semantyka emzmieniła się w HTML5, aby podkreślić nacisk. strongmoże być również użyty do pokazania znaczenia. strongmoże być kursywą, a nie pogrubioną czcionką, jeśli właśnie tak chcesz ją stylizować. Nie pozwól, aby arkusz stylów przeglądarki Cię ograniczał. Możesz nawet użyć zresetowanego arkusza stylów, aby przestać myśleć w ramach ustawień domyślnych. (Chociaż są pewne zastrzeżenia .)

class="italic"jest zły. Nie używaj tego. Nie jest semantyczny i wcale nie jest elastyczny. Prezentacja nadal ma semantykę, tylko inny rodzaj niż znaczniki.

class="footnote"emuluje semantykę znaczników i jest również niepoprawny. Twój kod CSS przypisu nie powinien być całkowicie unikalny dla przypisu. Twoja strona będzie wyglądać zbyt niechlujnie, jeśli każda część ma inny styl. Powinieneś mieć rozproszone wzory wizualne na swoich stronach, które możesz zamienić na klasy CSS. Jeśli twój styl przypisów i cytatów blokowych jest bardzo podobny, powinieneś umieścić podobieństwa w jednej klasie, zamiast powtarzać się od nowa. Możesz rozważyć zastosowanie praktyk OOCSS (linki poniżej).

Rozdział HTML i semantyka są duże w HTML5. Ludzie często nie zdają sobie sprawy, że znaczniki nie są jedynym miejscem, w którym semantyka jest ważna. Istnieje semantyka treści (HTML), ale jest też semantyka prezentacji (CSS) i semantyka behawioralna (JavaScript). Wszystkie mają osobną semantykę, na którą należy zwrócić uwagę, aby zachować łatwość utrzymania i pozostać suchym.

Zasoby OOCSS

• Obiektowy CSS
• Wprowadzenie do Object Oriented CSS (OOCSS)
• Jak pisać zorientowane obiektowo CSS
• Rozpoczęcie pracy z Object-Orientated CSS (OOCSS)
• Object-Oriented CSS: Co, jak i dlaczego
• Zanurzenie w CSS zorientowanym obiektowo

Być może nie ma on żadnego specjalnego znaczenia i musi być zapisany kursywą, aby oddzielić go od tekstu poprzedzającego go.

Jeśli nie ma specjalnego znaczenia, to dlaczego należy go oddzielić od tekstu poprzedzającego go? Ten ciąg tekstu wygląda trochę dziwnie , ponieważ kursywą napisałem go bez powodu.

Rozumiem jednak twój punkt widzenia. Często zdarza się, że projektanci tworzą projekty, które różnią się wizualnie, ale nie różnią się znacząco. Widziałem to najczęściej z pudełkami: projektanci dają nam projekty, w tym pudełka z różnymi kombinacjami kolorów, narożników, gradientów i cieni, bez związku między stylami i znaczeniem treści.

Ponieważ są to dość skomplikowane style (z powiązanymi problemami z Internet Explorerem) ponownie używane w różnych miejscach, tworzymy klasy takie jak box-1, box-2abyśmy mogli ponownie używać tych stylów.

Konkretny przykład wprowadzenia kursywy w tekście jest jednak zbyt trywialny, aby się o niego martwić. Najlepiej zostaw takie drobiazgi, o które Nutters Semantic się kłócą.

Tekst kursywą HTML wyświetla tekst kursywą.

<i>HTML italic text example</i>

Nacisk i mocne elementy mogą być użyte do zwiększenia znaczenia niektórych słów lub zdań.

<p>This is <em>emphasized </em> text format <em>example</em></p>

Tagu wyróżnienia należy używać, gdy chcesz podkreślić punkt w tekście, i niekoniecznie, gdy chcesz wyróżnić kursywą ten tekst.

Więcej informacji można znaleźć w tym przewodniku: Formatowanie tekstu HTML

iElementem jest non-semantyczny, więc dla czytników ekranu Googlebot itp, powinien być jakiś przezroczysty (podobnie jak spanlub divelementów). Ale nie jest to dobry wybór dla programisty, ponieważ łączy warstwę prezentacji z warstwą struktury - a to zła praktyka.

emelement ( strongrównież) powinien być zawsze używany w kontekście semantycznym, a nie prezentacyjnym. Należy go używać, gdy jakieś słowo lub zdanie jest ważne. Na przykład w poprzednim zdaniu powinienem empołożyć większy nacisk na część „należy zawsze używać”. Przeglądarki zapewniają niektóre domyślne właściwości CSS dla tych elementów, ale możesz i musisz przesłonić wartości domyślne, jeśli Twój projekt wymaga tego, aby zachować prawidłowe znaczenie semantyczne tych elementów.

<span class="italic">Italic Text</span>jest najbardziej zły sposób. Przede wszystkim jest niewygodny w użyciu. Po drugie, sugeruje, że tekst powinien być pisany kursywą. A warstwa struktury (HTML, XML itp.) Nigdy nie powinna tego robić. Prezentacja powinna być zawsze oddzielona od struktury.

<span class="footnote">Italic Text</span>wydaje się być najlepszym sposobem na przypis. Nie sugeruje żadnej prezentacji, a jedynie opisuje znaczniki. Nie można przewidzieć, co stanie się z funkcją. Jeśli w funkcji pojawi się przypis, możesz zostać zmuszony do zmiany nazwy klasy (aby zachować logikę w kodzie).

Więc jeśli masz jakiś ważny tekst, użyj emlubstrong aby go podkreślić. Pamiętaj jednak, że te elementy są elementami wbudowanymi i nie należy ich używać do podkreślania dużych bloków tekstu.

Użyj CSS, jeśli zależy Ci tylko na tym, jak coś wygląda i zawsze staraj się unikać dodatkowych znaczników.

Myślę, że odpowiedź brzmi: <em>kiedy ty zamierzasz kłaść nacisk.

Jeśli czytając tekst do siebie, zauważysz, że używasz nieco innego głosu, aby podkreślić punkt, to powinien on użyć, <em>ponieważ chcesz, aby czytnik ekranu zrobił to samo.

Jeśli jest to wyłącznie styl, na przykład projektant zdecydował, że wszystko twoje <h2> nagłówki będą lepiej wyglądały kursywą Garamond, to nie ma semantycznego powodu, aby zawrzeć go w kodzie HTML i powinieneś po prostu zmienić CSS dla odpowiednich elementów.

Nie widzę żadnego powodu do użycia <i>, chyba że potrzebujesz konkretnej przeglądarki bez CSS.

Powiedziałbym, że należy użyć <em>do podkreślenia elementów wbudowanych. Użyj klasy dla elementów blokowych, takich jak bloki tekstu. CSS, czy nie, tekst musi być jeszcze otagowany. Niezależnie od tego, czy chodzi o semantykę, czy o pomoc wizualną, zakładam, że użyjesz jej do czegoś znaczącego ...

Jeśli wyróżniasz tekst z DOWOLNEGO powodu, możesz użyć <em>klasy lub kursywy.

Czasami można łamać zasady !

OK, pierwszą rzeczą do zapamiętania jest to <i> został wycofany i nie należy go używać <i>nie jest przestarzałe, ale nadal nie polecam go używać - zobacz komentarze, aby uzyskać szczegółowe informacje. Wynika to z faktu, że jest to całkowicie sprzeczne z utrzymywaniem prezentacji w warstwie prezentacji, o czym już wspomniałeś. Podobnie <span class="italic">wydaje się , że również łamie pleśń.

Więc teraz mamy dwa prawdziwe sposoby robienia rzeczy: <em>i <span class="footnote">. Pamiętaj, że to emoznacza nacisk . Jeśli chcesz położyć nacisk na słowo, frazę lub zdanie, umieść je w <em>tagach niezależnie od tego, czy chcesz pisać kursywą, czy nie. Jeśli chcesz zmienić stylizację w jakiś inny sposób, należy użyć CSS em { font-weight: bold; font-style: normal; }. Oczywiście możesz także zastosować klasę do <em>tagu: jeśli zdecydujesz, że niektóre podkreślone frazy będą wyświetlane na czerwono, daj im klasę i dodaj ją do CSS:

Fancy some <em class="special">shiny</em> text?

em { font-weight: bold; font-style: normal; }
em.special { color: red; }

Jeśli używasz kursywy z innego powodu, skorzystaj z innej metody i nadaj sekcji klasę. W ten sposób możesz zmienić jego styl, kiedy tylko chcesz, bez dostosowywania HTML. W twoim przykładzie przypisy nie powinny być podkreślane - w rzeczywistości należy je odznaczać, ponieważ celem przypisu jest pokazanie nieistotnych, ale interesujących lub użytecznych informacji. W takim przypadku znacznie lepiej jest zastosować klasę do przypisu i sprawić, by wyglądała jak jedna z warstwy prezentacji - CSS.

Użyj <em>, jeśli potrzebujesz słów / znaków kursywą w treści bez innych stylów. Pomaga również uczynić treść semantyczną.

text-style lepiej nadaje się do wielu stylów i nie wymaga semantycznej.

ROBIĆ

1. Podaj atrybutowi klasy wartość wskazującą na charakter danych (tj. class="footnote"Jest dobra)

2. Utwórz arkusz stylów CSS dla strony

3. Zdefiniuj styl CSS, który jest dołączony do klasy przypisanej do elementu

   .footnote { font-style:italic; }

NIE RÓB

1. Nie używaj <i>ani <em>elementów - nie są one obsługiwane i zbyt blisko wiążą dane i prezentację.
2. Nie nadawaj klasie wartości wskazującej zasady prezentacji (tzn. Nie używaj class="italic").