<Bölüm> ve <div> arasındaki fark nedir?
Yanıtlar:
<section> içindeki içeriğin gruplandığı (yani tek bir temayla ilgili olduğu) ve sayfanın anahatlarında bir girdi olarak görünmesi gerektiği anlamına gelir.
<div>Öte yandan, kendi içinde ve niteliklerinde bulunanların dışında hiçbir anlam taşımaz .classlangtitle
Yani hayır: a kullanmak <div>HTML'de bir bölüm tanımlamaz.
Spec'ten:
<section>
<section>Öğesi bir belge veya uygulamanın genel bir bölümünü temsil eder. Bu bağlamda bir bölüm, içeriğin tematik bir gruplandırılmasıdır. Her birisectiontipik olarak elemanın alt öğesi olarak bir başlık (h1-h6 elemanı) eklenerek tanımlanmalıdır<section>.Bölümlere örnek olarak bölümler, sekmeli iletişim kutusundaki çeşitli sekmeli sayfalar veya tezin numaralı bölümleri verilebilir. Bir Web sitesinin ana sayfası tanıtım, haber öğeleri ve iletişim bilgileri için bölümlere ayrılabilir.
...
<section>Eleman jenerik konteyner öğesi değil. Bir öğeye yalnızca stil verme amacıyla veya komut dosyası oluşturma için kolaylık olması gerektiğinde, yazarlar<div>bunun yerine öğeyi kullanmaya teşvik edilir . Genel kural,<section>öğenin yalnızca öğenin içeriği belgenin ana hattında açıkça listeleniyorsa uygun olmasıdır.
( https://www.w3.org/TR/html/sections.html#the-section-element )
<div>
<div>Eleman hiç özel bir anlamı vardır. Çocuklarını temsil eder. Kullanılabilirclass,langvetitleardışık elemanlarının bir gruba semantik Common'ı işaretlemek için nitelikler.Not: Yazarlar,
<div>başka hiçbir elemanın uygun olmadığı durumlarda, elemanı son çare unsuru olarak görmeleri şiddetle tavsiye edilir . Öğe yerine daha uygun öğelerin kullanılması,<div>okuyucular için daha iyi erişilebilirlik ve yazarlar için daha kolay bakım sağlar.
( https://www.w3.org/TR/html/grouping-content.html#the-div-element )
sectionvs. hakkında daha fazla düşünerek div, bunların tamamen aynı unsur olduğu sonucuna vardım. W3C div"çocuklarını temsil ediyor" diyor . sectionElemanın yaptığı da bu değil mi? Evet, sectionçocuklarının birlikte gruplandığını ima eder, ancak çocukları a'nın içine koyma eylemiyle div, siz de onları bir araya toplarsınız . En azından benim yaptığım gibi, sizi tanımıyorum beyler.
sectionvs. hakkında daha fazla düşünmek div” - çok fazla düşünmeyin. HTML karmaşık değildir. “Çocukları a'nın içine koyma eylemiyle div, siz de evet, onları bir arada gruplandırıyorsunuz .” HTML özelliklerine göre değil. Bunları divşekillendirme amacıyla veya JavaScript kolaylığıyla veya W3C'nin henüz düşünmediği başka bir şeyle sarıyorsunuz, ancak okuyuculara alt öğelerin bir grup olduğunu göstermiyor.
<p>This is a paragraph</p>veya<h2>This is a second-level heading</h2> . Çünkü <div>hiçbir anlamı katar söz konusu metne uygun anlam katar başka bir HTML elemanı yoksa, sadece kullanmak.
<div> Vs <Section>
1. Tur
<div>:HTML elemanı (ya da HTML Belge Bölümü Eleman) doğal olarak herhangi bir şeyi temsil etmez akış içeriği için jenerik kapsayıcıdır. Öğeleri stil oluşturma amacıyla (sınıf veya kimlik niteliklerini kullanarak) gruplamak veya lang gibi nitelik değerlerini paylaşmaları nedeniyle kullanılabilir. Yalnızca başka bir anlamsal öğe ( <article>veya gibi <nav>) uygun olmadığında kullanılmalıdır.
<section>:HTML Bölüm elemanının ( <section>) tipik olarak bir başlığı olan bir belgenin genel bir bölümü, yani, bir içerik tematik gruplama, temsil eder.
2. devre
<div>: Tarayıcı Desteği
<section>: Tarayıcı Desteği
Tablodaki sayılar, öğeyi tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
Bu bağlamda, bir div yalnızca saf bir CSS veya DOM perspektifinden, bir bölüm de anlambilim ve yakın gelecekte arama motorları tarafından endeksleme için geçerlidir.
Sadece bir gözlem - bunu destekleyen hiçbir belge bulamadık
Bir bölüm başka bir bölüm içeriyorsa, iç bölümdeki bir h1 üstbilgisi dış bölümdeki bir h1 üstbilgisinden daha küçük bir yazı tipinde görüntülenir. Bölüm yerine div kullanıldığında, iç div h1-başlığı h1 olarak gösterilir.
<section>
<h1>Level1</h1>
some text
<section>
<h1>Level2</h1>
some more text
</section>
</section>- Level2 - üstbilgisi Level1 - üstbilgisinden daha küçük bir yazı tipiyle görüntülenir.
H1 başlığını renklendirmek için css kullanıldığında, iç h1 de renklendirildi (normal h1 gibi davranır). Firefox 18, IE 10 ve Chrome 28'de aynı davranış.
HTML5 standardında, <section>öğe ilgili öğelerin bir bloğu olarak tanımlanır.
<div>Elemanı çocuk elemanlarının bir blok olarak tanımlanır.
Bölümü aşırı kullanmamaya dikkat edin etiketini div öğesinin yerine . Bir bölüm etiketi, gövde bağlamında önemli bir bölge tanımlamalıdır . Anlamsal olarak, HTML5 belgemizi aşağıdaki gibi tanımlamamızı teşvik eder:
<html>
<head></head>
<body>
<header></header>
<section>
<h1></h1>
<div>
<span></span>
</div>
<div></div>
</section>
<footer></footer>
</body>
</html>Bu strateji, web robotlarının ve otomatik ekran okuyucuların içeriğinizin akışını daha iyi anlamalarını sağlar. Bu işaretleme, ana sayfa içeriğinizin nerede bulunduğunu açıkça tanımlar. Tabii ki, üstbilgiler ve altbilgiler bir web sitesindeki binlerce sayfa olmasa da yüzlerce sayfada sık görülür. Bölüm etiketi benzersiz içerik ihtiva nerede açıklamak için sınırlı olmalıdır. Bölüm etiketi içinde, içeriği h1 , div , span vb. Gibi hiyerarşide daha düşük HTML etiketleriyle işaretlemeye ve kontrol etmeye devam etmeliyiz .
Basit sayfaların çoğunda, yalnızca bir bölüm etiketi olmalı , birden çok bölüm olmamalıdır. Ayrıca, bölüme benzeyen başka ilginç HTML5 etiketleri de olduğunu düşünün . Belge akışınızda makale , özet , bir yana ve diğerlerini kullanmayı düşünün . Gördüğünüz gibi, bu etiketler HTML belgesinin ana bölgelerini tanımlama yeteneğimizi daha da geliştirmektedir.
mainorada etiketi ve içindeki bir veya daha fazla sectionetiketleri.
<div>Hepimizin bildiği ve sevdiği jenerik akış kabı. Ek anlamsal anlamı olmayan blok düzeyinde bir öğedir (W3C: İşaretleme, WhatWG)
<section>—Genel bir belge veya uygulama bölümü. Bir normalde bir başlık (başlık) ve belki de bir altbilgi vardır. Uzun bir makalenin alt bölümü, sayfanın büyük bir bölümü (ör. Ana sayfadaki haberler bölümü) veya bir web uygulamasının sekmeli arayüzündeki bir sayfa gibi ilgili içerik yığını. (W3C: İşaretleme, WhatWG)
Benim önerim: div: alt sürümü (hala 4.01 hala düşünüyorum) html öğesi (tasarımcılar çok ele). bölümü: son zamanlarda (html5) html öğesi geliyor.
Bölüm etiketi, html için daha semantik bir sözdizimi sağlar. div, bir bölüm için genel bir etikettir. Uygun içerik için bölüm etiketi kullandığınızda, arama motoru optimizasyonu için de kullanılabilir. bölüm etiketi ayrıca html ayrıştırma işlemini kolaylaştırır. daha fazla bilgi için bakınız. http://blog.whatwg.org/is-not-just-a-semantic
İşte bir web uygulaması (tamamen sübjektif) durumunda son html5 öğelerini birkaç nasıl ayırt bir ipucu.
<section>bir widget'ı grafik kullanıcı arayüzünde işaretlerken, widget'ın <div>bileşenlerinin düğmesi, bir düğmeyi tutan bir konteyner ve bir etiket vb.
<article> bir amacı paylaşan widget'ları gruplandırır.
<header> başlık ve menü çubuğu.
<footer> durum çubuğudur.
<section>Etiket bu bölümlerin, üst bilgiler, alt veya belgenin başka bölümleri gibi bir belgede bölümler tanımlar.
buna karşılık:
<div>Etiketi, bir bölümü veya bir HTML belgesindeki bir bölümü tanımlar.
<div>Etiket CSS ile bunları biçimlendirmek için grup blok-elementler için kullanılır.
<header>, <footer>, <nav>, <article>Vs.)
<section></section>
HTML
<section>öğesi, bir belgenin genel bir bölümünü, yani tipik olarak bir başlık içeren içeriğin tematik bir gruplamasını temsil eder. Her biri<section>, genellikle öğenin alt öğesi olarak bir başlık (<h1>-<h6>öğe)<section>eklenerek tanımlanmalıdır. Ayrıntılar için lütfen aşağıdaki bağlantıyı takip edin.
Referanslar :
- http://www.w3schools.com/tags/tag_section.asp
- https://developer.mozilla.org/en/docs/Web/HTML/Element/section
<div></div>
HTML
<div>öğesi (veya HTML Belge Bölümü Öğesi), doğal olarak hiçbir şeyi temsil etmeyen akış içeriği için genel bir kapsayıcıdır. Öğeleri stil oluşturma amacıyla (sınıf veya kimlik niteliklerini kullanarak) gruplamak veya lang gibi nitelik değerlerini paylaşmaları nedeniyle kullanılabilir. Yalnızca başka bir anlamsal öğe (<article>veya gibi<nav>) uygun olmadığında kullanılmalıdır.
Referanslar: - http://www.w3schools.com/tags/tag_div.asp - https://developer.mozilla.org/en/docs/Web/HTML/Element/div
Aralarındaki farklar hakkında daha fazla tartışan bazı bağlantılar şunlardır: