Art is like masturbation.

Design is like sex.

 
Как се “говори” (x)HTML?

Един от компонентите на Уеб стандартите е семантиката, без значение дали говорим за xHTML, CSS и т.н.. Всъщност, терминаът произлиза от гръцки и означава "знак". Значението му в нашето ежедневие най-често се свързва със значението/смисъла на думите, фразите и други лексикални елементи.

В този ред на мисли, ако искате да вървите по пътя на стандартите за създаване на уеб, то трябва да познавате семантиката на HTML и използвате правилно.

За да разберете какво всъщност е семантика, аз ще предложа пример, който е близък до значението на семантиката в уеб.
Фразата "Аз обичам Намибия" е твърде директна и смисъла и неоспоримо ясен. Ако заменим думата обичам със символа сърце, изречението ще се промени, но значението си остава същото. Семантичното значение на Аз обичам Намибия и Аз (сърце) Намибия е сходно, но структурно коренно различно.

Въпреки, че и двете са МНОГО важни (не само за индексирането на страницата, а и за достъпност), когато говорим за уеб стандарти, аз вярвам, че семантично правилният/коректен код е доста по-важен от това да имате валидизиран код, най-малкото до ниво, в което да НЕ се правят огромни грешки в структурата на кода и преплитате, като спагети различните блокови и inline елементи... само и само, за да свети зелено w3. НО колкото по-зелен е валидаторът, толкова по-добре!

Имам предвид, че бих се радвал, ако използвате правилната структура за заглавие (heading), вместо стилизиран DIV и пропуснете rows и cols атрибутите на textarea тага. Често сме толкова заети (притискани от безумни срокове и следващи проекти), че забравяме стремежа към "съвършенството", т.е. безупречна, семантична структура и зелена светлина от валидатора, а не е толкова трудно, нали?

Има толкова много тагове в HTML и всеки от тях има значение и определено място в кода.

Една от първите стъпки, за да проговорите "чужд език" (/x/HTML), е да научите значението на "думите" (таговете), за да се използват правилно. Колкото повече думи (тагове) научавате, толкова по-голяма е възможността да построявате "богати" изречения. Но... само се предполага :)

Всъщност, разбирането на таговете е най-същественото в уеб-семантиката – първа стъпка. Когато говорим за (x)HTML, се оказва, че голяма част от таговете са акроними, това е така единствено и само, защото е във ваша полза – да разбирате по-лесно кой таг за какво се ползва. Някои от таговете:

  • p - paragraph - абзац/параграф
  • em - emphasis - наклонен/курсив
  • div - division - блок/секция/преграда
  • td - table data
  • th - table header

Втората стъпка е правилното използване на който и да е бил таг /"думичка"/, както в нашия език има подредба, значение, последователност и т.н. в думичките, така е и в HTML. Всъщност, има за цел да визуализира HTML, чрез описание, вие трябва да описвате истинското съдържание и то не как да е, а правилно за да може браузера на клиента да чете това и визуализира коректно.

Любимият ми пример е елементарен, но е толкова важен от гледна точка за семантиката!
(Винаги е предизвиквало бурно недоразумение у мен гледайки чужд сорс код...) Примерът е:

ПРАВИЛНО:
<h1>Това е моето заглавие на статията</h1>

ако трябва с думички да се напише/опише кода:

<начало на заглавие разряд 1>Това е моето заглавие на статията</край на заглавие разряд 1>
абсолютно правилно семантично!

Ето и ГРЕШНИЯТ пример:

<div class="zaglavie">Това е моето заглавие на статията</div>

с думички:

<начало на отдел с клас заглавие>Това е моето заглавие на статията</край на отдел с клас заглавие>

Тук недоразуменията са много, но основното – браузърът не възприема това горе като заглавие, а като отделна структура в "произведението", което довежда до главоболия. Освен това имаме КЛАС, който от своя страна в CSS е описан и още затормозяване на ситуацията... БЕЗСМИСЛИЦА!

DIV може да се ползва, като "рамка"/блок на други елементи, но не и като атрибут за описване/форматиране на текст – ако това беше така, то нямаше да има един куп тагове за описване на текст/заглавие.

За нов абзац използваме P, а за "нов ред" <br />
Свидетелствал съм на много "креативни" подходи за нови редове и параграфи - отново с DIVове

Списъците би било глупаво, ако подреждаме с помощта на P & BR – имаме три таг-а за списъци: UL, OL, DL DT и техните съдържателни частички ЛИ & DD. А с допълнителни, помощни атрибути можете да подредите списъка във възходящ или низходящ и изберете тип на списъка.

Болезнената тема за <TABLE> – моят съвет е да използвате таблици, когато имате таблична информация! Скоро гледах един опит за създаване на календар посредством списъци, повярвайте – пълно недоразумение, а и бидейки типа информация (т.е. тя е таблична примерно месец Май - дни (буква), дни(цифра )),  съвсем нормално е да използваме таблица.

Но би било безумие да базирате структурата/рамките на дизайна на таблици, както до преди 2-3 години...

Можете да обогатявате вашата "семантика", добавяйки допълнителни атрибути към различните тагове. Практичен пример, когато споменавам HTML и/или CSS, това са съкращения и за хората, които не се занимават с ИТ това не говори нищо за това мога да използвам например:<abbr title="Cascading Style Sheet>CSS</abbr> и т.н.

Без да се впускам в "дълбоки" разсъждения – използвайте богатството на "езика" си, упражнявайте се да говорите "книжовно"!

Също както всеки един друг език (френски, немски, руски и иврит...), ще ви отнеме време да се научите правилно да говорите xHTML. За да ускорите този процес – упражнения! Не е важно, че ще липсва една буква и скобка (образно казано), а е важно дали правилно ще разбира браузърът това, което му "говорите".

Лекции и Статии
 
Аз видях, погледни през моите очи
 фотогалерия на кристалин чавдаров  пейзажи от цяла българия  Снимки на българската природа - планини, море, забележителности. Фотогалерия и фотобанка.  фотография, пейзажи, снимки, сток, България, природа, забележителности, изкуство, тракове, пътешествия, истории, разкази, услуги  снимки от сватби, сватбен фотограф, сватбено заснемане, сватбена фотография  Информация относно фотозаснемането на вашата сватба от сватбен фотограф
Чурилик
Себеизлеяния
"Аз мога - тук и сега"