Html p öznitelikleri. Etiketler - ne oldukları ve ne oldukları. h1-h6 etiketlerine neden ihtiyaç duyulur?

Etiket

Etiket

Bir sayfayı paragraflara bölmek için kullanılır. Yalnızca metin ve satır içi etiketler (satır düzeyi etiketleri) içerebilir. Aynı zamanda etiketin kendisi

Blok tabanlıdır yani kendisinden önce ve sonra satır sonu oluşturur. Ek olarak, sayfanın görsel olarak paragraflara bölünmesi nedeniyle, yanlarından çevredeki bağlama kadar üstte ve altta boş alan kenar boşlukları belirler. Etiket alanı boyutu

Tarayıcı türüne bağlıdır, ancak yaklaşık olarak geçerli sayfadaki bir metin satırının yüksekliğine eşittir.

Kapanış etiketi

İsteğe bağlı. Eksikse paragrafın sonu, sayfanın HTML kodunda aşağıda bulunan ilk satır içi olmayan etiket olarak kabul edilecektir.

Öznitellikler

Kişisel özellikleri:

  • hizala - Paragraf içeriğinin yatay hizalamasını ayarlar.
  • erişim anahtarı - Bir HTML öğesine odaklanmak için kısayol tuşunu ayarlar.
  • sınıf - CSS'de (Basamaklı Stil Sayfaları) kullanılan etiket sınıfının veya sınıflarının adını belirtir.
  • dir - öğe içindeki metnin yönünü gösterir.
  • - "bağlayıcı" olarak veya stil sayfalarında kullanılabilecek bir HTML etiketi tanımlayıcısının adını belirtir.
  • lang - HTML öğesinin içindeki metnin yazıldığı dili belirtir.
  • stil - satır içi CSS stillerini etikete uygulamak için gereklidir.
  • tabindex - öğeler arasındaki sekme sırasını ayarlar (Sekme tuşu).
  • başlık - fareyi bir HTML öğesinin üzerine getirdiğinizde bir araç ipucu görüntüler.

Etiket türü

Amaç: metin (bloklar).

Etiket modeli: blok (blok, blok seviyesi).

İçerebilir: satır içi etiketler, düz metin ve HTML'nin özel karakterleri(anımsatıcılar).

Açılış etiketi: gerekli. Kapanış etiketi: gerekli değil.

Sözdizimi

içerik

HTML Örneği: P Etiketini Kullanma

seodon.ru - P etiketini kullanma

Acemi web sitesi oluşturucularının yaptığı hatalardan biri, sayfadaki metin bilgilerinin arka planı için tek tip olmayan resimler veya parlak renkler kullanmaktır. Bu sadece okumayı zorlaştırmakla kalmıyor, aynı zamanda kullanıcıların görüşünü de olumsuz etkiliyor, onları her satıra bakmaya ve gereksiz yere gözlerini yormaya zorluyor.

Diğer bir hata, metin rengi görsel olarak arka plandan daha açık olduğunda, örneğin siyah arka plan - beyaz metin olduğunda, "her yerde" ters renklerin kullanılmasıdır. Bu teknik oldukça uygulanabilir, ancak yalnızca gerçekten uygun olduğu durumlarda.



HTML sürümü desteği

Sürüm:HTML4.01HTML5XHTML1.0XHTML1.1
Destek:EvetEvetEvetEvet

Tarayıcı desteği

Tarayıcı:İnternet ExplorerGoogle ChromeMozilla FirefoxOpera
Sürüm:6.0 ve üzeri2.0 ve üzeri2.0 ve üzeri9.2 ve üzeri3.1 ve üzeri
Destek:EvetEvetEvetEvetEvet

Ve bugün bunun ne olduğuna daha yakından bakacağız. HTML etiketleri ve onları ÖznitelliklerÖrneğin p, br, saat; ve ayrıca hangi rolü oynuyorlar? özellik değerleri Bir html belgesinde bulunan etiketler.

Başlamadan önce, uzun süredir yokluğumdan dolayı özür dilemek istiyorum. Gerçek şu ki, bir projeyle meşgul olduğum için blogu güncellemeyi bir süreliğine bırakmak zorunda kaldım ve programın biraz gerisinde kaldım. Ama artık her şey geride kaldı ve aynı ritmi sürdürmeyi ve düzenli olarak taze materyaller sağlamaya devam etmeyi umuyorum.

Şimdi asıl konumuza dönüyorum. Html'nin temellerine giriş bölümümde zaten html belgelerinin yapısı hakkında yazmıştım, burada ayrıca her belgede bulunması gereken ana html, head ve body etiketlerinin yanı sıra özel bir etiket hakkında da açıklamalar yapmıştım.deklarasyon denir.

Bu bölümde ayrıca liste oluşturma özelliğinin nasıl kullanılacağına ilişkin bilgiler de verilmektedir. Ayrıca sitedeki formlar ve ayrı ayrı çok çeşitli formlar tasarlamanıza olanak tanıyan etiketler hakkında bilgi sahibi olabilirsiniz: .

Siz değerli okuyuculardan, geri bildirim formu ve e-posta yoluyla çok sayıda dilek aldıktan sonra, en başa dönmeye ve hangi etiketlerin var olduğu, nasıl sınıflandırıldıkları ve html etiketlerinin özelliklerinin neler olduğu hakkında daha ayrıntılı bilgi vermeye karar verdim. . Öyleyse başlayalım.

Eşli ve tekli, blok ve satır HTML etiketleri: p, br, hr

Muhtemelen önceki blog yazılarından da anladığınız gibi, etiket, Hyper Text Markup Language'ın (HTML) ana yapısal birimidir. Genel olarak, belirli bir belgeyi (örneğin, kaynağınızın sayfalarından biri) tanımlayan html kodunu belirleyen etiketler kümesidir.

Etiketler, blok ve satır etiketlerinin yanı sıra çiftler ve tekler halinde sınıflandırılır. Şimdi sırasıyla en popüler ve en sık kullanılan etiketler örneğini kullanarak farklılıklarının özüne bakalım. Bu arada birçok kaynakta blok ve satır içi elemanların adını bulabilirsiniz, bunların aynı şey olduğunu bilin.

