Code.ge Blog

სწორად აგებული ვებ დოკუმენტის უმთავრესი დეტალი სტრუქტურასა და ლოგიკასთან ერთად არის სემანტიკურად სწორი (X)HTML კოდი. რას ნიშნავს სემანტიკურად სწორი კოდი? პირველ რიგში თავად ამ სიტყვის განმარტება ლექსიკონის მიხედვით:

semantics |səˈmantiks|

plural noun [usu. treated as sing. ] the branch of linguistics and logic concerned with meaning. There are a number of branches and subbranches of semantics, including formal semantics, which studies the logical aspects of meaning, such as sense, reference, implication, and logical form, lexical semantics, which studies word meanings and word relations, and conceptual semantics, which studies the cognitive structure of meaning.
the meaning of a word, phrase, sentence, or text : such quibbling over semantics may seem petty stuff.

Google – ს მიერ შემოთავაზებული განმარტება:

Intended meaning. In computing, semantics is the assumed or explicit set of understandings used in a system to give meaning to data.

ყველასათვის კარგად ცნობილია (X)HTML ენა წარმოადგენს ტეგების კრებულს. ტეგების უდიდეს ნაწილს(თუმცა არა ყველას) გააჩნია სემანტიკური(აზრობრივი) დატვირთვა და სწორად ასეთი ტეგების გამოყენებით იქმნება სემანტიკურად სწორი დოკუმენტი. რას ნიშნავს ეს?

სემანტიკურად სწორი დოკუმენტი თავისთავად გულისხმობს რომ მისი ის ტექსტური ნაწილი რომელიც შეიცავს გარკვეულ ინფორმაციას უნდა იყოს შესაბამისი ტეგებით დამუშავებული. მაგალითად დოკუმენტში არსებული დასათაურებები(სათაურები, ქვესათაურები) უნდა იყვნენ მოთავსებული h1, h2 და ა.შ. ტეგებში. ჩამონათვალი უნდა გაკეთდეს შესაბამისად ul/li ან ol/li ტეგების კომბინაციით. ტექსტი პარაგრაფებად უნდა დაიყოს P ტეგების გამოყენებით და არა BR ან სხვა რომელიმე ტეგების გამოყენებით და ა.შ.

იმისათვის რათა ავაგოთ სემანტიკურად სწორი დოკუმენტები საჭიროა გავერკვიოთ თვითონ იმ ტეგებში რომლებსაც გააჩნიათ სათანადო სემანტიკური დატვირთვა, ასეთი ტეგები არცთუ ისე ბევრია ამიტომ მათი აქ ჩამოთვლა არ წარმოადგენს პრობლემას.

• დასათაურებები – h1, h2, h3, h4, h5, h6 ელემენტები
• პარაგრაფი – P ელემენტი
• დატვირთვის(მნიშვნელობის) მინიჭება – em ელემენტი
• უფრო მეტი დატვირთვის(მნიშვნელობის) მინიჭება – strong ელემენტი
• აბრევიატურა – abbr ელემენტი
• კოდი – code ელემენტი
• ციტირება – cite ელემენტი
• ციტირება – blockquote ელემენტი
• ჩამონათვალი – ul, ol, li ელემენტები
• განმარტებების ჩამონათვალი – dl, dt, dd ელემენტები

როგორც ხედავთ ტეგების რაოდენობა საკმაოდ მცირეა… თუმცა ეს ტეგები სავსებით საკმარისია ლოგიკურად და სემანტიკურათ სწორი დოკუმენტების ასაგებად.

დასათაურებები – h1, h2, h3, h4, h5, h6 ელემენტები

დასათაურებები(Headings) როგორც მათი სახელი გვეუბნება გამოიყენება დოკუმენტის სხვადასხვა ნაწილების დასათაურებისათვის. ასეთი ტეგი სულ ექვსი ცალია რაზეც მიუთითებს ტეგების ინდექსები და განსაზღვრავს დასათაურების მნიშვნელობას(წონას). მაგალითად ამ პოსტის სათაური მოთავსებულია h1 ტეგში რაც მიუთითებს იმას რომ იგი ყველაზე მნიშვნელოვანია.

დოკუმენტის აგებისას სათაურებისა და ქვესათაურების გამოსაყოფად აუცილებლად უნდა გამოვიყენოთ ეს ტეგები. მაგალითად:

<h1>დოკუმენტის სათაური</h1>
<h2>დოკუმენტის ქვესათაური</h2>

პარაგრაფი(აბზაცი?) – P ელემენტი

ამ ელემენტის გამოყენება აუცილებელია ნებისმიერ დროს როდესაც ვმუშაობთ ტექსტებთან და დოკუმენტის რომელიმე ნაწილს ვყოფთ პარაგრაფებად(იმ შემთხვევაშიც კი როდესაც პარაგრაფების რაოდენობა არ აღემატება ერთს) სხვა რომელიმე ტეგის(მაგალითად div ან span) ამ მიზნით გამოყენება არასწორია რადგან P ტეგის გარდა არც ერთს არ გააჩნია მსგავსი სემანტიკური დატვირთვა. ასევე აღსანიშნავია რომ ახალი პარაგრაფის დასაწყებად არ არის რეკომენდირებული BR ტეგის გამოყენება.

მაგალითად შემდეგი კოდი სემანტიკურად გამართულია:

<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
	Ut enim ad minim veniam, quis nostrud exercitation
        ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

ხოლო შემდეგი კოდი არ არის სემანტიკურად სწორი, რადგან DIV ტეგს არ გააჩნია არანაირი სემანტიკური დანიშნულება, იგი გამოიყენება დოკუმენტის ლოგიკური სტრუქტურის ასაგებად და არა ტექსტების პარაგრაფებად დასაყოფად.

