Веб-стандарттар қозғалысының маңызды қағидасы, бүгінгі күні бізде бар салаға әдепкі бойынша браузерде қалай пайда болуы мүмкін дегенге қарағанда, HTML элементтерін пайдалану идеясы. Бұл Semantic HTML пайдалану ретінде белгілі.
Semantic HTML деген не?
Семантикалық HTML немесе семантикалық белгілеу - тек презентациядан гөрі веб-параққа мағынасын енгізетін HTML. Мысалы,
тегі жабық мәтіннің еже екенін көрсетеді.
Бұл семантикалық және презентациялық сипатқа ие, себебі адамдар параграфтардың қайсысы екенін және браузерлер оларды қалай көрсету керектігін біледі.
Бұл теңдеудің қисық жағында, және сияқты тегтер мағыналық емес, себебі олар тек мәтіннің қалай көрінетінін анықтайды (қалың немесе көлбеу) және түзетуге қосымша мән бермейді.
Симантикалық HTML тегтерінің үлгілері
арқылы , , және тақырып тегтерін қамтиды. Стандарттарға сай веб-сайтты құрастырғанда пайдаланылуы мүмкін көптеген семантикалық HTML тегтері бар.
Сіз неге семантика туралы қамқорлық жасауыңыз керек?
Семантикалық HTML жазудың пайдасы кез-келген веб-парақтың қозғаушы мақсаты болуы керек - қарым-қатынас жасау тілегі. Құжатқа семантикалық тегтерді қосу арқылы сіз осы құжат туралы қосымша ақпаратпен қамтамасыз етесіз. Атап айтқанда, семантикалық тегтер браузерге беттің мазмұнын және оның мазмұнын анықтайды.
Сонымен қатар, бұл сұраулар дұрыс сұраулар үшін дұрыс беттердің жеткізілуін қамтамасыз ететін іздеу жүйелерімен де хабарланады.
Semantic HTML тегтері беттерге қалай қарап тұрғандығынан тыс шыққан тегтердің мазмұны туралы ақпаратты береді. тегіне жазылған мәтін браузерде бірден кодтау тілі ретінде танылады.
Бұл кодты көрсетудің орнына, браузер бұл мәтінді мақаланың мақсаттары үшін немесе қандай да бір онлайн оқу құралының үлгісі ретінде қолданып отырғаныңызды түсінеді.
Семантикалық тегтерді пайдалану мазмұныңызды сәндеуге сізге көптеген қосымша ілгектер береді. Бәлкім, бүгін сіз өзіңіздің код үлгілеріңіздің әдепкі браузер стилінде көрсетілуін қаласаңыз болады, бірақ ертең оларды сұр фон түсімен қоңырау шалғыңыз келсе, кейінірек сіз бірдей қаріптерге арналған қаріптер отбасын немесе қаріптер стектерін анықтағыңыз келеді сіздің үлгілеріңіз. Сіз барлық нәрселерді семантикалық белгілеу және сәтті қолданылған CSS арқылы оңай пайдалана аласыз.
Семантикалық тегтерді дұрыс пайдаланыңыз
Сименттік тегтерді таныстыру мақсатында емес, мағынаны жеткізу үшін пайдаланғыңыз келгенде, олардың жалпы көрініс қасиеттері үшін оларды дұрыс қолданбағаныңыз жөн. Ең жиі қолданылатын семантикалық тегтердің кейбірі мыналарды қамтиды:
- blockquote - Кейбіреулер тырнақшасыз мәтінді шығару үшін тегін қолданады. Бұл блоктаушалар әдепкі бойынша шегіндіріледі. Егер сіз шабуылдың пайдасын ғана қаласаңыз, бірақ мәтін блоктық емес, оның орнына CSS маржаларын пайдаланыңыз.
- p - Кейбір веб-редакторлар сол бет мәтіні үшін нақты параграфтарды анықтауға қарағанда, бет элементтері арасында қосымша орын қосу үшін
& nbsp; (параграофта қамтылған үзілмейтін бос орын) пайдаланады. Бұрын аталған атрибуция мысалында болғандай, кеңістікті қосу үшін маржа немесе толтырғыш стилі сипатын қолданыңыз.
- ul - blockquote сияқты, мәтінді көпшілік шолғыштардағы мәтінді
тегтің шегіністерінде қамту. Бұл семантикалық түрде дұрыс емес және жарамсыз HTML, себебі - тегтері
тегінде жарамды. Тағы да, шегініс мәтініне маржаны немесе толтырғыш стилін пайдаланыңыз.
- h1-h6 - Тақырып тегтерін қаріптерді үлкенірек және батыл ету үшін қолдануға болады, бірақ егер мәтін тақырып емес болса, ол тақырып тақырыпшасында болмауы керек. Қаріптің салмағы мен шрифт өлшеміндегі CSS сипаттарын пайдаланыңыз, егер сіз бетіңіздегі нақты мәтіннің өлшемін немесе салмағын өзгерткіңіз келсе.
Мәні бар HTML тегтерін пайдаланып,
тегтері бар барлық нәрсені қоршаған ортаға қарағанда көбірек ақпарат беретін беттер жасайсыз.
HTML тегтері қандай семантикалық?
Әр HTML4 тегі мен барлық HTML5 тегтерінің семантикалық мағынасы болса да, кейбір тегтер ең алдымен мағыналық сипатта болады.
Мысалы, HTML5 мағыналық болу үшін және тегтерінің мәнін қайта анықтады. тегі аса маңызды емес, керісінше, мәтінді әдетте қалыңда көрсетіледі. тегі қосымша маңызды немесе басымдықты жеткізбейді, бірақ әдетте курсивпен көрсетілетін мәтінді анықтайды.
Семантикалық HTML тегтері
Қысқарту <акроним> Қысқартылған
Ұзақ тырнақша Анықтау <мекенжай> Құжаттың авторына (мекенжайларына) арналған мекенжайы Citation Кодекс сілтемесі Teletype мәтіні Логикалық бөлісу Жалпы кірістірілген стиль контейнері Мәтін жойылды Кірістірілген мәтін Баса назар аударыңыз Күшті назар
Бірінші деңгей тақырыбы
Екінші деңгейдегі тақырып
Үшінші деңгей тақырыбы
Төртінші деңгей тақырыбы
Бесінші деңгейдегі тақырып
Алтыншы деңгей тақырыбы
Тақырыптық үзіліс Пайдаланушы енгізетін мәтін
Алдын ала пішімделген мәтін
Қысқа кірістірілген баға Мысал шығару Подписка Superscript Айнымалы немесе пайдаланушы анықталған мәтін
, және тақырып тегтерін қамтиды. Стандарттарға сай веб-сайтты құрастырғанда пайдаланылуы мүмкін көптеген семантикалық HTML тегтері бар.
Сіз неге семантика туралы қамқорлық жасауыңыз керек?
Семантикалық HTML жазудың пайдасы кез-келген веб-парақтың қозғаушы мақсаты болуы керек - қарым-қатынас жасау тілегі. Құжатқа семантикалық тегтерді қосу арқылы сіз осы құжат туралы қосымша ақпаратпен қамтамасыз етесіз. Атап айтқанда, семантикалық тегтер браузерге беттің мазмұнын және оның мазмұнын анықтайды.
Сонымен қатар, бұл сұраулар дұрыс сұраулар үшін дұрыс беттердің жеткізілуін қамтамасыз ететін іздеу жүйелерімен де хабарланады.
Semantic HTML тегтері беттерге қалай қарап тұрғандығынан тыс шыққан тегтердің мазмұны туралы ақпаратты береді. тегіне жазылған мәтін браузерде бірден кодтау тілі ретінде танылады.
Бұл кодты көрсетудің орнына, браузер бұл мәтінді мақаланың мақсаттары үшін немесе қандай да бір онлайн оқу құралының үлгісі ретінде қолданып отырғаныңызды түсінеді.
Семантикалық тегтерді пайдалану мазмұныңызды сәндеуге сізге көптеген қосымша ілгектер береді. Бәлкім, бүгін сіз өзіңіздің код үлгілеріңіздің әдепкі браузер стилінде көрсетілуін қаласаңыз болады, бірақ ертең оларды сұр фон түсімен қоңырау шалғыңыз келсе, кейінірек сіз бірдей қаріптерге арналған қаріптер отбасын немесе қаріптер стектерін анықтағыңыз келеді сіздің үлгілеріңіз. Сіз барлық нәрселерді семантикалық белгілеу және сәтті қолданылған CSS арқылы оңай пайдалана аласыз.
Семантикалық тегтерді дұрыс пайдаланыңыз
Сименттік тегтерді таныстыру мақсатында емес, мағынаны жеткізу үшін пайдаланғыңыз келгенде, олардың жалпы көрініс қасиеттері үшін оларды дұрыс қолданбағаныңыз жөн. Ең жиі қолданылатын семантикалық тегтердің кейбірі мыналарды қамтиды:
- blockquote - Кейбіреулер тырнақшасыз мәтінді шығару үшін тегін қолданады. Бұл блоктаушалар әдепкі бойынша шегіндіріледі. Егер сіз шабуылдың пайдасын ғана қаласаңыз, бірақ мәтін блоктық емес, оның орнына CSS маржаларын пайдаланыңыз.
- p - Кейбір веб-редакторлар сол бет мәтіні үшін нақты параграфтарды анықтауға қарағанда, бет элементтері арасында қосымша орын қосу үшін
& nbsp; (параграофта қамтылған үзілмейтін бос орын) пайдаланады. Бұрын аталған атрибуция мысалында болғандай, кеңістікті қосу үшін маржа немесе толтырғыш стилі сипатын қолданыңыз.
- ul - blockquote сияқты, мәтінді көпшілік шолғыштардағы мәтінді
тегтің шегіністерінде қамту. Бұл семантикалық түрде дұрыс емес және жарамсыз HTML, себебі - тегтері
тегінде жарамды. Тағы да, шегініс мәтініне маржаны немесе толтырғыш стилін пайдаланыңыз.
- h1-h6 - Тақырып тегтерін қаріптерді үлкенірек және батыл ету үшін қолдануға болады, бірақ егер мәтін тақырып емес болса, ол тақырып тақырыпшасында болмауы керек. Қаріптің салмағы мен шрифт өлшеміндегі CSS сипаттарын пайдаланыңыз, егер сіз бетіңіздегі нақты мәтіннің өлшемін немесе салмағын өзгерткіңіз келсе.
Мәні бар HTML тегтерін пайдаланып,
тегтері бар барлық нәрсені қоршаған ортаға қарағанда көбірек ақпарат беретін беттер жасайсыз.
HTML тегтері қандай семантикалық?
Әр HTML4 тегі мен барлық HTML5 тегтерінің семантикалық мағынасы болса да, кейбір тегтер ең алдымен мағыналық сипатта болады.
Мысалы, HTML5 мағыналық болу үшін және тегтерінің мәнін қайта анықтады. тегі аса маңызды емес, керісінше, мәтінді әдетте қалыңда көрсетіледі. тегі қосымша маңызды немесе басымдықты жеткізбейді, бірақ әдетте курсивпен көрсетілетін мәтінді анықтайды.
Семантикалық HTML тегтері
Қысқарту <акроним> Қысқартылған
Ұзақ тырнақша Анықтау <мекенжай> Құжаттың авторына (мекенжайларына) арналған мекенжайы Citation Кодекс сілтемесі Teletype мәтіні Логикалық бөлісу Жалпы кірістірілген стиль контейнері Мәтін жойылды Кірістірілген мәтін Баса назар аударыңыз Күшті назар
Бірінші деңгей тақырыбы
Екінші деңгейдегі тақырып
Үшінші деңгей тақырыбы
Төртінші деңгей тақырыбы
Бесінші деңгейдегі тақырып
Алтыншы деңгей тақырыбы
Тақырыптық үзіліс Пайдаланушы енгізетін мәтін
Алдын ала пішімделген мәтін
Қысқа кірістірілген баға Мысал шығару Подписка Superscript Айнымалы немесе пайдаланушы анықталған мәтін