Başlangıç ​​olarak kısa tanımlar vereceğim. Eşleştirilmiş HTML etiketleri- aralarında içeriğin yer aldığı açılış ve kapanış etiketlerine sahip öğeler; tekil öğelerin kapanış etiketi yoktur. Blok elemanları mevcut genişliğin tamamını kaplayan elemanlardır; yüksekliği içeriğe göre belirlenir. Bu nedenle, varsayılan olarak birkaç blok öğesi birbirinin altında bulunacaktır.


Blok elemanları birbirinin içine yerleştirilebilir, ancak hepsi değil; buna daha sonra değineceğiz. Satır içi etiketler genellikle metin veya diğer satır içi öğeleri içerir, ancak satır içi etiketlerin içine blok etiketleri yerleştirmenize izin verilmez. Satır içi etiketler, blok etiketlerinden farklı olarak bir satırda bulunur ve yalnızca gerekli olması durumunda, mevcut genişlik alanı dolduğunda diğerine aktarılır.


Muhtemelen yeni başlayanlar için durum hala biraz karmaşıktır ve kafalarda kafa karışıklığı vardır, ancak bu iyi bir başlangıçtır. Gelecekte her şey daha da netleşecek, buna inanıyorum. Dahası, ortak etiketlere dayalı spesifik örneklere geçiyorum ve her seferinde satır içi veya blok, eşleştirilmiş veya tekli öğelerin hangilerine ait olduğunu not ediyorum.

Her web yöneticisinin kelimenin tam anlamıyla her dakika kullandığı p etiketiyle başlayalım, abartmıyorum. Bu unsurun adı İngilizce paragraf (paragraf, paragraf) kelimesinin baş harfinden gelir. Okuyucuların algılaması çok daha kolay olan metin parçalarını vurgulamaya yarar. Şu anda mesela bir yazı yazıyorum ve yazının metnini zaman zaman paragraflar halinde vurguluyorum, bunu görüyorsunuz.

Metni parçalara ayırarak ve kaynağa gelen ziyaretçilerin materyali algılamasını mümkün olduğunca kolaylaştırarak, tanıtımında önemli olan kaynağı arama motorları için önemli ölçüde iyileştirebilirsiniz.

Özünde doğal olarak p öğesi bir açılış ve kapanış etiketine sahip olduğundan eşleştirilmiştir. Aynı zamanda sadece satır içi elemanları içerebilen bir blok elemanıdır. Örneğin, birkaç satıra bir metin yazarsanız ve bunu açılış ve kapanış p etiketleri arasına alırsanız, tarayıcı onu yine de tek satırda görüntüler ve yalnızca metin tek satıra sığmazsa aktarılır.

HTML etiketleri Etiket p - blok öğesi p etiketinin içeriği

Ancak bu metni birkaç satırda görüntülemek için, tek olan, yani kapanış etiketi olmayan ve aynı zamanda bir satır içi öğe olan br öğesini (İngilizce "break" kelimesinden) kullanmanız gerekir. Bunu p etiketinin içeriği olan metnin her satırının sonuna yerleştirerek istenen seçeneği elde ederiz:

HTML etiketleri
Etiket p - blok öğesi
p etiketinin içeriği

Br etiketlerini yazmak neredeyse ücretsizdir. Yani, aynı anda birkaç satır seçip bu etiketi her birinin sonuna koyabilirsiniz veya metni her zamanki gibi yazıp sözde kısa çizgilerin yapılması gereken yerlere br ekleyebilirsiniz. Blok etiketi p'nin içeriğinde yer alan br satır içi elemanların sayısı istenildiği kadar fazla olabilir. Yani yeni bir satıra istediğiniz kadar metin yazabilirsiniz.

