Basit HTML5 Belgesi
En basit HTML5 belgelerinden birini düşünün. Özel bir belge tipi açıklama kodu (bu kodun anlamı bir sonraki bölümde açıklanmaktadır) kullanarak belge tipinin belirlenmesiyle başlar, ardından belgenin kodlaması ve adı gelir ve ardından içeriği gelir. Bu durumda, içerik bir metin paragrafından oluşur:
Bu basit belge daha da basitleştirilebilir. Örneğin, bitiş etiketiр>aslında HTML5 standardında gerekli değildir, çünkü tarayıcılar bir belgenin sonundaki tüm açık öğelerin nasıl kapatılacağını bilir (ve HTML5 standardı bu davranışı yasallaştırır). Ancak köşeleri bu şekilde kesmek, basitleştirmek yerine işaretlemenin anlaşılmasını zorlaştırır ve beklenmeyen hatalara neden olabilir.
Çoğu web geliştiricisi, geleneksel bölümleri kullanmanın
Ve belgenin algılanmasını kolaylaştırmak için yararlıdır, çünkü sayfa (sayfa başlığı) ve içeriğin kendisi (sayfanın gövdesi) hakkındaki bilgileri net bir şekilde ayırırlar. Bu yapı özellikle sayfaya komut dosyaları, stil sayfaları ve meta öğeler eklendiğinde kullanışlıdır:
Tarayıcıyı HTML5 tarzında sallayalım!
Son olarak, belgenin tamamı (doctype satırı hariç) geleneksel öğeye sarılabilir. , aşağıdaki listede gösterildiği gibi:
Tarayıcıyı HTML5 tarzında sallayalım!
HTML5'e kadar, resmi HTML belirtiminin her sürümü, öğenin kullanılmasını gerektiriyordu. , bu öğenin varlığının hiçbir şekilde tarayıcının sayfa kodunun geri kalanını nasıl işlediğini etkilememesine rağmen. HTML5'te bu öğenin kullanımı tamamen geliştiriciye bırakılmıştır.
Öğeleri kullanma ,
Ve sadece bir tarz meselesidir. Bu öğelere sahip olmayan bir sayfa, HTML5'i hiç duymamış eski tarayıcılarda bile harika çalışır. Aslında, tarayıcı bu öğelerin varlığını otomatik olarak varsayar. Bu nedenle, JavaScript kullanan bir sayfanın DOM'sine (bir sayfayı temsil eden bir dizi programatik nesne) bakarsanız, öğeler için nesneler içerecektir. , Ve , geliştirici bunları kullanmamış olsa bile.Bu aşamada, bu örnek sayfa, en basit HTML5 belgesi ile pratik bir HTML5 web sayfasının gelişmiş başlangıç noktası arasında bir yerdedir. İlerleyen bölümlerde, gerekli öğelerin geri kalanını buna ekleyeceğiz ve işaretlemenin daha derinlerine ineceğiz.
HTML5 belge türü açıklaması
Her HTML5 belgesinin ilk satırı, her zaman belge türünün bir açıklamasını verir. Bu açıklama, aşağıdakilerin HTML5 içeriği olduğunu açıkça belirtir ve şöyle görünür:
HTML5 belge türü açıklamasıyla ilgili ilk dikkatinizi çeken şey, çarpıcı sadeliğidir. Örneğin, web geliştiricilerinin katı XHTML 1.0 ile çalışırken kullanması gereken belge türünün beceriksiz açıklamasıyla karşılaştırın:
Profesyonel web geliştiricileri bile başka bir belgeden bir XHTML belge türü açıklamasını kopyalayıp yapıştırmak zorunda kaldı. Ve HTML5 belge türü açıklaması kısa, net ve elle yazılması kolaydır.
HTML5 belge türü açıklaması, resmi HTML sürüm numarasını (HTML5 için 5) içermediği için de dikkate değerdir. Sadece sayfanın bir HTML sayfası olduğunu belirtir. Bu, yaşayan bir dil olarak yeni HTML5 konseptiyle uyumludur. HTML'ye eklenen yeni özellikler, bunun için belge türü açıklamasında değişiklik yapılmasına gerek kalmadan otomatik olarak sayfaya yerleştirilmek üzere kullanılabilir.
Bütün bunlar zor bir soruyu gündeme getiriyor: HTML5 yaşayan bir dilse, o zaman neden bir sayfanın bir belge türü açıklamasına ihtiyacı var?
Bu sorunun cevabı, belge türü tanımının tarihsel nedenlerle kullanılmaya devam etmesidir. Eksik belge türü açıklamasına sahip bir sayfayı işlerken, çoğu tarayıcı (Internet Explorer ve Firefox dahil) uyumluluk modu (tuhaflıklar modu). Bu modda, önceki sürümlerde kullanılan kurallardaki hatalara göre sayfayı oluşturmaya çalışırlar. Bununla ilgili sorun, bir tarayıcının uyumluluk modunun başka bir tarayıcının uyumluluk modundan farklı olabilmesidir, bunun bir sonucu olarak, bir tarayıcı için tasarlanan hangi sayfalar büyük olasılıkla yanlış yazı tipi boyutu, bozuk yazı tipi boyutu gibi başka bir tarayıcıda hatalarla görüntülenecektir. tasarım yapısı vb.
Tarayıcı sayfada bir belge türü açıklaması bulduğunda, bu sayfayı daha katı kurallara göre işlemesi gerektiğini bilir. standart modu, herhangi bir modern tarayıcı tarafından görüntülendiğinde tutarlı biçimlendirme ve sayfa yapısı sağlar. Birkaç istisna dışında tarayıcı, açıklamada ne tür bir belgenin belirtildiği konusunda tamamen kayıtsızdır. Yalnızca sayfanın bir tür belge türü açıklamasına sahip olup olmadığını kontrol eder. HTML5 belge türü açıklaması, tarayıcının standartlar modunu etkinleştiren en kısa geçerli belge türü açıklamasıdır.
Karakter kodlaması
kodlama bilgisayara bir dosyaya metin yazarken metni bir bayt dizisine nasıl dönüştüreceğini (ve bir dosyayı açarken nasıl tersine çevireceğini) söyleyen bir standarttır. Tarihsel nedenlerden dolayı, dünyada birçok farklı kodlama vardır. Günümüzde neredeyse tüm web siteleri, ihtiyaç duyabileceğiniz diğer alfabelerdeki tüm karakterleri destekleyen kompakt ve hızlı UTF-8 kodlamasını kullanıyor.
Web sunucuları genellikle ziyaret eden tarayıcılara sunucu tarafından sunulan sayfaların belirli bir kodlamada olduğunu söyleyecek şekilde yapılandırılır. Ancak web sitenizi barındırmayı planladığınız web sunucusunun bu şekilde yapılandırılacağından emin olamazsınız (kendi sunucunuz değilse). Ayrıca, tarayıcının böyle bir durumda kullanılan en olası kodlamayı tahmin etme girişimi, bazı belirsiz güvenlik sorunları nedeniyle başarısız olabilir. Bu nedenlerden dolayı, her zaman sayfanın işaretlemesinde kullanılan kodlama hakkında bilgi eklemelisiniz.
HTML5 bu görevi kolaylaştırır. Bunu yapmak için, sadece bir eleman eklemeniz gerekir. bloğun en başında
(veya eleman kullanılmaz, belge tipi açıklama kodundan hemen sonra):
Dreamweaver veya Expression Web gibi web geliştirme araçları, sayfa oluşturulduğunda bu öğeyi otomatik olarak ekler. Bu araçlar ayrıca dosyaların UTF kodlamasında kaydedilmesini sağlar. Ancak düz metin düzenleyicili bir web sayfası oluştururken, dosyalarınızın doğru kodlamayla kaydedildiğinden emin olmak için ek adımlar atmanız gerekebilir.
Dilim
Bir web sayfasının doğal dilini belirtmek için iyi bir form olarak kabul edilir. Bu bilgiler bazen başkaları için faydalı olabilir; örneğin, arama motorları bunu yalnızca belirtilen dildeki sayfaları döndürmek için arama sonuçlarını filtrelemek için kullanabilir.
Bir web sayfasına dil bilgisi eklemenin en kolay yolu, :
Sayfa, bir ekran okuyucuyla okumak istediğiniz birden çok dilde metin içeriyorsa, dil bilgileri de yararlı olabilir. Bu durumda, ilgili dil koduna sahip lang niteliği belgede, örneğin öğelerde doğru yere eklenir.
Stil sayfası ekleme
Düzgün tasarlanmış profesyonel bir web sitesinin hemen hemen her sayfası stil sayfalarını kullanır. Öğe, gerekli stil sayfasını belirtmek için kullanılır. blokta
HTML5 belgesi:
Bu yöntem, geleneksel HTML belgelerinde stil sayfaları belirlemeye benzer, ancak biraz daha kolaydır. Yalnızca bir basamaklı stil sayfası dili olduğundan, CSS, daha önce gerekli olan type="text/css" özniteliğini eklemek artık gerekli değildir.
JavaScript kodu ekleme
JavaScript komut dosyası dili başlangıçta sıkıcı web sayfalarına şıklık ve çekicilik katmanın zaman alıcı bir yolu olarak oluşturulmuştur. Günümüzde, JavaScript'in ana kullanımı, arayüz zilleri ve ıslıkların geliştirilmesinden, ultra verimli e-posta istemcileri, metin editörleri ve doğrudan tarayıcıda çalışan harita motorları dahil olmak üzere özel web uygulamaları geliştirmeye kaydı.
JavaScript kodu, bir HTML5 belgesine, geleneksel bir HTML sayfasına eklendiği gibi eklenir. Aşağıdaki liste, bir bağlantıdan harici bir dosyaya bir web belgesine JavaScript kodu ekleme örneğini gösterir:
Language="JavaScript" niteliği isteğe bağlıdır, çünkü başka bir betik dili belirtilmemişse (ve JavaScript, HTML için yaygın olarak desteklenen tek betik dili olduğundan, bu gelişme olasılığı ihmal edilebilir), tarayıcılar otomatik olarak JavaScript'in kullanıldığını varsayar. Ancak JavaScript kodlu harici bir dosyaya atıfta bulunurken bile kapanış etiketini hatırlamanız gerekir.. Bu etiket bir gözden kaçma nedeniyle veya boş öğe sözdizimini kullanarak kodu kısaltmaya çalışırken atlanırsa, sayfa düzgün çalışmayacaktır.
JavaScript sayfalarınızı Internet Explorer'da test etmek için çok zaman harcıyorsanız, etiketi ekleyerek MOTW (Web İşareti - ağ özelliği işareti) engellemek
kodlama satırından hemen sonra. Bu şu şekilde yapılır:
Bu kod satırı, Internet Explorer'a sayfayı uzak bir web sitesinden indirilmiş gibi işlemesini söyler. Aksi takdirde, IE özel bir engelleme moduna geçer, mesaj çubuğunda bir güvenlik uyarısı görüntüler ve siz "Engellenen İçeriğe İzin Ver" düğmesini tıklayana kadar herhangi bir JavaScript kodunu yürütmeyi reddeder.
Diğer tüm tarayıcılar MOTW işaretini yok sayar ve hem uzak web sitelerinden hem de yerel HTML dosyalarından yüklenen her iki sayfa için aynı güvenlik ayarlarını kullanır.
Yazardan: Webformyself bloguna tekrar hoş geldiniz. Ya da belki ilk kez buradasın. Bugün html5 sayfasının yapısının nelerden oluştuğuna ve bu yeni spesifikasyonun yayınlanmasıyla nasıl değiştiğine bakacağız.
Yapı nasıl değişti
Her şeyden önce, html5'in ortaya çıkmasından önce, böyle açık bir yapının hiç olmadığını söylemek isterim. Tüm şablonlar nasıl oluşturuldu? Çoğu durumda günümüzde standart hale gelen blok yerleşim yöntemi kullanılmıştır. Öğeler için kapsayıcı olarak, farklı tanımlayıcılara sahip sıradan div'ler kullanıldı.
Örneğin, başlık genellikle tanımlayıcı başlığıyla bir div olarak belirlendi, ana bilgi içeren bloğa ana veya içerik adı verildi, yan sütun tanımlayıcı kenar çubuğunu aldı.
Genel olarak, farklı sınıf adları veya benzersiz etiketler seçen çok az geliştirici vardır. Gerçekten de, kenar çubuğunun kenar çubuğu kelimesinden daha anlaşılır ve doğru bir tanımı olabilir mi? Çok az İngilizce bilgisi olan kişiler tarafından bile anlaşılır.
Bu bağlamda, html5'te, işaretlemeye daha fazla anlam kazandırmak için sıradan div'lerin yerini almak üzere tasarlanmış anlamsal bloklar olan yeni öğelerin ortaya çıkması demlendi.
Nitekim ilk derste kökenlerinin tarihini de öğrenebilirsiniz. Bu spesifikasyon hakkında henüz çok az şey biliyorsanız, okumanızı tavsiye ederim. Pekala, şimdi size bu yeni unsurlardan bazılarını anlatacağım.
İşaretlemede yeni anlamsal bloklar
Bir web sayfasındaki hemen hemen her öğe için uygun bir etiketin icat edildiğini belirtmekte fayda var. Örneğin, bir şapka için. Standarda göre, her zaman şu şekilde yapılmıştır: div id = “başlık”. Şimdi buna olan ihtiyaç ortadan kalktı - başlık kabı ortaya çıktı. Evet, bu bir çift etikettir ve başlığın tüm içeriği buna yerleştirilmiştir.
Ancak bu, ona bir sınıf veya tanımlayıcı eklenemeyeceği anlamına gelmez. Elbette yapabilirler ve yapacaklar. Başlık, sitenin ana başlığı için bir kapsayıcıdan biraz daha fazla role sahiptir.
Hemen hemen her web kaynağındaki bir haberin veya makalenin içeriğine daha yakından bakarsanız, orada yalnızca metin değil, aynı zamanda bazı ek bilgiler de bulacaksınız. Örneğin, görüntüleme sayısı, beğeni sayısı, yorum sayısı, makaleye giriş, sonuçlar, yayın tarihi ve çok daha fazlası. Her site farklıdır.
Ben ne için varım? Bir makalenin (haber, inceleme vb.) ayrıca kendi başlığı, kendi son bölümü vb. olabilir. Buna göre, bir sayfanın her biri kendi sınıfına sahip birkaç başlığı olabilir.
Bu arada, sitenin altbilgisi, en alt kısmı, altbilgi etiketi ile html5'te oluşturulmuştur. En azından birkaç tipik yerleşim düzeni oluşturduysanız, bu sizin için açık olacaktır - bu, genellikle bu bloğa verilen sınıftır.
Şimdi menü hakkında. Daha önce, onu ayırt edebilecek kendi benzersiz konteyneri de yoktu. Ayrıca div kullanılarak oluşturulmuştur. Doğal olarak, sayfadaki bu kadar önemli bir unsur için kendi etiketlerini de buldular - nav (gezinme). Ayrıca sayfada bir tane olmak zorunda değildir - bazı web kaynaklarında birkaç farklı menü görebilirsiniz ve yine de anlamı açısından sayfadaki en önemli bağlantıların içine eklenmesi önerilir.
Ana içeriğin kenar çubuğunda gösterilenden ne kadar farklı olabileceğini fark ettiniz mi? Düşünürseniz, bunlar genellikle şablonun farklı bölümleridir. İşte bu - bölümler! Elbette html5 spesifikasyonunun geliştiricileri de aynı şekilde düşündüler, bu yüzden bölüm etiketini oluşturdular. Genel anlamı, belgenin (bölüm) genellikle diğerlerinden bağımsız, kendi başlığına vb. sahip olabilen bir bölümünü içermesidir.
Yeni işaretleme örneği
Tamam, bazı yeni elementleri zaten öğrendik, onları kullanarak işaretleme yapmaya çalışalım.
başlık
< header >Şapka< / header > < nav >Ana menü< / nav > < section id = “sidebar ”>kenar çubuğu< / section > < section id = “content ”> < h1 >başlık< / h1 > < aside >Küçük bilgi makalesi< / aside > < article >Samamakale< / article > < / section > < footer >Bodrum< / footer > |
Tabii bu çok basit bir örnek. Gerçekte, bu öğelere bazı stil sınıfları eklenir. Burada tamamen yeni iki etiket uyguladık - makale ve kenar. Anladığınız gibi, makale etiketi sayfadaki ana bilgileri ve yalnızca metnini belirtir.
Yayımlanma tarihi veya yorum sayısı gibi önemli şeyler kenar bloğuna ayrıca yerleştirilmelidir. İçine asıl olmayan bilgileri koymak için yaratılmıştır, asıl olana kıyasla ikincil öneme sahiptir.
Tabii yayın tarihi önemli ama yazının kendisi ile anlam açısından bir alakası yok. Bu yüzden başka bir etikette çerçevelemeniz önerilir. Aslında bu tavsiyeler bağlayıcı değildir. Örneğin, makale etiketine tarih, görüntüleme sayısı ve diğer yan bilgilerle birlikte makalenin tamamını eklerseniz, kötü bir şey olmaz. Hatta hiçbir şeyin olmayacağını bile söyleyebilirim, sadece daha doğru bir şekilde yapmak için çabalamanız gerekiyor.
Son olarak, saat (tarih) hakkında konuşursak, onu yeni bir zaman etiketi içine almak istenir. Bu, tarayıcının bunu yalnızca sayfadaki rastgele bir öğe olarak değil, bir tarih olarak ele almasına olanak tanır.
Tabii ki, yukarıdaki işaretleme sadece bir örnektir, her gerçek site farklıdır. Örneğin, herhangi bir bölüme bir üst bilgi ve alt bilgi ekleyebilirsiniz - bunlar bölümün başlangıcını ve sonunu gösterirler, ikincil bilgiler makalenin altında bulunabilir ve yukarıda değil. Burada birçok farklı seçenek var ve sadece blogun yapısını analiz ediyorsunuz, diğer web kaynakları türlerinde her şey tamamen farklı olabilir. Örneğin, işte başka bir işaretleme seçeneği ve aynı zamanda yaşam hakkına da sahip:
Böylece, html5'in yapısında bu şekilde hızlı bir şekilde yürüdük - bu spesifikasyonun bir web sayfasının işaretlemesini çok daha anlaşılır hale getirmeye yardımcı olan yeni etiketleri. Web sitesi oluşturma hakkında öğrenmeye devam etmek istiyorsanız blogumuza abone olun.
HTML5'in yeni bir sürümünü oluşturmanın hedeflerinden biri, belgenin biçimlendirmesini basitleştirmekti. Bu sorunun çözümü, belgenin yapılandırılmasından sorumlu olan yeni etiketlerin oluşturulmasıydı.
Bir sayfa ağacı oluşturmanın temel ilkesi, tüm sayfayı yapısal elemanlara - bloklara veya bölümlere - bölmeye dayanır. Bu bölümler aşağıdaki gibi etiketleri içerir: < header> (site başlığı), < section>, < aside> , Ve < footer> (Bodrum). Yukarıdaki etiketlerin oluşturulmasından önce, mizanpaj tasarımcıları etiketleri kullandı < div> benzersiz sınıflar ve kimlikler kullanarak belgeyi yapılandırmak için. Özel olarak oluşturulmuş kod < div> anlaşılması çok zor ve okunamıyor. Bunun nedeni etiket üzerinde mantıksal yük olmamasıdır. Bu, arama motorları için büyük bir engel oldu.
Bu gerçek, yoğun kod ormanında robotlar için sözde "harita" haline gelen anlamsal bir yüke sahip etiketlerin ortaya çıkmasını teşvik etti.
Yeni etiketler kullanmanın faydaları
Arama motoru optimizasyonu
Modernize edilmiş HTML5'i kullanmanın ilk ve önemli olumlu yanı, arama robotları için kod işleme kolaylığıdır. Şu anda robotlar sitedeki yardımcı bilgileri ana konu ve içerikten kolaylıkla ayırt edebiliyor.
Sonuç olarak, arama motorları benzersiz içerik ve intihal bulma verimliliğini artıracaktır.
Bununla birlikte, birçok SEO'nun, arama motorlarının bu tür işaretlemeler üzerinde çalışması ilkesinin ana özünü anlamadığını belirtmekte fayda var, ancak bu bir zaman meselesidir.
kullanılabilirlik
Yeni yerleşim yöntemlerinin kullanılabilirliğinin görsel bir analizi için örnek bir site düşünün:
Bu siteye bakıldığında, ana içeriğin nerede olduğunu ve destekleyici bilgilerin nerede olduğunu bulmak oldukça kolaydır ve ayrıca site üstbilgisi, menüleri ve altbilgisinin nerede olduğu da açıkça görülmektedir. Ancak sesli tarayıcıları kullanırken örneğin bir mağaza sitesiyse sitenin özüne inmek çok zordur. Sunulan ürün yelpazesinin özüne ulaşmak için, kullanıcının herkesin sahip olmadığı yoğun azim ve sabra ihtiyacı olmayacaktır.
Bu gibi durumlarda çıkış yolu yeni etiketler kullanmaktır. Site adından menüye, ana içeriğe ve yardımcı site gezinme öğelerine yalnızca bir sesli komutun geçmesine izin verecekler.
HTML5'in bu olumlu yönleri, alternatif arama motorlarının yaratıcılarının beklenmedik bir şekilde ilgisini çekmesine neden oldu, belgenin semantiği üzerinde ciddi bir önyargı oluşturuyorlar.
Yapısal etiketlerin temel amacı hakkında kısaca:
Bölüm
Bu etiket birbiriyle ilişkili blokların yapılandırılmasından sorumludur. Ayrıca bu komutu kullanarak metni bölümlere, bölümlere ve alt bölümlere ayırabilirsiniz. Genellikle, böyle bir etiketin içinde bir başlık bulunur.
Bir belgenin anlamsal yapısını oluşturmak için bu etiketi kullanma hakkında daha fazla bilgi için "HTML5'te Belge Yapısı Oluşturma bölümünü kullanarak" makalesine bakın.
Daha net bir açıklama için, büyük bir metni, alt bölümleri ve alt paragrafları da olabilen bölümlere ve paragraflara ayırma örneğine dönelim. Ankraj malzemesi için aşağıdaki kod örneğine bakalım
< article> < h1>Makale başlığı h1> < p>Tanıtım... p> < section> < h1>Makale alt bölüm başlığı h1> < p>alt bölüm içeriği p> section> < section> < h1>Makalenin ikinci alt bölümünün başlığı h1> < p>alt bölüm içeriği p> section> article>
Bu arada, h1 işaretçisiyle birden fazla başlığın varlığına dikkat edin, bu daha sonra tartışacağımız özel bir numaradır.
Bazı kullanıcılar iddia ediyor < section> - bu, blok düzeni etiketinin değiştirilmesinden başka bir şey değildir < div> . Ancak bu ifade doğru değildir. Bölümün ne zaman uygun olduğu ve ne zaman uygun olmadığı arasında net bir ayrım vardır. Örneğin, belirli bir stil kabına bağlanırken, yalnızca başvurmanız gerekir < div> . Ayrıca doğal bir başlık olmadığında bölüm bloğunda yer alan anlamsal yükün kullanılmamasına da dikkat edilmesinde fayda vardır.
makale
Deneyimli web yöneticileri bu bölüme etiketin özel bir durumu olarak atıfta bulunur. < section> . Makale, sayfanın birbirine bağlı öğelerden oluşan "bağımsız" (anlamını kaybetmeden bir bütün olarak sayfadan kesilebilen) bölümünü vurgular.
Bağımsız bölümlere örnek olarak, blogdaki makalelerin duyuruları, reklam birimleri, çeşitli widget'lar (örneğin, hava durumu ile birlikte) verilebilir.
Bununla birlikte, spesifikasyon bu kavramı oldukça belirsiz bir şekilde tanımlamaktadır, bunun bir sonucu olarak tam olarak ne kullanılacağı konusunda çok fazla tartışma olmuştur: < section> veya < аrticle> . Bu konudaki ana anlaşmazlıklar aşağıdaki noktaları içerir:
- web sayfasının ana kapsayıcısını oluşturmak için kullanmalısınız < section>, < аrticle> veya < div> . Bir yandan tüm içerikler bir şekilde birbiriyle ilişkilidir, ancak site bağımsız bir birim olarak adlandırılabilir.
- site başlığı tam olarak nasıl tasarlanır veya daha doğrusu hangi etiketler kullanılır?
- ve son olarak, sitenin ana içeriğiyle nasıl çalışılır? kullanmak gerekiyor < section> itibaren < аrticle> içeride veya münhasıran birini kullanın < аrticle> .
Bu karışıklık, etiketlerin kullanımı konusunda benzer anlaşmazlıkların ortaya çıktığı zamanları hatırlatıyor. < acronim> Ve < abbr> . O zaman, sorun oldukça basit ama radikal bir şekilde çözüldü: kullanmayı reddettiler. < acronim> .
Ve tüm bunlarla bağlantılı olarak, tamamen mantıklı ve meşru bir soru ortaya çıkıyor: neden kullanıyorsunuz? < аrticle> , eğer onu terk edebilir ve sadece onunla çalışabilirsen < section> ? Sonuç olarak, HTML5'in modernizasyonu, web yöneticilerinin işini kolaylaştırmayı amaçlıyordu.
Büyük olasılıkla bu durumda reddetmek < аrticle> doğru olmaz, çünkü HTML'nin önceki sürümünde bulunan tamamen aynı blok stili işaretlemeyi alırdık. Bu sorunun çözümü, iyileştirme olacaktır. < section> sitenin ana içeriği ile destekleyici bilgiler arasında net ayrımlar yapılacak şekilde.
Yeni başlayan site kurucularına yardımcı olmak için, ne zaman kullanacağınıza kolayca karar verebileceğiniz birkaç özel özellik sunuyorum. < аrticle> :
- Ana yaklaşım kullanıcı için değerlidir, dikkatini çeker, yani sayfanın ana içeriği.
- Eğer pubdat veya cite niteliklerini eklemek mantıklı olacaksa.
- Kod parçasının tam özerkliği durumunda, düşünüyoruz.
kenara
Sayfanın ana içeriğini yardımcı içerikten ayırmak için oluşturuldu.
Yani, metinde, ek menülerde, reklam afişlerinde ve sayfanın ana içeriğiyle ilgili olmayan diğer bilgilerde çeşitli alıntılar yapabiliriz.
Çoğu zaman, sitedeki bu tür bilgiler kenar çubuğunda bulunur.
başlık
Sayfanın başlığını açıkça vurgulamaya yarar. Hem tüm belgenin hem de tek tek bölümlerinin başlıklarını içerir. Çoğu zaman bu bölümün içinde aşağıdaki gibi etiketler bulabilirsiniz: < hgroup> Ve < h1>-< h6> . Ancak, bu reçete gerekli değildir, prensip olarak, başlıkta herhangi bir etiket bulunabilir.
Örnekte belirtildiği gibi, bu etiketin öncelikle bir başlık oluşturulurken kullanıldığını belirtmekte fayda var:
<
header>
<
a href=
"/"
><
img src=
"/logo.png"
alt=
Vaden Pro/>
[Menü]
[Arama]
Ancak, bu etiketi bir web sayfasının başlığıyla sınırlamamalısınız. < header> içine yerleştirilebilir < section>, < article>, < aside> ve özel istisnai durumlarda < nav> . Bu yaklaşımla etiket < header> bir alt öğedir ve bu ayrı bölümün başlığına karşılık gelir. Ne zaman bir örnek düşünün < header> içeride kullanılan < article> :
< article> < header> < h1>Önemli metin h1> < time> 21. 02. 10 time> header>[Yayın metni] article>
Başlığın, parçanın başlığını bir araya getirdiğini belirtmekte fayda var, ancak bu kısım yalnızca addan oluşuyorsa, bu etiket kullanılmamalıdır:
< article> < header> < h1>Önemli metin h1> header>[Yayın metni] article>
Bu, başlığın mantıksız bir kullanımıdır, aşağıdaki kod girişi anlambilim açısından daha doğru olacaktır:
< article> < h1>Önemli metin h1>[Yayın metni] article>
altbilgi
Sitenin yapısından aşağı inerek, bir bölümün veya genel olarak bir sitenin bazı açıklayıcı bilgilerini içeren "bodrumumuza" yavaş yavaş yaklaştık. Bu bilgiler bir etiketle ayrılır < footer> :
< footer> < p id= "copyright" >&kopyala; 2014 Vaden Pro p> < p>Her hakkı saklıdır p> footer>
Sitenin bu bölümünde, bu kaynağın yazarlık hakları, telif hakkı, yardımcı kaynaklara çeşitli bağlantılar vb. Bu yüzden etiket kullanımını sınırlayamazsınız. < footer> sadece ana sayfada. kaynağın çeşitli bölümlerinde kullanmak mantıklı olacaktır. Ayrıca kusura bakmayın < footer> sitenin en altında olmalıdır. Örneğin, sayfa düzeni şöyle görünür:
< article> < header> < h1>Önemli bilgi h1> < time> 05. 04. 2015 time> header> < footer> < div class = "autor" >Danil Goyda div> < a href= "#" >yazar hakkında a> | < a href= "#" >Yazarın tüm yayınları a> footer>[kendini gönder] article>
gezinme
Navigasyon kullanımı sitenin navigasyon bölümünün ana içerikten ayrılmasından sorumludur. Bu blok, yalnızca sitenin diğer sayfalarına değil, aynı zamanda mevcut sayfadaki bağlantı bağlantılarını da içerebilir. Örneğin, aşağıdaki koda bakalım:
< header> < a href= "/" >< img src= "/logo.png" alt= "VadenPro" /> a> < nav> < ul>[Menü] ul> nav>[ Arama] header>
Ayrıca, yalnızca bir bağlantı listesi değil, karmaşık bir yapıya sahip bağımsız bir bölüm oluşturan şeylere de dikkat etmeye değer. Bakıyoruz:
< nav> < a href= "" >Zor gezinme a> < section> < h1>Sitenin ilk bölümü h1> < ul> < li>< a href= "" >paragraf a> li> [ ... ] ul> section> < section> < h1>Sitenin ikinci bölümü h1> < ul> < li>< a href= "" >Paragraf a> li> ul> section> nav>
Ve şunu unutma < nav> bir web sayfasının ana gezinme bloğunu oluşturur. altbilgideki yardımcı bağlantılar veya gezinmeyi tekrarlayan bloklar gibi ek site gezinme öğeleri bu etiketle vurgulanmamalıdır.
Bir sürü HTML5 sayfasına ve tabii ki kaynak kodlarına bakmam gerekiyor. Bu yazımda sizlere sıklıkla karşılaştığım hataları ve şüpheli işaretlemeleri anlatacağım ve bunlardan nasıl kaçınılacağını anlatacağım.
Kullanmayın dekorasyon için bir sarıcı olarak
Site işaretlemede sıklıkla karşılaştığım en yaygın sorunlardan biri, öğelerin keyfi olarak değiştirilmesidir.
süper kandırma sayfam
Bunun yerine şunu görüyorum:
Dürüst olmak gerekirse, bu yanlış: Bu nedenle, HTML5 ve ARIA rol çiftini kullanan yukarıdaki örnek için doğru işaretleme aşağıdaki kod olacaktır. Tasarıma bağlı olarak yine de ekstra öğelere ihtiyacınız olabileceğini lütfen unutmayın.
Hangi öğeleri kullanacağınızdan emin değilseniz, içeriğinizi işaretlemek için HTML5 öğelerini seçmeyle ilgili adım adım kılavuzumuza bakmanızı öneririm. eleman HTML5 spesifikasyonundan kaldırıldı ve kullanımdan kaldırıldı, yaklaşık editör. Yapamıyorsanız işaretleme yazmanın bir anlamı yok, değil mi? Ne yazık ki, sık sık öğeleri görüyorum bence bunun farkındasın
Eğer senin
Başlıklardan bahsetmişken, genellikle yanlış kullanıldığını görüyorum. . Kullanılmamalı ile birlikte İlk sorun şuna benziyor:
Richard Clark Bu durumda kurtulmak ve sadece başlığı bırakın:
Richard Clark Bir sonraki sorun, isteğe bağlı oldukları öğeleri yeniden kullanmaktır:
Ne zaman tek alt öğedir
Daha fazla kullanım durumu Bulabilirsin . Yazma sırasında 30'dan fazla yeni öğe var ve anlamlı yapısal düzen oluşturmaya gelince başımızın dönmesi şaşırtıcı değil. Bu nedenle, şu anda mevcut olan tüm süper anlamsal öğeleri kötüye kullanmayın. Hangi, ne yazık ki, genellikle öğeye olur eleman Not: Bir sayfadaki tüm bağlantı gruplarının bir öğeye sarılması gerekmez Anahtar ifade "ana gezinme blokları" dır. Bütün gün "müdür" kelimesinin anlamı hakkında tartışabiliriz, ama benim için anlamı şu: Ve burada "doğru" veya "yanlış" bir kullanım olamazken, kendi yorumumla birlikte yüzey araştırması, aşağıdaki durumların kullanılmasının uygun olmadığını göstermektedir. Bağlantı listenizi sarmak isteyip istemediğinizden emin değilseniz Bu soruların her ikisinin de cevabı “hayır” ise, büyük olasılıkla değildir. Ah, Daha önce, gerekmedikçe fazladan kod yazmamanızı tavsiye etmiştim. Burada da aynı hata. Her resmin sarıldığı siteler gördüm Şartname şu anlama gelir: Bu, ana belgede hiçbir şekilde bahsedilmeyen özel tasarım bir resimse, bu kesinlikle değildir. Sorunsuz bir şekilde bir sonraki soruna geçerken, yukarıdaki kurallar onun için geçerlidir. İşte birkaç yaygın örnek:
Buraya eklenecek bir şey yok: bu tamamen yanlış. Logonun içeride olması gerekip gerekmediği konusunda yüzümüzde mavi olana kadar tartışabiliriz.
hakkında başka bir yaygın yanılgı Lachlan Avı İngilizce orijinal makale: http://www.alistapart.com/articles/previewofhtml5 İllüstrasyonlar: Kevin Cornell Tercüme: Vlad Merzhevich Ağ sürekli gelişiyor. Her gün HTML'nin sınırlarını zorlayan yeni ve yenilikçi web siteleri oluşturuluyor. HTML4, neredeyse on yıldır piyasada ve yayıncılar, dilin ve tarayıcıların sınırlamaları nedeniyle geride kalan gelişmiş işlevsellik sağlamak için yeni yöntemler arıyor. Yazarlara daha fazla esneklik ve birlikte çalışabilirlik sağlamak, sitelerini ve uygulamalarını daha etkileşimli ve sürükleyici hale getirmek için HTML5, form öğeleri, API'ler, multimedya, yapılar ve anlambilim dahil olmak üzere bir dizi özelliği sunar ve genişletir. HTML5 üzerindeki çalışmalar 2004'te başladı ve şu anda W3C HTML WG ve WHATWG arasında ortak bir çaba olarak devam ediyor. Dört büyük tarayıcı satıcısının (Apple, Mozilla, Opera ve Microsoft) temsilcilerinin yanı sıra kendi ilgi alanları ve uzmanlıklarına sahip bir dizi başka kuruluş ve birey de dahil olmak üzere, W3C'nin çalışmalarına birçok önemli oyuncu katılmaktadır. Spesifikasyonun hala geliştirilme aşamasında olduğunu ve tamamlanmaktan oldukça uzak olduğunu unutmayın. Bu nedenle, bu makalede açıklanan bazı işlevlerin gelecekte değişmesi olasıdır. Bu makale, mevcut projede bulunan bazı temel özellikleri kısaca açıklamayı amaçlamaktadır. HTML5, sayfaların yapısını basitleştiren bir dizi yeni öğe sunar. Çoğu HTML4 sayfası, üstbilgi, altbilgi ve sütunlar gibi genel öğeler içerir. Şimdi, kural olarak, belge kodunda öğeler kullanılarak belirtilirler. Şekil, kullanılarak ortaya konan iki sütunun tipik bir düzenlemesini göstermektedir. Öğeleri kullan Elementler süper kandırma sayfam
Kullanmak
önce
başlığın alt başlıklar, alternatif başlıklar veya sloganlar gibi çeşitli düzeyleri olduğunda yapısal bir başlığı temsil eder.
Taciz
en iyi paylaşımım
en iyi paylaşımım
Yanlış kullanım
en iyi paylaşımım
en iyi paylaşımım
Benim şirketim
1893 yılında kuruldu
Benim şirketim
1893 yılında kuruldu
Tüm bağlantı listelerini içine sarmayın
Ortak Öğe Hataları
her resim öyle değil
logonuz değil
ama bunun için burada değiliz. Asıl sorun yanlış kullanım
şirketin adı
eleman
Yapı
Sigortalının kişisel hesabı
Otomatik tanımlama sistemi Elektronik harita sistemi ile AIS'nin ortak kullanımı
Wargame: Red Dragon başlamıyor mu?
Üzücü escobar "Ukrayna yargı sisteminin yüzü"
ROME Total War - tüm grupların kilidi nasıl açılır?