<div>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
	<br /><br />
	Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat.
</div>

დატვირთვის(მნიშვნელობის) მინიჭება – em, strong ელემენტები

იმ შემთხვევაში თუ საჭიროა ტექსტის რომელიმე ნაწილის გამოყოფა სხვა დანარჩენისგან, და მისთვის გარკვეული მნიშნველობის მიცემა ეს შეიძლება გაკეთდეს ან em ტეგის მეშვეობით, ან თუ ტექსტის ნაწილს უნდა მიენიჭოს უფრო მეტი დატვირთვა უნდა გამოვიყენოთ strong

მაგალითად:

<p>
	<strong>Lorem ipsum dolor sit amet</strong>, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et <em>dolore magna aliqua</em>.
</p>

უნდა აღინიშნოს რომ ხშირად ამ მიზნისთვის იყენებენ B და I ტეგებს, თუმცა მათ არ გააჩნიათ არავითარი სემანტიკური დატვირთვა და ასევე ეს ტეგები იქნება ამოღებული (X)HTML – ს მომავალი ვერსიებიდან.

em და strong ელემენტებმა შეიძლება გარკვეული პროტესტი გამოიწვიონ იმ მიზეზით რომ მათ აქვთ წინასწარ განსაზღვრული სტილი(em ტეგში მოთავსებული ტექსტი ბრაუზერში ჩანს დახრილი(italic) ხოლო strong ტეგში მოთავსებული ტექსტი კი გამუქებული(bold)) თუმცა არავითარი შეზღუდვა არ არსებობს იმისათვის რათა ეს წინასწარ განსაზღვრული სტილები შევცვალოთ CSS – ის მეშვეობით, და რაც მთავარია ამითი ელემენტის სემანტიკა არ იცვლება.

აბრევიატურა – abbr ელემენტი

ეს ტეგი გამოიყენება აბრევიატურებთან. მაგალითად RSS და CSS არის აბრევიატურები. შესაბამისად ასეთი ტიპის ტექსტისთვის სემანტიკური დატვირთვის მისანიჭებლად უნდა გამივყენოთ abbr ტეგი.

მაგალითად:

  <abbr title="Really Simple Syndication">RSS</abbr>
  <abbr title="Cascading Style Sheets">CSS</abbr>

როგორც მაგალითიდან ჩანს abbr ტეგის title ატრიბუტი გამოიყენება აბრევიატურის სრული ტექსტის მისათითებლად.

ციტირება – cite ელემენტი

cite ელემენტი გამოიყენება ტექსტის ციტირებისა ან წყაროზე მისათითებლად.

     <cite>ცოტა რამ (X)HTML დოკუმენტის სემანტიკის შესახებ</cite>

ციტირება – blockquote ელემენტი

blockquote ელემენტი გამოიყენება დიდი მოცულობის ტექსტის ციტირებისათვის. აღსანიშნავია რომ განსხვავებით cite ელემენტისგან იგი არის ბლოკის ტიპის ელემენტი.

მაგალითად:

<blockquote>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</blockquote>

ასევე საჭიროების შემთხვევაში სასურველია ამ ელემენტის cite და title ატრიბუტების გამოყენება, შესაბამისად cite ატრიბუტი გამოიყენება წყაროს მისამართის მისათითებლად, ხოლო title ატრიბუტი ტექსტის სათაურის(და ავტორის საჭიროების შემთხვევაში) მისათითებლად. მაგალითად:

<blockquote cite="http://www.lipsum.com/"
   title="The standard Lorem Ipsum passage, used since the 1500s">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum
</blockquote>

ჩამონათვალი – ul, ol, li ელემენტები

ამ ელემენტების კომბინაცია(კერძოდ: ul/li ან ol/li) უნდა გამოვიყენოთ ნებისმიერი ტიპის ჩამონათვალის გასაკეთებლად (განსაკუთრებით ხშირად გამოიყენება მენიუების ასაგებად). მაგალითად მარტივი ჩამონათვალის კოდი გამოიყურება ასე:

<ul>
	<li>Liste Item One</li>
	<li>Liste Item Two</li>
	<li>Liste Item Three</li>
</ul>

შემდეგი კოდი კი არასწორია სემანტიკური თვალსაზრისით მიუხედავად იმისა რომ ვიზუალური შედეგი შესაძლოა ერთნაირი იყოს:

<div>
	Liste Item One
	<br />
	Liste Item Two
	<br />
	Liste Item Three
</div>

განმარტებების ჩამონათვალი – dl, dt, dd ელემენტები

გამოიყენება ნებისმიერი ტიპის განმარტებიბის ჩამონათვალის გასაკეთებლად. მაგალითად:

<dl>
	<dt>CSS</dt>
	<dd>Cascading Style Sheets</dd>
	<dt>RSS</dt>
	<dd>Really Simple Syndication</dd>
	<dt>HTML</dt>
	<dd>Hypertext Markup Language</dd>
</dl>

ასევე ამ ტეგების კომბინაციით ლოგიკურად შეიძლება ორი ადამიანის დილოგის გადმოცემა(საუკეთესო მაგალითია ჩატი). მაგალითად:

<dl>
	<dt>სოსო:</dt>
	<dd>როგორ ხარ იკა?</dd>
	<dt>ირაკლი:</dt>
	<dd>კარგად, შენ?</dd>
	<dt>სოსო:</dt>
	<dd>მეც კარგად  </dd>
</dl>

ტეგები: XHTML