Един от маркерите, които ще научите в началото на обучението ви за уеб дизайн, е чифт тагове, известни като "таговете за ударение". Нека да разгледаме какви са тези маркери и как се използват в уеб дизайна днес.
Обратно към XHTML
Ако сте научили преди години HTML, доста преди появата на HTML5, най-вероятно сте използвали както дръзките, така и курсивните етикети. Както бихте очаквали, тези маркери превърнаха елементите в удебелен текст или текст с курсив съответно. Проблемът с тези маркери и защо бяха отхвърлени в полза на нови елементи (които ще разгледаме скоро) е, че те не са семантични елементи. Това е така, защото те определят как текстът трябва да изглежда по-скоро, отколкото информация за текста. Не забравяйте, че HTML (където тези етикети ще бъдат написани) е всичко за структурата, а не за визуалния стил! Визуализациите се обработват от CSS, а най-добрите практики в уеб дизайна отдавна твърдят, че трябва да имате ясно разграничение между стил и структура във вашите уеб страници. Това означава да не се използват елементи, които не са семантични и детайлите изглеждат по-скоро, отколкото структура. Ето защо по-дръзките и курсивни маркери обикновено са заменени от силни (за смели) и акценти (за курсив).
& LT; силен & GT; и & gt;
Силните и подчертаващи елементи добавят информация към текста ви, като посочват подробно съдържанието, което трябва да се третира по различен начин и да се подчертае кога се говори за това съдържание. Използвате тези елементи почти по същия начин, по който бихте използвали смел и курсив в миналото. Просто заобикаляйте текста си с маркерите за отваряне и затваряне ( и за подчертаване и и за силен акцент) и приложеният текст ще бъде подчертан.
Можете да поставите тези маркери и няма значение кой е външният маркер. Ето няколко примера.
Този текст е подчертан и повечето браузъри го показват като курсив. Този текст е силно подчертан и повечето браузъри биха го показали като получер.И в двата случая, ние не диктуват визуален поглед с HTML. Да, подразбиращият се външен вид на маркера би бил курсив и би бил смел, но тези изгледи лесно биха могли да се променят в CSS. Това е най-доброто от двата свята. Можете да използвате стиловете на браузъра по подразбиране, за да получите текст с курсив или удебелен шрифт в документа, без всъщност да пресичате линията и да смесвате структурата и стила. Кажете, че искате текстът не само да е смел, но и червен, да го добавите в CSS
силен {
цвят: червен;
}
В този пример не е необходимо да добавяте собственост за удебелен шрифт, тъй като това е по подразбиране. Ако обаче не искате да оставяте това на случайност, винаги можете да го добавите:
силен {
шрифт-тегло: удебелен;
цвят: червен;
}
Сега бихте гарантирали, че ще имате страница с удебелен (и червен) текст, където се използва маркерът .
Удвояване на акцента
Едно нещо, което забелязах през годината, е това, което се случва, ако се опитате да удвоите акцента. Например:
Този текст трябва да съдържа текст удебелен и курсиран в него.Бихте помислили, че тази линия ще създаде област, която има текст, който е получер и курсив. Понякога това наистина се случва, но видях, че някои браузъри само почитат втория от двата стила на акцентиране, този, който е най-близък до въпросния текст, и го показват само като курсив. Това е една от причините, поради които не удвоявам етикетите за подчертаване.
Друга причина да се избегне това "удвояване" е за стилистични цели. Една форма на акцент, ако обикновено достатъчно, за да предаде тона, който искате да настроите. Не е нужно да смените, курсивите, цветът, увеличаването и подчертаването на текста, за да се откроят. Този текст, всички тези различни акценти, ще стане ужасен. Така че бъдете внимателни, когато използвате таговете за подчертаване или CSS стилове, за да осигурите ударение и не прекалявайте.
Бележка за получер и курсив
Една последна мисъл - докато по-смелите () и курсивните () етикети вече не се препоръчват да бъдат използвани като акцент елементи, има някои уеб дизайнери, които използват тези маркери за оформяне на текстови линии. По принцип те го използват като елемент. Това е хубаво, защото етикетите са много кратки, но използването на тези елементи по този начин не се препоръчва. Споменавам в случай, че го виждате там на някои сайтове, които се използват, за да не създавате смел или курсиран текст, а да създавате CSS кука за друг вид визуален стил.
Оригинална статия на Дженифър Кринин. Редактиран от Jeremy Girard на 12/2/16.