Jump to content

HTML5 Semantic Structure


Recommended Posts

გამარჯობა, თემაში მინდა გესაუბროთ HTML5 - ის სწორ  სემანტიკურ აგებაზე. სემანტიკა თავის თავში გულისხმობს ვებ დოკუმენტში ამა თუ იმ ელემენტის შესაბამისი ტეგებით გაფორმებას. გასათვალისწინებელია ისიც,რომ სემანტიკურად სწორად აგებული დოკუმენტი კარგად მოქმედებს SEO - ზეც...

 

 

როგორც იცით HTML5 - ში რეალიზებული იქნა რამდენიმე ახალი ტეგი, რომლებსაც აქვთ სემანტიკური დატვირთვა, სწორედ ამ ტეგებზე მინდა გავამახვილო ყურადღება.

 

 

როცა ამ თემის დაწერა გადავწყვიტე არჩევანი მქონდა ორ ვარიანტს შორის:

 

 

პირველი - ჩამომეწერა ეს ტეგები შესაბამისი განმარტებებით.

 

მეორე - დამეწერა პატარა კოდი ამ ტეგების გამოყენებით და გამეფორმებინა კომენტარებით.

 

 

არჩევანი მეორეზე შევაჩერე, ვფიქრობ ცალსახაა, რომ კოდში უკეთ აღიქმება ყველაფერი. მოკლედ დავიწყოთ :dwarf:

<!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>

 

ვფიქრობ საკმარისია. რათქმაუნდა არანაირი პრეტენზია არ მაქვს სისრულეზე ან უშეცდომობაზე :)


მადლობთ ყურადღებისთვის :D

  • Upvote 5
Link to comment
Share on other sites

შენ საჭირო კაცი ხარ და კარგია რო დარეგისტრირდი.. კარგი და სასარგებლო პოსტია!  :thumbsup:

  • Upvote 1
Link to comment
Share on other sites

მადლობა კარგი იყო... ასე გააგრძელე!  :thumbsup:

Link to comment
Share on other sites

შენ საჭირო კაცი ხარ და კარგია რო დარეგისტრირდი.. კარგი და სასარგებლო პოსტია!  :thumbsup:

 

მადლობა კარგი იყო... ასე გააგრძელე!  :thumbsup:

 

მადლობა თქვენ :)

 

 

კარგია )

 

)

 

გიპასუხე.

Link to comment
Share on other sites

seo-სთვის დიდ არაფერ შედეგს არ იძლევა "ამჟამად", არც რანქის ასამაღლებლად აქვს რაიმე უპირატესობა. არის ფორუმები სადაც ასევე ამბობენ.

 

პატარა რამდენიმე გვერდიანი საიტისთვის კიდევ მისაღებია, მაგრამ ამჟამად მე მაინც ძველ მეთოდზე ვრჩები როგორც უმეტესობა. სანამ არ გახდება სტანდარტულად გამოყენებადი.

 

 

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

Link to comment
Share on other sites

seo-სთვის დიდ არაფერ შედეგს არ იძლევა "ამჟამად", არც რანქის ასამაღლებლად აქვს რაიმე უპირატესობა. არის ფორუმები სადაც ასევე ამბობენ.

 

პატარა რამდენიმე გვერდიანი საიტისთვის კიდევ მისაღებია, მაგრამ ამჟამად მე მაინც ძველ მეთოდზე ვრჩები როგორც უმეტესობა. სანამ არ გახდება სტანდარტულად გამოყენებადი.

 

 

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

 

არვიცი სად და რას კითხულობ,მაგრამ მოქმედებს და ლოგიკურია, რომ უნდა იმოქმედოს კიდეც, ასევე screenreader - ებზე.

 

და ვფიქრობ არუნდა იყოს სადავო,რომ კოდი სემანტიკურად სწორად უნდა იყოს აგებული. სტანდარტს რაც შეეხება უკვე პრობლემების გარეშეა HTML5 - ზე წერა, რა პრობლემა შეგექმნა?

 

ხოდა რავიცი ვწეროთ მეტი რა პრობლემაა :)

ისე შენ ილიაში სწავლობ მგონი ხო?

Link to comment
Share on other sites

