Რა განსხვავებაა დივიზიასა და სექტორს შორის?

გააზრება HTML5 SECTION Element

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

ბევრი ფიქრობს, რომ HTML ელემენტების სექცია და მართლაც იგივეა, რაც ზოგადი კონტეინერი ელემენტები გამოიყენება ვებ-გვერდზე შინაარსის შემცველი. სინამდვილეში ისაა, რომ ეს ორი ელემენტი, როგორც კონტეინერების ელემენტებით, არის არაფერი, მაგრამ ზოგადი. არსებობს კონკრეტული მიზეზები, რათა გამოიყენოთ SECTION- ის ელემენტი და DIV ელემენტი - და ამ სტატიაში აისახება ეს განსხვავებები.

განყოფილებები და განყოფილებები

SECTION ელემენტი განისაზღვრება როგორც ვებ-გვერდის ან საიტის სემანტიკური სექცია, რომელიც არ არის კიდევ ერთი კონკრეტული ტიპი (როგორც სტატია ან განზე). მე, როგორც წესი, გამოვიყენებ ამ ელემენტის გვერდს, რომელიც განლაგებულია გვერდის მკაფიო მონაკვეთზე - სექცია, რომელიც შეიძლება საბითუმო გადაადგილდებოდეს და გამოყენებული იქნას სხვა გვერდებზე ან საიტის ნაწილებზე. ეს არის მკაფიო შინაარსი ან შინაარსი "სექცია", თუ გნებავთ.

ამის საპირისპიროდ, თქვენ იყენებთ DIV ელემენტს გვერდის ნაწილებზე, რომლითაც გსურთ გაყოფა, მაგრამ სემანტიკის გარდა . მე დავამთავრებდი შინაარსის შინაარსს დივიზიონში, თუ მე ვაკეთებ ასე სუფთად მისცეს თავს "Hook" გამოიყენოს CSS. ეს შეიძლება არ იყოს მკაფიო შინაარსის შინაარსი სემანტიკაზე, მაგრამ ის არის რაღაც კარნახით, რომ განლაგდეს განლაგება ჩემი გვერდისთვის.

ეს ყველაფერი სემანტიკის შესახებ

ეს არის რთული კონცეფცია, მაგრამ მხოლოდ განსხვავება DIV ელემენტს და SECTION ელემენტს შორის არის სემანტიკა. სხვა სიტყვებით რომ ვთქვათ, ეს არის კოდითა განყოფილების მნიშვნელობა , რომელიც გაყოფა.

ნებისმიერი შინაარსი, რომელიც შეიცავს DIV ელემენტს შიგნით არ გააჩნია თანდაყოლილი მნიშვნელობა. ეს საუკეთესოა ისეთი რამისთვის, როგორიცაა:

• CSS სტილის და კაუჭები CSS სტილისთვის
• განლაგების კონტეინერები
• JavaScript ჰუკსი
• განყოფილებები HTML, რათა ის ადვილად წაიკითხოს

DIV ელემენტი გამოყენებული იქნება ერთადერთ ელემენტზე, რომელიც გვქონდა კოქსის დასამატებლად და ჩვენი სვეტების სტილის შესაქმნელად. იმის გამო, რომ ჩვენ შევედით HTML- ზე, რომელიც DIV- ის ელემენტებთან იყო დაკავშირებული, რა შეიძლება ითქვას ვებ დიზაინერებმა "დიმიტი". მე რეალურად აწარმოებს მასშტაბით HTML, რომელიც იყენებს DIV ელემენტს ნაცვლად პუნქტები!

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

რა არის SPAN ელემენტის შესახებ?

სხვა ელემენტს, რომ ადამიანების უმეტესობა ფიქრობს, როდესაც ისინი ფიქრობენ DIV ელემენტი არის ელემენტი. ეს ელემენტი, როგორც DIV, არ არის სემანტიკური ელემენტი. ეს არის inline ელემენტი, რომელიც შეგიძლიათ გამოიყენოთ ჰუკსი სტილების და სკრიპტების შესაქმნელად შინაარსიანი შინაარსით (ჩვეულებრივ ტექსტი). ამ თვალსაზრისით ზუსტად იგივეა, როგორც DIV ელემენტი, მხოლოდ inline და ბლოკ ელემენტზე . გარკვეულწილად, შეიძლება უფრო ადვილი იყოს DIV- ის მოსაზრება, როგორც ბლოკის დონის SPAN ელემენტისთვის და გამოიყენეთ იგი ისევე, როგორც თქვენ მხოლოდ SPAN მხოლოდ HTML- ის შინაარსის ბლოკებს.

არ არსებობს შესადარებელი ინლაინ სექციური ელემენტი HTML5- ში.

Internet Explorer- ის ძველი ვერსია

მაშინაც კი, თუ თქვენ მხარს ვუჭერთ IE- ს ხანდაზმულ ვერსიებს (როგორიცაა IE 8 და ქვედა), რომლებიც არ არიან საიმედოდ აღიარებენ HTML5, თქვენ არ გეშინიათ სემანტიკურად სწორი HTML ტეგების გამოყენება. სემანტიკა ხელს შეუწყობს თქვენ და თქვენს გუნდს გვერდის მართვაში მომავალში (რადგან თქვენ იცით, რომ ეს სექცია არის სტატია, თუ ის აკრავს ARTICLE- ის ელემენტს). გარდა ამისა, ბრაუზერები, რომლებიც აღიარებენ ამ tags ხელს შეუწყობს მათ უკეთესი.

თქვენ კვლავ შეგიძლიათ გამოიყენოთ HTML5 სემანტიკური სექციური ელემენტები Internet Explorer- ზე, თქვენ უბრალოდ უნდა დაამატოთ სკრიფტინგის და შესაძლოა რამდენიმე DIV ელემენტის დამატება, რათა მათ აღიარონ HTML- ის ტეგები.

DIV და SECTION ელემენტების გამოყენება

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

ჯენიფერ კრიინინის ორიგინალური სტატია. რედაქტირებულია Jeremy Girard on 3/15/17