1. Shoti
(Off)
[ 21 Oct 2013, 21:59 ]
გამარჯობა, თემაში მინდა გესაუბროთ HTML5 - ის სწორ სემანტიკურ აგებაზე. სემანტიკა თავის თავში გულისხმობს ვებ დოკუმენტში ამა თუ იმ ელემენტის შესაბამისი ტეგებით გაფორმებას. გასათვალისწინებელია ისიც,რომ სემანტიკურად სწორად აგებული დოკუმენტი კარგად მოქმედებს SEO - ზეც...
როგორც იცით HTML5 - ში რეალიზებული იქნა რამდენიმე ახალი ტეგი, რომლებსაც აქვთ სემანტიკური დატვირთვა, სწორედ ამ ტეგებზე მინდა გავამახვილო ყურადღება.
როცა ამ თემის დაწერა გადავწყვიტე არჩევანი მქონდა ორ ვარიანტს შორის:
პირველი - ჩამომეწერა ეს ტეგები შესაბამისი განმარტებებით.
მეორე - დამეწერა პატარა კოდი ამ ტეგების გამოყენებით და გამეფორმებინა კომენტარებით.
არჩევანი მეორეზე შევაჩერე, ვფიქრობ ცალსახაა, რომ კოდში უკეთ აღიქმება ყველაფერი. მოკლედ დავიწყოთ.
<!DOCTYPE html>
<html lang="ka">
<head>
<title>HTML5 Semantic Structure</title>
<meta charset="utf-8" />
</head>
<body>
<header><!-- header განსაზღვრავს ვებ დოკუმენტის ან/და სექციის თავს. header - ის გამოყენება მრავალჯერ შეგვიძლია დიკუმენტში სადაც იქნება საჭირო რაიმის დასათაურება -->
<nav> <!-- ტეგი <nav> გამოიყენება ნავიგაციის ასაგებად, <nav> - ტეგის გამოყენება ხშირად ხდება <footer> - ში ჩამონათვლის გაკეთების დროს -->
<ul>
<li>პირველი</li>
<li>მეორე</li>
</ul>
</nav>
</header>
<article> <!-- <article> განსაზღვრავს ბლოგ-პოსტის, კომენტარის ან კონტენტის შემადგენლობას -->
<header> <!-- აქ <header> - ის და <footer> - ის სახმარებით აღვწერე სათაური და მისი აღწერა -->
<h2>რაღაცა</h2>
</header>
<footer>
<p>ქვე რაღაცა</p>
</footer>
<section> <!-- <section> განსაზღვრავს თემატურად დაჯგუფებულ კონტენტს ამ შემთვავში ბლოგ-პოსტს -->
<p>ლორემ იპსუმ მოწაფე გარდასული სულიც ტუჩებში
<mark>ლორემ იპსუმ</mark> <!-- <mark> გამოიყენება ტექსტი ან სიტყვის გამოსაკვეთად ძირითადი ნაწილიდან -->
ფოტოებს სიიდან ფრიალით ვოლტერი დაგედებოდეს უზიარებს</p>
</section>>
</article>
<aside> <!-- <aside> ძირითადან გამოიყენება დამხმარე, მარჯვენა ან მარცხენა სვეტების ასაგებად -->
<article>
<h2>ლორემ იპსუმ</h2>
<p>ლორემ იპსუმ თვლემსო ჩაიცვით ყმადაო დანაა სათათბიროს ჩერინგს ვიტრინებზე გამიხადოს ეშმაკური.</p>
</article>
</aside>
<footer> <!-- <footer> წარმოადგენს დოკუმენტისა ან სექციის დაბოლოვებას, როგორც წესი footer ელემენტი შეიცავს მეტა ინფორმაციას მისი მშობელი სექციის შესახებ -->
<address> <!-- <address> წარმოადგენს მისი შემცველი სექციის საკონტაქტო ინფორმაციას -->
<a href="#">Shoti</a>
</address>
</footer>
</body>
</html>
პრინციპში ეს იყო რისი თქმაც მინდოა, განვიხილესავით:
<header>
<nav>
<article>
<section>
<aside>
<address>
<footer>
ვფიქრობ საკმარისია. რათქმაუნდა არანაირი პრეტენზია არ მაქვს სისრულეზე ან უშეცდომობაზე
მადლობთ ყურადღებისთვის
[Pasuxi][Cit]|
|HTML5 Semantic Structure
