Вэбийн Стандартын Хөдөлгөөний чухал зарчим бол өнөөдөр бидэнд байдаг HTML элементийг анхдагчаар браузер дээр хэрхэн харагдахаас илүүтэйгээр HTML элементүүдийг ашиглах санаа юм. Үүнийг семантик HTML ашиглаж байна.
Семантик HTML гэж юу вэ
Семантик HTML буюу семантик тэмдэглэгээ нь зүгээр л танилцуулга биш вэб хуудсанд утга учрыг танилцуулж HTML юм. Жишээлбэл,
таг нь хаалттай текст бол догол мөр байна.
Энэ нь догол мөр, танилцуулга аль аль нь догол мөрүүд, хөтчүүдийг хэрхэн үзүүлэхийг мэддэг учраас хүмүүс.
Энэ тэгшитгэлийн сул тал дээр ба гэх мэт хаягууд нь зөвхөн текст хэрхэн харагдахыг тодруулж (тодоор бичсэн эсвэл налуу хэлбэрээр) тодорхойлж, тэмдэглэгээнд ямар ч нэмэлт утгыг өгөхгүй.
Жишээ нь
, , ба хүртэл толгойн тэмдэглэгээнүүдийг агуулдаг. Стандартаар хангасан вэбсайт бий болгоход илүү олон синтакс HTML хаягууд бий.
Та яагаад семантиксад анхаарал хандуулах хэрэгтэй вэ?
Семантик HTML бичих үр ашиг нь ямар ч вэб хуудасны жолооны зорилго байх ёстой бөгөөд харилцах хүсэлтэй байх ёстой. Таны документэд семантик тэмдэглэгээг нэмснээр харилцаа холбооны тусламжтайгаар уг баримт бичгийн тухай нэмэлт мэдээллийг өгнө. Тухайлбал, семантик тэмдэглэгээ нь браузер нь хуудсын агуулга болон агуулга ямар утгатай болохыг тодорхой болгож өгдөг.
Тэрхүү тодруулгыг хайлтын системд мэдээлж, зөв хуудсууд зөв асуултуудад хүргэх боломжийг хангах юм.
Хагас хуудасны HTML тэмдэглэгээнүүд нь тэдгээр хуудсыг хэрхэн хардагаас илүүтэйгээр тэдгээр хаягуудын агуулгын талаархи мэдээллээр хангадаг. таг дээр бичсэн текстийг шуудангийн браузерын зарим төрлөөр кодлодог.
Тухайн кодыг бичихийг оролдохын оронд хөтөч нь тухайн текстийг ямар нэг зүйл, онлайн зааварчилгааны зориулалтаар кодыг ашиглаж байгааг ойлгодог.
Семантик тэмдэглэгээг ашиглан агуулгаа сарниулахын тулд илүү их дэгээ өгнө. Өнөөдөр та өөрийн дээжийн дээжийг анхдагч вэб хөтөч дээр харуулахыг хүсч байгаа бол маргааш, тэдгээрийг саарал дэвсгэр өнгөөр дуудаж хүссэний дараа та нарийн моно зайтай фонтын гэр бүл эсвэл фонтын стекийг ашиглахыг хүсч байна Таны дээж. Та эдгээр бүх зүйлийг хялбархан тэмдэглэгээ хийж, CSS-г ухаалаг хэрэглэж болно.
Семантик үсгийг зөв ашиглана уу
Танилцуулах зориулалтаас илүүгээр утгыг илэрхийлэхийн тулд семантик нэрийг ашиглахыг хүсэж байгаа бол тэдгээрийг нийтлэг шинж чанараараа буруу ашигладаг болгоомжтой байх хэрэгтэй. Хамгийн түгээмэл хэрэглэдэг семантикуудын заримыг дурдвал:
- blockquote - Зарим хүмүүс quotation биш харин текстийг оруулахын тулд тагийг ашигладаг. Блокчлол нь анхдагчаар догол гаргасан байдаг. Хэрэв та зүгээр л догол мөрийг ашиглахыг хүсч байгаа бол текст нь блоккут биш, оронд нь CSS-ийн ашиглалтыг ашигла.
- p - Зарим вэб редакторууд нь хуудасны элементүүдийн хооронд нэмэлт зай нэмэхийн тулд
& nbsp; p> (параграoph дотор агуулагдахгүй зай) ашигладаг. Өмнөх дурдагдах жишээ жишээтэй адилаар та зай нэмэхийн тулд margin эсвэл padding style property-г ашиглах хэрэгтэй.
- ul - Жишээ нь blockquote шиг, ихэнх тийз дээр текстийг байрлах
текстийг агуулдаг. Энэ нь хоёулаа буруу, хүчингүй HTML хоёулаа бөгөөд зөвхөн - хаягууд нь
таг дотор хүчинтэй байна. Дахин хэлэхэд, текстийг ашиглан маржин эсвэл дэвсгэрлэлийн загварыг ашиглана.
- h1-h6 - Фонтууд нь илүү том, зоримог болгохын тулд гарчигны гарчигийг ашиглаж болох боловч хэрэв текст нь гарчиг биш бол толгой гарчгийн дотор байх ёсгүй. Хуудасныхаа тодорхой текстийн хэмжээ, туухайг өөрчлөхийг хүсвэл font-weight болон font-size CSS шинж чанаруудыг ашиглана уу.
Хэрвээ утгатай утгатай HTML таг ашигладаг бол
таагуудыг агуулсан бүх зүйлсийг тойрон хүрээлсэнээс илүү их мэдээллийг хүргэдэг хуудсуудыг үүсгэдэг.
Ямар HTML тэмдэгтүүд нь семантик вэ?
Бараг бүх HTML4 шошго болон HTML5 бүх шошгонууд нь утга санааг агуулдаг бол зарим хаягууд нь гол төлөв шинж чанартай байдаг.
Жишээ нь, HTML5 нь болон гэсэн утгыг ойлгохын тулд утга санааг илэрхийлсэн байна. таг нь илүү чухал ач холбогдолтой биш харин зоримогоор бичсэн текстийг агуулдаг. таг нь илүү ач холбогдол өгч эсвэл анхаарал хандуулдаггүй, гэхдээ текстийг налуугаар бичдэг.
Семантик HTML кодууд
Товчлол Актет
Урт ишлэл Тодорхойлолт Баримт бичгийн зохиогчийн хаяг Citation
Кодын лавлагаа Teletype текст Логик хэлтэс Ердийн Inline загварын контейнер Текстийг устгасан Текст оруулах Хамгийн чухал нь Хүчтэй анхаарал тавьдаг
Анхны түвшний гарчиг
Хоёрдугаар түвшний сэдэв
Гурав дахь түвшний сэдэв
Дөрөв дэх түвшний сэдэв
Тавдугаар түвшний сэдэв
Зургаа дахь түвшний сэдэв
Сэдэв завсарлага Хэрэглэгч оруулах гэж бичнэ үү
Урьдчилан бичсэн текст
Суудлын богино холбоос Жишээ гаралт Subscript Супер сэтгүүл Хувьсагч буюу хэрэглэгч тодорхойлсон текст
ба хүртэл толгойн тэмдэглэгээнүүдийг агуулдаг. Стандартаар хангасан вэбсайт бий болгоход илүү олон синтакс HTML хаягууд бий.
Та яагаад семантиксад анхаарал хандуулах хэрэгтэй вэ?
Семантик HTML бичих үр ашиг нь ямар ч вэб хуудасны жолооны зорилго байх ёстой бөгөөд харилцах хүсэлтэй байх ёстой. Таны документэд семантик тэмдэглэгээг нэмснээр харилцаа холбооны тусламжтайгаар уг баримт бичгийн тухай нэмэлт мэдээллийг өгнө. Тухайлбал, семантик тэмдэглэгээ нь браузер нь хуудсын агуулга болон агуулга ямар утгатай болохыг тодорхой болгож өгдөг.
Тэрхүү тодруулгыг хайлтын системд мэдээлж, зөв хуудсууд зөв асуултуудад хүргэх боломжийг хангах юм.
Хагас хуудасны HTML тэмдэглэгээнүүд нь тэдгээр хуудсыг хэрхэн хардагаас илүүтэйгээр тэдгээр хаягуудын агуулгын талаархи мэдээллээр хангадаг. таг дээр бичсэн текстийг шуудангийн браузерын зарим төрлөөр кодлодог.
Тухайн кодыг бичихийг оролдохын оронд хөтөч нь тухайн текстийг ямар нэг зүйл, онлайн зааварчилгааны зориулалтаар кодыг ашиглаж байгааг ойлгодог.
Семантик тэмдэглэгээг ашиглан агуулгаа сарниулахын тулд илүү их дэгээ өгнө. Өнөөдөр та өөрийн дээжийн дээжийг анхдагч вэб хөтөч дээр харуулахыг хүсч байгаа бол маргааш, тэдгээрийг саарал дэвсгэр өнгөөр дуудаж хүссэний дараа та нарийн моно зайтай фонтын гэр бүл эсвэл фонтын стекийг ашиглахыг хүсч байна Таны дээж. Та эдгээр бүх зүйлийг хялбархан тэмдэглэгээ хийж, CSS-г ухаалаг хэрэглэж болно.
Семантик үсгийг зөв ашиглана уу
Танилцуулах зориулалтаас илүүгээр утгыг илэрхийлэхийн тулд семантик нэрийг ашиглахыг хүсэж байгаа бол тэдгээрийг нийтлэг шинж чанараараа буруу ашигладаг болгоомжтой байх хэрэгтэй. Хамгийн түгээмэл хэрэглэдэг семантикуудын заримыг дурдвал:
- blockquote - Зарим хүмүүс quotation биш харин текстийг оруулахын тулд тагийг ашигладаг. Блокчлол нь анхдагчаар догол гаргасан байдаг. Хэрэв та зүгээр л догол мөрийг ашиглахыг хүсч байгаа бол текст нь блоккут биш, оронд нь CSS-ийн ашиглалтыг ашигла.
- p - Зарим вэб редакторууд нь хуудасны элементүүдийн хооронд нэмэлт зай нэмэхийн тулд
& nbsp; p> (параграoph дотор агуулагдахгүй зай) ашигладаг. Өмнөх дурдагдах жишээ жишээтэй адилаар та зай нэмэхийн тулд margin эсвэл padding style property-г ашиглах хэрэгтэй.
- ul - Жишээ нь blockquote шиг, ихэнх тийз дээр текстийг байрлах
текстийг агуулдаг. Энэ нь хоёулаа буруу, хүчингүй HTML хоёулаа бөгөөд зөвхөн - хаягууд нь
таг дотор хүчинтэй байна. Дахин хэлэхэд, текстийг ашиглан маржин эсвэл дэвсгэрлэлийн загварыг ашиглана.
- h1-h6 - Фонтууд нь илүү том, зоримог болгохын тулд гарчигны гарчигийг ашиглаж болох боловч хэрэв текст нь гарчиг биш бол толгой гарчгийн дотор байх ёсгүй. Хуудасныхаа тодорхой текстийн хэмжээ, туухайг өөрчлөхийг хүсвэл font-weight болон font-size CSS шинж чанаруудыг ашиглана уу.
Хэрвээ утгатай утгатай HTML таг ашигладаг бол
таагуудыг агуулсан бүх зүйлсийг тойрон хүрээлсэнээс илүү их мэдээллийг хүргэдэг хуудсуудыг үүсгэдэг.
Ямар HTML тэмдэгтүүд нь семантик вэ?
Бараг бүх HTML4 шошго болон HTML5 бүх шошгонууд нь утга санааг агуулдаг бол зарим хаягууд нь гол төлөв шинж чанартай байдаг.
Жишээ нь, HTML5 нь болон гэсэн утгыг ойлгохын тулд утга санааг илэрхийлсэн байна. таг нь илүү чухал ач холбогдолтой биш харин зоримогоор бичсэн текстийг агуулдаг. таг нь илүү ач холбогдол өгч эсвэл анхаарал хандуулдаггүй, гэхдээ текстийг налуугаар бичдэг.
Семантик HTML кодууд
Товчлол Актет
Урт ишлэл Тодорхойлолт Баримт бичгийн зохиогчийн хаяг Citation
Кодын лавлагаа Teletype текст Логик хэлтэс Ердийн Inline загварын контейнер Текстийг устгасан Текст оруулах Хамгийн чухал нь Хүчтэй анхаарал тавьдаг
Анхны түвшний гарчиг
Хоёрдугаар түвшний сэдэв
Гурав дахь түвшний сэдэв
Дөрөв дэх түвшний сэдэв
Тавдугаар түвшний сэдэв
Зургаа дахь түвшний сэдэв
Сэдэв завсарлага Хэрэглэгч оруулах гэж бичнэ үү
Урьдчилан бичсэн текст
Суудлын богино холбоос Жишээ гаралт Subscript Супер сэтгүүл Хувьсагч буюу хэрэглэгч тодорхойлсон текст