Şimdi makalenin sonunda daha ayrıntılı olarak konuşacağımız başka bir basit etikete bakalım. İK etiketinden bahsediyoruz (İngilizce'den "yatay kural"- yatay çizgi), tek ama aynı zamanda blok, çünkü varsayılan olarak mümkün olan tüm genişliği kaplıyor. Sayfa içeriğini mantıksal parçalara bölmede yararlı olan basit bir yatay çizgiyi tanımlar. Bu, metnin, resim gruplarının veya diğer bazı tasarım bileşenlerinin ayrılması olabilir.

Bu yatay çizginin görünümü, sayfanın görüntülendiği tarayıcıya, html kodu bu öğeyi içeren tarayıcıya bağlıdır. Ayrıca bu çizginin görünümü de diğer öğelerin görünümü gibi çeşitli özellikler kullanılarak düzenlenebilir. Artık bugünkü konumumuzun bir diğer bileşenine, yani html tag nitelikleri kavramına sorunsuz bir şekilde yaklaştık.

HTML etiketlerinin özellikleri ve sınıflandırılması

Html etiketlerinin özellikleri, onlara ek özellikler vermenizi ve tarayıcı tarafından görüntülenen web sayfası öğelerinin görünümünü çeşitlendirmenizi sağlar. Her etiketin birden fazla özelliği olabilir. Her biri bir web sitesi sayfasının belirli bir alanının tasarımının şekillenmesinde rol oynar. Nitelikler, öğenin adından sonra açılış etiketinin içine yazılır. Birkaç nitelik varsa bunların sırasının bir önemi yoktur; herhangi bir şey olabilir.

Hemen hemen her özelliğin kendi değeri (parametresi) vardır. Genel olarak herhangi bir tek veya eşleştirilmiş etiket şematik olarak aşağıdaki gibi temsil edilebilir:


Bir özelliğin değerini belirtmek için, özellik adlarından sonra eşittir işareti konulması ve değerin kendisinin tek veya çift tırnak içine alınması gerektiğini lütfen unutmayın. Nitelikler hem satır içi hem de blok türlerinde mevcut olabilir; hem tekler hem de çiftler etiketlerinde.

Doğal olarak tek bir öğe olması durumunda kapanış etiketi olmayacaktır. Tüm nitelikler ve değerleri açılış etiketinin içine yazılır ve boşlukla ayrılmalıdır, aksi takdirde tarayıcıda ilgili alan doğru şekilde görüntülenmez. Evet, neredeyse unutuyordum, bazı niteliklerin hiçbir değeri olamaz. Elbette, tüm etiketleri olası tüm niteliklerle birlikte ayrıştırmak imkansızdır ve bu önemli değil, asıl önemli olan bunların kullanım mekanizmasını anlamaktır. Resmi sayfada önerilen tüm html etiketlerini inceleyebilirsiniz.

Doğru, resmi olarak güncel html 4.01 standartlarına karşılık gelen veriler var. Bununla birlikte, kuralları popüler tarayıcılar tarafından zaten takip edilen html 5 sürümünün uygulanması hızlı bir şekilde gerçekleşmektedir. Ve hiper metin işaretleme dilinin yeni sürümünde bazı etiketler ve nitelikler artık geçerli olmayacak, yani HTML standartlarına uygun olmayacak. Bu nedenle zamana ayak uyduracağız ve gelecekte size yalnızca geçerli etiketler ve nitelikler sunacağım, ayrıca gelecekte HTML kod standartlarına uyulmamasını da öğreneceğiz, bu konuyla ilgili materyaller çok yakında yayınlanacak.

Ancak önerilen html etiketlerinin bir tablosunun sunulduğu resmi W3C sayfasına bir göz atalım. İlgilendiğimiz etiketin bulunduğu bağlantıya tıklarsak (açıklık sağlamak için, daha önce bahsedilen İK etiketini ele alalım, özellikle de aşağıda bununla ilgili bir örneği ele alacağız), o zaman spesifikasyonun bulunduğu bu web sayfasına yönlendirileceğiz. Bu unsurla ilgili olarak verilmiştir:


Tüm öğe nitelikleri üç gruba ayrılabilir:

  1. Evrensel Özellik Grubu- neredeyse tüm html etiketlerine uygulanırlar. Yukarıdaki ekran görüntüsünde yeşil bir çerçeveyle vurgulanmıştır
  2. Benzersiz Özellikler- bu öğeye özgü bir dizi nitelik (şekildeki hr etiketi için bunların altı mor renkle çizilmiştir: align, noshade, size, width). HTML 5 spesifikasyonu, yatay çizginin rengini belirten yeni bir renk özelliği ekledi.
  3. Olaylar- bu nitelikler, bir kullanıcı işlemine yanıt olarak bir işlem yapılması gerektiğinde gereklidir. Ekran görüntüsünde mavi bir çerçeveyle vurgulanırlar.

Nitelikler hakkında bilgi, html niteliklerinin tam listesini içeren bir tablonun bulunduğu başka bir W3C sayfasından da edinilebilir:


Bu tablo, köprü metni biçimlendirme dilinde mevcut olan tüm etiketlerin tüm niteliklerini gösterir. İstenilen özelliğin karşısındaki "İlgili Öğeler" sütununda bu özelliğin kullanılabileceği etiketler işaretlenir. "Tür" sütunu, nitelik değeri olarak kullanılabilecek veri türünü belirtir. Örneğin, (bir öğenin hizalamasını belirleyen) hizalama özelliğinin üç olası değeri vardır (sol, orta, sağ).

"Derinlik" sütunu D harfini içeriyorsa, bu özelliğin kullanılması önerilmez, aksi takdirde html belgesi doğrulamayı geçemez. Bu durumda, daha önce de belirttiğim gibi yakın gelecekte inceleyeceğimiz CSS stillerini kullanmak gerekiyor. Bu gereklidir çünkü eğilim, html 5'teki çoğu özelliğin kullanımdan kaldırılması ve öğelerin görünümünün css kullanılarak belirlenmesi gerektiği yönündedir.

Bu arada, html 5 sürümüne göre eklenen etiketler ve bunların nitelikleriyle kesinlikle eksiksiz bilgiler, bence, html'nin temellerini öğrenmeye adanmış en iyi kaynaklardan birinde, yani htmlbook'ta ve Rusça olarak sunulmaktadır.

hr etiketini kullanarak yatay bir çizgi nasıl görüntülenir?

Aşamalı olarak hareket edeceğiz. İK elemanı niteliksiz, alanın tüm genişliğini kaplayan basit bir yatay çizgiyi tanımlar (yukarıdaki örneğe bakın). hr etiketine çeşitli nitelikleri art arda uygulayarak yatay çizginin görünümünü değiştireceğiz.

Öncelikle align ve width niteliklerini yazalım. Hizalamaya gelince, bunu yalnızca öğenin genişliğini (sayfanın genişliğinden daha az) belirleyen genişlik özelliği belirtilirse kullanmak mantıklıdır. hr etiketinin bir blok elemanı olduğunu ve varsayılan olarak mevcut genişlik alanının tamamını kapladığını hatırlatayım.

Genişlik özelliğinin değeri sayılar (bu durumda genişlik piksel cinsinden belirtilecektir) veya öğenin genişliğini kullanılabilir alanın bir kesri olarak belirten yüzdeler olabilir. Size özelliğinin değeri sayılarla girilir ve öğenin yüksekliğini (bu durumda yatay çizginin kalınlığını) belirler. Öyleyse bir örneğe bakalım:

Daha sonra yukarıdakilere noshade özelliğini ekleyin. Gerçek şu ki, hr etiketini kullanırken varsayılan olarak 3D efektler (gölge) kullanılır, hemen üstte bulunan çizgiye bakarak görebilirsiniz. Noshade özelliğini belirterek bunların kullanımını yasaklamış oluyoruz.

Şimdi yatay çizginin rengini belirleyecek color özelliğini eklemeye çalışalım. Bu özelliğin kullanılmasının 3D efektleri otomatik olarak devre dışı bıraktığını, dolayısıyla gölgelemenin gerekli olmadığını unutmayın. Değer olarak rengin adını belirliyoruz, örneğin “mavi”.

Dolayısıyla, spesifik p, br, hr örneğini kullanarak, html etiketlerinin ve kullanılan çeşitli niteliklerin bir web sayfasındaki çeşitli öğelerin oluşumunu nasıl etkilediğine baktık. Yakında bu konunun devamını yayınlayacağım, bu nedenle yeni materyaller almak için RSS beslemesi veya e-posta yoluyla blog güncellemelerine abone olmayı unutmayın. Bu nedenle, en iyi dileklerimle veda etmeme izin verin.

HTML etiketleri, küresel İnternet'teki belgeler için tasarlanmış standart bir işaretleme dilidir. Onun sayesinde World Wide Web'in tüm sayfaları oluşturuldu. Şu anda bulunduğunuz sayfanın koduna bakarsanız çok sayıda alfabetik ve sayısal karakter göreceksiniz - bunlar HTML etiketleridir. Bazıları web sitelerinin arama motoru optimizasyonu için özellikle önemlidir.

Başlık etiketleri nedir?

Başlık etiketleri, bir anahtar kelimenin bir web sayfasındaki ağırlığı üzerinde en büyük etkiye sahiptir. Tarayıcı makalenin başlığını görüntüler, bu da etiketi arama motoru optimizasyonunun önemli bir unsuru haline getirir. Dikkat çekebilmek için makale başlıklarının ortalama insanın anlayabileceği bir dilde yazılması ve yeterli bilgi içermesi gerekir. Etiketin değerde daha iyi performans göstermesi için < başlık > en az 7 kelime içermelidir. Bu kurala uyulursa arama motorlarından ek trafik alma fırsatına sahip olursunuz. Ve son olarak başlık, anlam bakımından mümkün olduğu kadar makalenin konusuna yakın olmalıdır.

Görünüm etiketleri nelerdir< h1>,< h2>…< h6>?

Bu tür etiketler, doğrudan etiketlerin içinde yer alan metin başlıklarıdır: Sitenin daha iyi performans göstermesi için etiket

- en fazla beş kez. Sayfaları biçimlendirmek ve yapılandırmak için etiketler

-

gerekli miktarda kullanılır, ancak yapmaya çalışın

Etiketler nedir< meta>?

SEO için iki meta etiketi çok önemlidir: açıklama ve anahtar kelimeler. Sayfada görüntülenmezler ancak arama motorları bunları dikkate alır. Başlangıçta, bir belgenin anlambiliminin arama motorları tarafından anlaşılmasını kolaylaştırmak için anahtar kelimeler oluşturuldu. Artık bu etiketin içerisine internet sayfasının özünü yansıtan kelimeler eklenmektedir.

Açıklama etiketine gelince, daha önce çok sayıda kelime ekleniyordu ve bu da sıralamayı etkiliyordu. Yandex arama motoru bu etiketin değerlerine göre snippet'ler oluşturur. Bugün çoğu kişi açıklamaya hiç gerek olmadığından emin, ancak optimize ediciler hala onu doldurmanızı tavsiye ediyor. Her durumda, hiçbir zararı olmaz.

Etiketler nedir< güçlü>,< b> ve< >?

Etiket işlevi - sayfadaki metni kalın harflerle vurgulayın. Etiketten biraz sonra ortaya çıktı ancak buna rağmen arama motorları tarafından da dikkate alınmaktadır. Anahtar kelimeleri belirlemek ve anlamlarını güçlendirmek için tanıtım uzmanları, vurgulama etiketlerinin kullanılmasını öneriyor , .

Etiketler , Aralarında yazılan kelimeleri italik yapın. Arama motorları için bunların pek önemi yoktur, ancak kullanımları İnternet sayfası üzerinde olumlu bir etkiye sahip olacaktır.

işlevi metnin bilgilendirici nitelikteki bölümlerinin altını çizmek olan bir etikettir. Arama üzerindeki etkisi önemsizdir; daha ziyade sayfa tasarımını daha anlamlı kılmak için kullanılır.

Etiketler nedir< img>?

İnternet sayfalarında bulunan resimler etiketi kullanılarak bu sayfalarda görüntülenir. . Çok sayıda özelliği vardır ancak arama motorları için en önemlileri alt ve başlıktır. Bunlardan ilki doğası gereği bilgi amaçlıdır ve görüntünün açılması mümkün değilse görüntülenir, ikincisi ise resmin adını içerir. Resmin üzerine geldiğinizde tarayıcıda açılır. Bu özelliklerin her ikisi de hem ziyaretçiler hem de arama motorları için (daha büyük ölçüde) oldukça önemlidir, ancak birçok web yöneticisi bunları haksız yere ihmal eder.

Etiketler en çok HTML sayfalarını düzenlerken kullanılır - onlar sayesinde metin paragraflara bölünür. Çeşitli etiketlerin doğru kullanımı yalnızca sitenizin arama motorlarında tanıtılmasına yardımcı olmakla kalmayacak, aynı zamanda ziyaretçiler için daha çekici hale getirecektir.

Anahtar kelimenin İnternet sayfasındaki ağırlığını etkiledikleri için en yaygın kullanılanlardır. Böylece tarayıcıda makalenin başlığı görüntülenir ve bu da başlığı arama motorunun gerekli bir parçası haline getirir. Çoğu zaman makale başlıkları ortalama bir insanın anlayabileceği bir dilde yazılır ve dikkat çekecek kadar bilgi içermelidir. Etiketin en iyi şekilde çalışması için başlık değerinin en az 7 kelime içermesi gerekir. Bu kurala uyulursa arama motorlarından ek trafik alma fırsatına sahip olursunuz. Ve son olarak başlık, anlam bakımından mümkün olduğu kadar makalenin konusuna yakın olmalıdır.

Görünüm etiketleri nelerdir

,

…

?

Bu tür etiketler, doğrudan site sayfasında bulunan ve diğer etiketlerin içinde yer alan metin başlıklarıdır. …

. Daha iyi site performansı etiketi için

Yalnızca 1 kez kullanılması tavsiye edilir ve

- en fazla 5 kez. Ancak sayfaları biçimlendirmek ve yapılandırmak için etiketleri kullanmalısınız

-

makul bir miktarda.

Etiketler nedir ?

SEO'da çalışmak için en sık iki meta etiketi kullanılır: açıklama ve anahtar kelimeler. Sayfada görüntülenmezler ancak arama motorları bunları dikkate alır. Başlangıçta anahtar kelimeler, arama motorlarının bir belgenin anlamını anlamasını kolaylaştırmak için oluşturuldu. Artık bu etiketin içerisine internet sayfasının özünü yansıtan kelimeler eklenmektedir.

Açıklama etiketine gelince, daha önce çok sayıda kelime ekleniyordu ve bu da sıralamayı etkiliyordu. Yandex arama motoru bu etiketin değerlerine göre snippet'ler oluşturur. Günümüzde çoğu kişi açıklamaya hiç ihtiyaç duyulmadığından emindir, ancak programcılar bunun kullanılmasını tavsiye etmektedir. Her durumda bundan hiçbir zarar gelmez.

Etiketler nedir , , Ve ?

Etiket - biçimlendirmedir, işlevi sayfadaki metni kalın yapmaktır. Bu etiket, b etiketinden biraz sonra ortaya çıkmıştır ancak buna rağmen arama motorları tarafından da dikkate alınmaktadır. Anahtar kelimeleri belirlemek ve güçlendirmek için tanıtım uzmanları öne çıkan etiketlerin kullanılmasını önerir.

- içine girilen kelimeyi italik olarak yazarak biçimlendirir. Arama motorları için pek önemi yoktur ancak kullanımının internet sayfası üzerinde olumlu etkisi olacaktır.

biçimlendirmede de kullanılan bir etikettir ancak işlevi metnin bilgilendirici bölümlerinin altını çizmektir. Bu etiketin arama üzerindeki etkisi önemli değildir; daha çok güzellik için kullanılır.

Etiketler nedir ?

Sayfalarda görüntülenen resimler bunu etiketi kullanarak yapar . Bu etiketin çok sayıda özelliği vardır ancak arama motorları için en önemlileri alt ve başlıktır. Alt - doğası gereği bilgilendiricidir ve başlık, resmin adını içerir;

Ancak HTML sayfalarını düzenlerken en sık kullanılan etiket

Bu, paragrafları ayırmanın popüler bir yoludur. Her durumda, etiketlerin herhangi bir şekilde kullanılması sitenizin arama motorları arasındaki popülerliğini yalnızca artıracaktır. Bunları kullandığınızdan ve ilerlediğinizden emin olun.

Merhaba, blog sitesinin sevgili okuyucuları. Bugün Html dilindeki etiketler, yani H1, H2, H3, H4, H5, H6 başlıkları, P paragrafları ve Br satır sonları ve ayrıca Hr yatay satır etiketi hakkında konuşmaya başlayacağız. Niteliklerin kullanımına bakacağız ve her bir öğe için olası tüm nitelikleri nerede bulabileceğinizi ve bunlara ilişkin değerlerin sözdizimine nasıl bakabileceğinizi görelim.

Satır içi ve blok etiketleri arasındaki temel fark, ilkinin boşluk bitene kadar birbirini takip edebilmesi ve ardından bir sonraki satıra kaydırılabilmesidir.

Öğeleri engelle, varsayılan olarak deneyin genişlikteki tüm kullanılabilir alanı kaplar ve bu nedenle bir sonraki blok elemanı mutlaka farklı bir satırda bulunacaktır.

Şimdi Html'deki tüm olası etiketler üzerinde sistematik bir çalışmaya başlayalım ve aynı zamanda doğru (geçerli) kullanım olanaklarını net bir şekilde anlamak için hangi türe ait olduklarına özellikle dikkat edeceğiz. Basitleştirilmiş bir etiket yapısı şuna benzer:

Ayrıca, bu öğeye belirli özellikler eklemenizi sağlayan nitelikler de vardır (her birinin kendi seti vardır), ancak bunun hakkında belirli örnekler kullanarak konuşacağız.

H1, H2, H3, H4, H5, H6 eşleştirilmiş etiketleri kullanılarak oluşturulan başlık kavramına bakmaya başlayalım (ad “Başlık” yani “başlık” kelimesinin ilk harfinden gelir). Farklı metin parçalarını birbirinden ayırmak ve seviyeye bağlı olarak önemlerini işaretlemek için tasarlanmıştır. HTML dilinin modern versiyonunda, tüm etiketler ve bunlara izin verilen tüm nitelikler önceden belirlenmiş ve açıklanmıştır.

Sonuç olarak, başlıklar yalnızca altı seviyeye ve buna ek olarak öğelere sahip olabilir. H1-H6 bloklu yani sayfanın genişliği boyunca mevcut tüm alanı kaplamaya çalışın. Ancak bunların bir özelliği var - örneğin aynı Div'in içine başka blok etiketleri eklemenize izin vermesine rağmen, başlık etiketleri içinde yalnızca satır içi öğeler bulunabilir.

O. tarayıcı, örneğin başka bir düzeydeki başlıkları bir düzeydeki başlıkların içine almanıza izin vermez, çünkü tekrar ediyorum, bunlar blok öğeleridir, ancak yalnızca küçük harfler içerebilirler. Oh nasıl.

Farklı boyutlardaki yazı tiplerine sahip tarayıcılarda H1-H6 farklı düzeylerdeki başlıklar çizilecektir (ancak CSS kullanarak bunları tarayıcıda görüntülenmek üzere kesinlikle istediğiniz boyut, renk ve yazı tipini ayarlayabilirsiniz, ancak saf Html'de bunlar kurallardır) :

Sitenin düzenini daha fazla tanıtımının kolaylığı açısından düşünürsek (), o zaman sadece olması gerektiğini belirtmekte fayda var. sayfa başına bir H1 düzeyinde başlık. Muhtemelen iki H1 kullanabilirsiniz, ancak bundan fazlası büyük olasılıkla arama motorlarının belgenizi ararken olumsuz tepki vermesine neden olacaktır. Eylemleriniz spam veya alaka düzeyini artırma olarak değerlendirilebilir.

Ayrıca başlık seviyelerinin atlanması da önerilmez; H1'den sonra, daha az önemli metin parçalarını vb. vurgulamak için H2'yi kullanmalısınız. Bunun arama motorlarından herhangi bir ciddi yaptırım gerektirmesi pek olası değildir, ancak yine de Html kodunda başlık seviyeleri oluştururken mantığı takip etmek daha iyidir.

Arama motorları, yalnızca metindeki kelimelerden çok, bu etiketlerin içerdiği kelimelere daha fazla önem verir. Buradan çıkan sonuç, makale yazarken kullandığınız başlıklara mutlaka başlık eklemeniz gerektiğidir.

Makale metninde başlıkların kullanılması onu daha görsel hale getirir ve okuyucuların bilgi kümesinde hızlı bir şekilde gezinmesine yardımcı olur. İlk defa yeterli bilgi olacağını ve artık ilerlemenin zamanının geldiğini düşünüyorum.

Html kodunda paragraf, satır sonu ve yatay çizgi HR

P etiketi “paragraf” kelimesinden türetilmiştir, ancak daha sıklıkla hala paragraf olarak adlandırılmaktadır. Genellikle birkaç cümle içeren belirli bir metin parçasını anlamsal olarak vurgulamak için kullanılırlar. P elemanlarının dikey olarak oluşturduğu paragraflar arasında boş alan belirir, bu da ayrı mantıksal metin parçaları birbirinden görsel olarak.

Mesele şu ki, bir kişinin tek parça bir metni, eğer ayrı küçük parçalara bölünmemişse okuması oldukça zordur. Mesela Html kodunda paragraflara ayrılmamış yazıları okumaya bile başlamıyorum çünkü çok sinir bozucu oluyor.

Metni kırarak çok Yorgunluk eşiğini azaltın kaynağınıza gelen ziyaretçileri iyileştirir ve kullanıcı faktörlerini (kullanıcının sitenizde geçirdiği süre ve) iyileştirir ve bu da tanıtım üzerinde olumlu bir etkiye sahiptir.

Aynı amaçlarla (kullanıcıların dikkatini çekmek ve bir makaleyi okurken yorgunluğu azaltmak) metne çeşitli ve bazen de belki eklenir.

Bu arada, P paragraf etiketi, muhtemelen zaten fark ettiğiniz gibi, bir çifttir, ancak HyperText Markup Language 4.01 spesifikasyonuna göre, bunun kapanış öğesi tamamen gerekli değil. Bu durumda tarayıcının nereye yerleştirilmesi gerektiğini bulması gerekecektir.

P bir blok elemanı olduğundan ve içinde yalnızca küçük harfli elemanlar görünebilir. Sonuç olarak, açılış paragrafı etiketini tespit eden tarayıcı, kodu daha da ayrıştırır ve bir sonraki blok elemanıyla karşılaştığında (büyük olasılıkla bir sonraki açılış P olacaktır), hemen önüne kapanış paragrafı etiketini ekler. Html 5 standardında bu tür özgürlükler büyük olasılıkla artık mevcut olmayacak ve hemen ihtiyaç duyulacak tüm etiketleri kapatmaya alışın ve bunları yalnızca küçük harflerle yazın.

Paragraf bir blok öğesidir, dolayısıyla paragrafların içindeki metin mevcut genişlik alanının tamamını kaplama eğiliminde olacaktır. Yani, belgenin Html koduna olması gerektiği gibi bir dörtlük yazdıysanız (her satır ayrı ayrı) ve bu dörtlüğün tamamını P paragraf etiketlerine eklediyseniz, tarayıcıda dört satırınızın hepsinin birleşeceğini göreceksiniz. bir ve metin için mevcut alanın tüm genişliğini kaplayacak.

Bunun neden olduğunu makalede ayrıntılı olarak tartıştık. Köprü metni biçimlendirme dilinin bu özelliği (tarayıcıda görüntülendiğinde kaynak kodundaki herhangi bir sayıdaki boşluk karakterinin tek bir boşlukla değiştirilmesi) sayesinde, kodunuzu, ekrandaki görünümünü bozma korkusu olmadan, herhangi bir uygun şekilde biçimlendirebilirsiniz. web sayfası.

Gerçekten genel kabul görmüş biçimde bir dörtlük yazmanız gerekiyorsa, bu amaçla ek HTML kullanabilirsiniz.

BR adı verilen satır sonu etiketleri

(“kırılma” sözcüğünden):

BR satır içi bir öğedir ve ayrıca "boştur", yani. tek (kapatma elemanı yoktur). BR'nin tüm işlevi, tarayıcıda metin görüntülerken satır sonuna neden olmasıdır (herhangi bir metin düzenleyicideki Enter tuşuna benzer şekilde).

BR (satır sonu) etiketlerinin kodda yazılması hiçbir şekilde düzenlenmemiştir. Metnin tamamını bir arada yazıp doğru yerlere boşluk yerine BR koyabilirsiniz veya kodun anlaşılır olması için metni hemen satırlara bölüp BR'yi satırların sonuna veya başına koyabilirsiniz. Bu işin özünü değiştirmez.

İK("yatay kural" kelimelerinin kısaltması, yani yatay çizgi), görüntülendiği tarayıcıya bağlı olarak (esasen) ekranın tüm genişliği ve kalınlığı boyunca yatay bir çizgi (şerit) çizen çok basit bir Html etiketidir. başlık etiketlerine benzer şekilde, daha kolay özümsenmesi için metni mantıksal parçalara ayırmanıza olanak tanıyan görsel bir işaretleyicidir).

“Boş” (tek), yani. bir çifti yoktur (kapanış etiketi). Ayrıca, İK bir blok elementtir yani varsayılan olarak kendisine sunulan sayfa genişliğinin tamamını kaplar.

Nitelik kavramı ve bunları Html etiketlerine yazma kuralları

Bu basit öğeyi kullanarak nitelik kavramına bakalım. Gerçek şu ki, etiketlere geçerli olan ve onlar için WC3 doğrulayıcıda açıklanan nitelikler ekleyebiliriz, böylece içeriğe ihtiyacımız olan özelliği verebiliriz.

Örneğin, karşılık gelen P etiketlerinin içine alınmış bir satırda birkaç paragrafınız (paragrafınız) varsa, bunlardan birinin görünümünü değiştirmek için bu paragrafın açılış P öğesine gerekli nitelikleri eklemeniz yeterlidir. Tekli (boş) etiketler durumunda gerekli özelliğin nereye ekleneceğine ilişkin seçenek yoktur.

Yani ilk kural nitelikler yalnızca açılış etiketine yerleştirilir(kapanışta hiçbir şey yoktur). Bir öğe, birbirinden ve etiket adı arasında bir boşlukla ayrılan (zorunlu koşul) birçok nitelik içerebilir. Hemen HR yatay çizgisi için kullanımlarına bir örnek vereyim:

O halde önce nitelik söz dizimini gözden geçirelim. Açılış etiketine eklenirler, bir boşlukla ayrılmış olarak yazılırlar (öğenin adından sonra bir boşluk dahil) ve adı, eşittir işaretini içeren ve tırnak işaretleri içinde yazılan bir yapıdırlar (genellikle eşleştirilmiş çiftler koymak gelenekseldir) , ancak standart aynı zamanda eşleştirilmiş tekli tırnak değerlerine de izin verir. Html etiket kodundaki özelliklerin sırası önemli değildir.

Orada bir bağlantı verdim tüm geçerli HTML etiketlerinin listesi. Bu listede ilgilendiğiniz unsurun ismine tıklarsanız (bizim durumumuzda bu İK'dır), onun için ayrıntılı spesifikasyonların yer aldığı bir sayfaya yönlendirileceksiniz:

Herhangi bir etiketin tüm özellikleri şunlar olabilir: üç gruba bölün:

  1. Genel - HTML dilindeki öğelerin büyük çoğunluğunda görünebilirler. Hemen üstteki resimde alttalar ve kırmızı bir çerçeveyle çevrelenmişler. Aslında, birkaç ortak özellik vardır (yalnızca altı) ve o zaman bile, bunların hepsini uygulamanızda kullanmanız pek mümkün değildir. Büyük olasılıkla yalnızca dört - başlık ve stil vardır.
  2. Etkinlik nitelikleri - bir kullanıcı işlemine veya sistem olayına yanıt olarak bazı eylemleri tetiklemek için gereklidirler. Bunlar daha çok JavaScreet ile ilgilidir ve yukarıdaki şekilde en alttadırlar (koyu bir çerçeve içinde daire içine alınmıştır).
  3. Benzersiz - Her etiketin genellikle kendi öznitelikleri kümesi vardır ve bunlardan bazıları diğer öğelerde hiç bulunamayabilir. HR yatay çizgisini ele alırsak, yalnızca dört benzersiz özelliği vardır (hizalama, gölgeleme, boyut ve genişlik). HR etiketinde belirtilen tüm diğerleri (yukarıda açıklanan iki grup hariç) tarayıcı tarafından dikkate alınmayacaktır.

HR yatay çizgi etiketindeki nitelik örnekleri

Çeşitli niteliklerin değerleri, rastgele sayılar (vb.) veya önceden belirlenmiş bir kümeden gelen değerler olabilir; örneğin, HR - sol|orta|sağ için hizalama durumunda olduğu gibi (üç hizalamadan birini kullanabilirsiniz) seçenekler).

Genel olarak, WC3 doğrulayıcısında bunlar hakkında bilgi yalnızca Html etiketleri listesinden değil, aynı zamanda özellik listesi, verilen bağlantıda bulacaksınız.

Bu liste, HTML dilinde mevcut olan tüm etiketler için olası tüm seçenekleri içerir. İlgilendiğiniz seçeneğin karşısındaki “İlgili Öğeler” sütunu bu özelliğin kullanılabileceği öğeleri listeleyecektir. "Tür" sütunu, değeri olarak kullanılabilecek veri türünü gösterir.

Örneğin, HR etiketi için şekilde align özelliğinin altı çizili satırında, burada listelenen (sol | orta | sağ) yalnızca üç sabit değerin kullanılmasına izin verilir.

Çok önemli bir diğer sütun ise “Depr”. Bu sütunda ilgilendiğiniz özelliğin yanında D harfi varsa kullanılması tavsiye edilmez, ancak değiştirmek için uygun CSS stillerini kullanmalısınız. Etiket spesifikasyonunu görüntülerken, İK için dört özelliğin de adlarının yanında "Kullanımdan kaldırıldı" kelimesinin yazıldığını gördük (kullanılması önerilmez).

Bu makalede daha önce ele aldığımız öğelerle (P, H1-H6 ve HR başlıkları) hangi niteliklerin kullanıldığına bakalım. Hepsi için "hizala"yı kullanabilirsiniz, Çünkü bu elemanların tümü blok elemanlardır. Satır içi öğeler için "hizalama" özelliğinin hiçbir anlamı yoktur.

Örneğin, bir başlık etiketine (H1 gibi) "hizalama" eklerseniz başlık metninin hizalamasını ayarlayabilirsiniz. Onlar. Blok öğesi genişlik olarak kendisine sunulan tüm alanı kaplayacaktır, ancak bu başlığın içeriği (metni) sola (varsayılan), sağa veya ortaya veya genişlikte (iki yana yaslama - kelimeler arasındaki mesafe değişir) hizalanabilir, gazete sütunlarında olduğu gibi).

