Jeden z tagów, których nauczysz się na początku swojego projektowanie stron edukacja to para znaczników znana jako „znaczniki emfazy”. Przyjrzyjmy się, czym są te tagi i jak są obecnie używane w projektowaniu stron internetowych.
Powrót do XHTML
Jeśli nauczyłeś się HTML lata temu, na długo przed powstaniem HTML5, prawdopodobnie użyłeś tagów pogrubienia i kursywy. Jak można się spodziewać, te tagi zmieniły elementy odpowiednio w tekst pogrubiony lub kursywę. Problem z tymi tagami i dlaczego zostały zepchnięte na bok na rzecz nowych elementów (któremu przyjrzymy się za chwilę), jest to, że nie są one elementami semantycznymi. Dzieje się tak dlatego, że określają wygląd tekstu, a nie informacje o tekście. Pamiętaj, że HTML (to jest miejsce, w którym będą pisane te tagi) dotyczy struktury, a nie stylu wizualnego! Wizualizacje są obsługiwane przez CSS a najlepsze praktyki projektowania stron internetowych od dawna utrzymują, że powinieneś mieć wyraźne oddzielenie stylu i struktury na swoich stronach internetowych. Oznacza to nieużywanie elementów, które nie są semantyczne i których szczegóły wyglądają, a nie struktury. Dlatego odważni i
kursywa tagi zostały generalnie zastąpione przez mocne (pogrubienie) i podkreślenie (kursywa).i
Silne i akcentujące elementy dodają informacje do tekstu, wyszczególniając treść, którą należy traktować inaczej i podkreślić, gdy ta treść jest wypowiadana. Używasz tych elementów w taki sam sposób, jak w przeszłości używałeś pogrubienia i kursywy. Po prostu otocz swój tekst otwierającymi i zamykającymi znacznikami ( i dla podkreślenia i i dla silnego podkreślenia) i załączony tekst zostanie podkreślony.
Możesz zagnieździć te tagi i nie ma znaczenia, który jest tagiem zewnętrznym. Oto kilka przykładów.
Ten tekst jest podkreślony a większość przeglądarek wyświetla je jako kursywę.
Ten tekst jest mocno zaakcentowany a większość przeglądarek wyświetli go jako pogrubioną czcionkę.
W obu tych przykładach nie dyktujemy wizualnego wyglądu za pomocą HTML. Tak, domyślny wygląd tag byłby kursywą, a byłoby pogrubione, ale ten wygląd można łatwo zmienić w CSS. To najlepsze z obu światów. Możesz wykorzystać domyślne style przeglądarki, aby uzyskać w dokumencie kursywę lub pogrubienie tekstu bez przekraczania linii i mieszania struktury i stylu. Powiedz, że tego chciałeś tekst, aby był nie tylko pogrubiony, ale także czerwony, możesz dodać go do SCS.
silny {
kolor czerwony;
}
W tym przykładzie nie musisz dodawać właściwości dla pogrubionej grubości czcionki, ponieważ jest to wartość domyślna. Jeśli jednak nie chcesz zostawiać tego przypadkowi, zawsze możesz dodać to w:
silny {
grubość czcionki: pogrubiona;
kolor czerwony;
}
Teraz będziesz prawie gwarantowany, że będziesz mieć stronę z pogrubionym (i czerwonym) tekstem w dowolnym miejscu używany jest tag.
Podwójna emfaza
Jedną z rzeczy, które zauważyliśmy w ciągu roku, jest to, co się dzieje, gdy próbujesz podwoić nacisk. Na przykład:
Ten tekst powinien zawierać oba pogrubienie i kursywa tekst w nim.
Można by pomyśleć, że ta linia utworzy obszar z tekstem pogrubionym ORAZ kursywą. Czasami tak się dzieje, ale widzieliśmy, że niektóre przeglądarki honorują tylko drugi z dwóch stylów wyróżnienia, ten najbliższy rzeczywistemu tekstowi, i wyświetlają go tylko kursywą. To jeden z powodów, dla których nie podwajamy znaczników akcentujących.
Innym powodem, dla którego należy unikać tego „podwojenia”, są względy stylistyczne. Jedna forma nacisku jest zwykle wystarczająca, aby przekazać ton, który chcesz nadać. Nie musisz pogrubiać, pisać kursywą, kolorować, powiększać i podkreślać tekstu, aby się wyróżniał. Ten tekst, z wszystkimi tymi różnymi akcentami, stałby się jaskrawy. Zachowaj więc ostrożność, używając znaczników akcentujących lub stylów CSS, aby zapewnić nacisk i nie przesadzaj.
Uwaga dotycząca pogrubienia i kursywy
Jedna końcowa myśl - podczas gdy pogrubienie () i kursywa () tagi nie są już zalecane jako elementy wyróżnienia, niektórzy projektanci stron internetowych używają tych tagów do stylizowania śródliniowych obszarów tekstu. Zasadniczo używają go jak element. Jest to miłe, ponieważ tagi są bardzo krótkie, ale generalnie nie zaleca się używania tych elementów w ten sposób. Wspominamy o tym na wypadek, gdybyś zobaczył go na niektórych witrynach, które nie są używane do tworzenia pogrubionego lub kursywy tekstu, ale do tworzenia haka CSS dla innego rodzaju wizualnej stylizacji.