HTML Etiketlerini Yerleştirme

HTML Etiketlerini Doğru Şekilde Yuvaya Alma

Bugün herhangi bir web sayfası için HTML işaretine bakarsanız, diğer HTML öğelerinde bulunan HTML öğelerini görürsünüz. Diğerlerinin "iç" olan bu unsurlar, "iç içe geçmiş elemanlar" olarak bilinen ve bugün herhangi bir web sayfası oluşturmak için gerekli olan unsurlardır.

HTML Etiketlerini İçeren Ne Demektir?

Yuvalamayı anlamanın en kolay yolu, HTML etiketlerini içeriğinizi barındıran kutular olarak düşünmektir. İçeriğiniz metin, resim vb. Içerebilir. HTML etiketleri içeriğin etrafındaki kutulardır. Bazen, diğer kutuların içine kutuları yerleştirmeniz gerekir. Bu "iç" kutular diğerlerinin içine yerleştirilmiştir.

Bir paragraf içinde kalın olmasını istediğiniz bir metin bloğunuz varsa, metnin kendisinin yanı sıra iki HTML öğesine de sahip olursunuz.

Örnek: Bu bir metnin cümlesidir .

Bu metin bizim örneğimiz olarak kullanacağımız şeydir. İşte nasıl yazılacağı.

Örnek: Bu, bir metnin cümlesi.

"Cümle" kelimesinin kalın olmasını istediğiniz için, bu worod'dan önce ve sonra açılış ve kapanış etiketlerini eklersiniz.

Örnek: Bu, metnin bir cümlesi .

Gördüğünüz gibi, cümlenizin içeriğini / metnini içeren bir kutumuz (paragraf) ve bu kelimeyi cesurca oluşturacak ikinci bir kutu (güçlü etiket çifti) var.

Etiketleri yerleştirdiğinizde, etiketleri açtığınız sıra sırasına göre kapatmanız son derece önemlidir. Önce

, ardından , ardından bunu tersine çevirip ve sonra kapatırsınız.

Bunu düşünmenin başka bir yolu da kutuların benzetimini bir kez daha kullanmaktır. Başka bir kutunun içine bir kutu koyarsanız, dış veya kutu kutusunu kapatabilmek için önce iç tarafını kapatmanız gerekir.

Daha İç içe geçmiş Etiketleri Ekleme

Ya sadece bir ya da iki kelimeyi kalınlaştırmak istiyorsan, diğeri italik olacaksa? İşte bunu nasıl yapacağız.

Örnek: Bu, metnin bir cümlesi ve ayrıca bazı italikleştirilmiş metin içeriyor.

Dış kutumuzun

, artık iç içe iki etiketinin olduğunu görebilirsiniz - ve . Her iki kutu da kapalı olmalıdır.

Örnek: Bu bir cümle metnidir ve ayrıca bazı italikleştirilmiş metin de vardır.

Bu başka bir paragraftır. < / p>

Bu durumda kutuların içinde kutularımız var! En fazla çıkış kutusu

veya bir "bölüm" dir. Bu kutunun içinde bir çift iç içe paragraf etiketi vardır ve ilk paragrafın içinde bir sonraki ve etiket çiftine sahibiz. Bir kez daha, bugün herhangi bir web sayfasına bakın ve bunu göreceksiniz ve çok daha fazla iç içe geçmiş oluyor! Bu, sayfaların nasıl yapıldığı - kutuların içindeki kutulardır.

Neden Yerleştirme Hakkında Dikkat Edersiniz

Yuvalamayı önemsemenizin bir nedeni de CSS kullanacak olmanızdır. Basamaklı Stil Sayfaları, stillere tutarlı bir şekilde yerleştirilecek etiketlere güvenir ve böylece stillerin nerede başladığını ve biteceğini söyler. Sayfadaki "bir sınıf" içeriğiyle "bölümün içindeki tüm" bağlantıları etkileyecek bir stil ayarlarsanız, yanlış yerleştirme, tarayıcının bu stilleri nereye uygulayacağını bilmesini zorlaştırır. Biraz HTML'ye bakalım:

Örnek: Bu bir cümle metnidir ve ayrıca bazı italicized text de vardır.

Bu, başka bir paragraf .

Az önce bahsettiğim örneği kullanarak, bu bölüm içindeki bağlantıyı etkileyecek bir CSS stili yazmak istediğimde ve yalnızca bu bağlantıyı (sayfanın diğer bölümlerindeki diğer bağlantılardan farklı olarak) kullanmak zorundayım. tarzımı yazmak için yuvalama, şöyle:

.main-content bir {color: # F00; }

Diğer nedenler arasında erişilebilirlik ve tarayıcı uyumluluğu bulunmaktadır. HTML'niz yanlış bir şekilde yuvalanmışsa, ekran okuyucuları ve eski tarayıcılar için erişilebilir olmayacaktır - ve tarayıcılar HTML öğelerini ve etiketlerini düzgün bir şekilde oluşturmayı başaramazsa bir sayfanın görsel görünümünü tamamen kesebilir. yersiz

Son olarak, tamamen doğru ve geçerli HTML yazmayı deniyorsanız, doğru yerleştirmeyi kullanmanız gerekir. Aksi halde, her doğrulayıcı HTML'nizi yanlış olarak işaretler.