Bu arada, verilen ekran görüntüsüne dikkatlice bakarsanız, P paragrafının Html etiketi ve Div kabı için de aynı şey geçerli olacaktır.

Yatay bir HR çizgisi için "hizalama" özelliği, o öğe tarafından oluşturulan yatay çizginin hizalamasını gösterecektir. Ancak HR etiketi bir blok öğesidir ve genişlik olarak mevcut tüm alanı kaplama eğilimindedir. Bu nedenle, "hizalama" sözcüğünü kullanmak ancak onunla birlikte şunları da yapmanız durumunda mantıklıdır: "genişlik" özelliğinin değerini ayarlayın(genişlik) sayfanın genişliğinden daha az.

"Genişlik" değeri basit bir sayı olabilir (bu, genişliği piksel cinsinden ayarlayacaktır) veya yatay HR çizgisi için mevcut toplam genişliğin bir yüzdesini kullanabilirsiniz. Aynı etiket için “size” özelliğinin değeri, yatay çizginin yüksekliğini piksel cinsinden belirten sayılarla belirtilir. Buna bir örnekle bakalım:

Html 4.01 standardındaki HR etiketinde bir tane daha var tek adı verilen bir özellik, Çünkü herhangi bir değer alamaz (sadece bir miktar eylem anlamına gelir) - yatay bir çizginin gölge oluşturmasını önleyen bir "gölgesizliktir":