სეოზე კარგად მოქმედებსო და მაშინ რით მოქმედებს კონკრეტულად გვითხარი.

რანქინგს მაგით ვერ აიწევ და სხვაგვარად ისედაც მშვენივრად მოქმედებს.

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

Link to comment
Share on other sites

სეოზე კარგად მოქმედებსო და მაშინ რით მოქმედებს კონკრეტულად გვითხარი.

რანქინგს მაგით ვერ აიწევ და სხვაგვარად ისედაც მშვენივრად მოქმედებს.

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

 

 

 

Why Should I Use Semantic HTML?

You could just say: "because it's the right thing for the web," but it's benefits go far beyond that. For instance, it makes it easier for screenreaders to interpret in an order that will make sense to users with visual impairments.

Secondly, SEO and Semantic HTML are close friends. They might sometimes have conflicts of interest, which we'll get to later on in this document, but over all, they're friends. The purpose of SEO is to help search engine spiders better understand what a page is about and therefore categorize them better. Since a search engine spider basically has even less capabilities than a screenreader, it needs even more guidance in determining a page's structure and topic. Good semantic HTML provides just that structure.

Semantic HTML tries to convey meaning through the words and the tags on a page. Try thinking of it this way: the content on the page is the words you speak. The tags provide the structure, the intonation, the pauses and even the looks on your face. Basically, your tags are half your message.

 

 

http://dev.opera.com/articles/view/semantic-html-and-search-engine-optimiza/

 

 

 

რატომაც არა,საინტერესო იქნება,მაგრამ პსდ - ს იმდენ ჭრა/კერვა უნდა მაგხელა ვიდეოს ჩაწერისას დავიტანჯებით მგონი,თან არასდროს არაფერი ჩამიწერია მე. საწყის ეტაპზე მაშინ რაიმე მარტივი გავაკეთოთ პსდ-ს გარეშე, ანუ ვთქვათ რომ ექნება ჰედერი,ლოგო,მენიუ,მარჯვება ან მარცხენა ან ორივე საიდბარი,კონტენტი,ფუთერი... მოკლედ სტანდარტული რა და გავაკეთოთ.

Link to comment
Share on other sites

კაი გავატარეთ, მასე მეც დავდებ საპირისპირო სტატიებს :)

 

 

 

პსდ-ს დაჭრას, ფოტოშოპს ნუ გადავუღებთ, უკვე დაჭრილზე გავაკეთოთ :) რაიმე პატარა ვნახოთ, დიდი დრო რომ არ წაიღოს, ერთი გვერდი

Link to comment
Share on other sites

კაი გავატარეთ, მასე მეც დავდებ საპირისპირო სტატიებს :)

 

 

 

პსდ-ს დაჭრას, ფოტოშოპს ნუ გადავუღებთ, უკვე დაჭრილზე გავაკეთოთ :) რაიმე პატარა ვნახოთ, დიდი დრო რომ არ წაიღოს, ერთი გვერდი

 

კი ბატონო.ნახავ რამეს შენ?თუ მეც ვეძებო?

 

უბრალოდ ხვალ კახეთში მივდივარ,ორშაბათს ჩამოვალ და გავაკეთოთ,კარგი უნდა გამოვიდეს მგონი :)

Link to comment
Share on other sites

კაი მერე იყოს თუ მიდიხარ. მაქამდე გავაკეთებ მე. თუ არ დამეზარა :D

Link to comment
Share on other sites

  • 2 months later...

თავიდან მიყევი, მასე ხტომიალით არ გამოვა.

მარტო ტეგების სახელების ცოდნა არაა. ბევრი უნდა აწყო და სხვადასხვა სტრუქტურის ბლოკების სწორად დალაგება და გასტილვა უნდა დაამუღამო ჯერ

Link to comment
Share on other sites

თავიდან მიყევი, მასე ხტომიალით არ გამოვა.

მარტო ტეგების სახელების ცოდნა არაა. ბევრი უნდა აწყო და სხვადასხვა სტრუქტურის ბლოკების სწორად დალაგება და გასტილვა უნდა დაამუღამო ჯერ

აჰა ანუ სჯობს მივყვე

html

xhtml

css

javascript

php

ასე ხო?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.