Html'deki tüm olası etiketler için olası tüm nitelikleri göz önünde bulunduramayacağım açık ve bu gerekli değil çünkü her şey benzetme yoluyla yapılabilir - asıl önemli olan sözdizimini ve fikrin kendisini anlamaktır. Ayrıca birçoğunun kullanılması artık tavsiye edilmiyor çünkü... Şimdi işlevleri CSS stilleri tarafından gerçekleştirilir bunu da çok yakında detaylı olarak konuşmaya başlayacağız.

Sana iyi şanslar! Yakında blog sitesinin sayfalarında görüşmek üzere

İlgini çekebilir

Html'deki tablolar - Table, Tr ve Td etiketlerinin yanı sıra bunları oluşturmak için Colspan, Cellpadding, Cellspacing ve Rowspan
Iframe ve Frame - bunlar nelerdir ve Html'de çerçeveler en iyi şekilde nasıl kullanılır?
Html kodundaki yorum direktifleri ve Doctype'ın yanı sıra blok ve satır içi öğeler (etiketler) kavramı
Göm ve nesne - Web sayfalarında medya içeriğini (video, flash, ses) görüntülemek için HTML etiketleri
HTML'ye bağlantı ve resim (fotoğraf) nasıl eklenir - IMG ve A etiketleri
Site için HTML formları - web formu öğeleri oluşturmak için Form, Giriş ve Seçim, Seçenek, Textarea, Label ve diğerlerini etiketler
Yazı Tipi (Yüz, Boyut ve Renk), Blockquote ve Ön etiketler - saf HTML'deki eski metin biçimlendirmesi (CSS kullanılmaz)
Boşluk karakterleri ve bunların Html'deki kod formatlarının yanı sıra özel bölünmeyen boşluk karakterleri ve diğer anımsatıcılar
Köprü nasıl oluşturulur (A, Href, Hedef boş), sitede yeni bir pencerede nasıl açılır ve ayrıca Html kodunda bir resim bir bağlantı haline getirilir

Selamlar Arkadaşlar! Bugün bunun hakkında konuşacağız paragraf etiketi ve hizalama özelliği. Genel olarak bir sayfadaki tüm içerik paragraflara bölünmelidir. Paragraf içeriği etiketlerin arasına yazılır

Metin…

. Ardışık 2 paragrafı görüntülediğimizde aralarında görünmez bir alan oluşuyor ve bu da onları birbirlerinden uzaklaştırıyor. Etiket bir blok etiketi olduğundan sayfanın tüm genişliğini kaplar.

Örneğin aşağıdaki koda sahip bir sayfa alalım:

Paragraflı sayfa.

İlk paragraf: Lorem Ipsum, basım ve dizgi endüstrisinin sahte metnidir. Lorem Ipsum, bilinmeyen bir matbaacının bir yazı dizisini alıp bir yazı örneği kitabı oluşturmak için karıştırdığı 1500'lerden bu yana endüstri standardı kukla metin olmuştur.

İkinci paragraf: Bir okuyucunun sayfa düzenine bakarken sayfanın okunabilir içeriğinin dikkatini dağıtacağı uzun süredir bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, "İçerik burada, içerik burada" ifadesinin aksine, aşağı yukarı normal bir harf dağılımına sahip olması ve okunabilir İngilizce gibi görünmesini sağlamasıdır.

Bunun tarayıcıda nasıl göründüğüne bakalım:


Elbette sayfa kodunda bir etiket olduğunu fark etmişsinizdir güçlü, bu etiket metni kalın yapar.

Etiket özellikleri

Her etiket için nitelikleri belirtebilirsiniz ve hatta bazı durumlarda belirtmeniz gerekir. Bu özellik aracılığıyla, tarayıcıya şu veya bu öğenin sayfada tam olarak nasıl görüntüleneceğini söyleriz.

Öznitelik, açılış etiketi ayracının içinde belirtilir ve aşağıdaki sözdizimine sahiptir: feature_name = "değer"

Hizalama özelliği

Örneğin, bir sayfada bir paragrafımız var ve içeriğini hizalamak istiyoruz. Bunu yapmak için açılış etiketinin içine niteliği yazıyoruz. hizala, paragraf içindeki içeriğin hizalanmasından ve tek bir değere ayarlanmasından sorumludur.

Paragrafın içeriği.

Bu özelliğin 4 değeri vardır:

1 kaldı– İçeriği sola hizalar. Bu değer varsayılandır. Yani paragrafın niteliğini belirtmezsek hizalamak, paragrafın içindeki içerik varsayılan olarak sola hizalanır. Bu önceki örnekte görülebilir.

2.Sağ– İçeriği sağa hizalar.

Metin…

Tarayıcıda şöyle görünüyor:


3.Merkez- İçeriği sayfanın ortasına hizalar.

Metin…


4. Gerekçelendir– İçeriği sayfanın genişliğine göre hizalar.

Metin…


Ders özeti:
Bugün ne olduğunu öğrendik paragraf html'de. Paragraflar HTML'de çok sık kullanılır. Ayrıca tag özelliğinin ne olduğunu da öğrendik. Ve hizalama özelliğini öğrendim hizalayın. Aşağıdaki değerlerden birini alabilir: sol (varsayılan değer),Sağ,merkezsavunmak.



Okumanızı öneririz