HTML öğeleri: tekli ve çiftli etiketler (açılış ve kapanış etiketi). HTML'deki etiketler

15.07.2021

Ayrıca oku

Üçüncü taraf kaynaklardan Xiaomi Temalarına tema indirme ve yükleme

Görme Engelliler için Windows Erişilebilirliği Yüksek Kontrastlı Temalar Atayın

Tüm dilin etiketlerden oluştuğunu zaten okudunuz. Bu eğitimde, HTML etiketlerine daha yakından bakacağız. HTML dilinde etiketler, tekli (eşlenmemiş) ve eşli etiketler olarak ikiye ayrılır. Yani, tek HTML etiketleri tek bir etiketten oluşur, yani bir kapanış etiketine sahip değildirler. Ve eşleştirilmiş tanımlayıcıların bir açılış ve kapanış etiketi vardır.

Tek HTML etiketleri

Tek etiketlerin kapanış etiketi yoktur. Örneğin:
, . Eskiden şöyle yazılırdı:
, , artık bu tek etiket yazma tarzı alakalı değil, bu yüzden bu şekilde yazmayın. En çok kullanılan tek etiketler:
- transfer Yeni hat, - Sınır çizgisi, - Resim ekle.

Eşleştirilmiş HTML etiketleri

Daha birçok etiket çifti var. Çift tanımlayıcının bir açılış ve kapanış etiketi vardır. Pair etiketi bir kapsayıcı oluşturur. Kapsayıcının içeriği, açılış ve kapanış etiketi arasındaki şeydir. Bu makaledeki örnekte, HTML'de etiketler nelerdir? etiketini gördünüz. , yani bu bir çift etikettir, bu etiketin içeriği "HTML'deki etiketler nelerdir?" metnidir. Bir etiketle başlar ve ile biter.

Yeni başlayanların eşli etiketler yazarken yaptığı ana hata, iç içe yerleştirmede kafa karışıklığıdır. Örneğin, bu doğru giriştir:

Kalın paragraf

. Ve işte hata:

Kalın paragraf

, böyle bir düzene sahip bir HTML belgesi geçerli sayılmaz. Yuvalamayı karıştırmamak için şunu yapın: eşleştirilmiş etiketler oluşturun, ardından diğerlerini içlerine koyun ve sonunda her iki etiketin içine de metin yazın.

Çift etiketleri doğru şekilde nasıl yazılır

Etiketler açısından HTML5'teki yenilikler nelerdir?

HTML5, HTML4'ün bir uzantısıdır, dolayısıyla HTML4'teki etiketlerin çoğunu veya tamamını korudu ve kendi etiketini ekledi. HTML5, siteyi ana bloklara ayırmak için özel etiketler getirdi: üstbilgi, menü, altbilgi, kenar çubuğu ve içerik.

Etiketleri kullanmayı öğrenmek neden önemlidir?

Arama motorları Yandex ve Google düzene duyarlıdır HTML belgeleri bunların geçerliliğini kontrol etmek. Özel tanımlayıcılar vb. içine alınmış anahtar kelimeleri ararlar. Ama bu bölüm bununla ilgili değil. Bu promosyon (SEO) için geçerlidir.

Tüm HTML etiketleri nasıl öğrenilir?

Evet, bir sürü etiket var. Ancak onlara özel olarak öğretmeye gerek yoktur. Bir şeyler yazmaya çalışırken, eşleştirilmiş ve tek tüm tanımlayıcıları hatırlamak kolay olacaktır. Zamanla tabii.

HTML etiketleri, HTML dilinin temelidir. Etiketler, işaretlemedeki öğelerin başlangıcını ve bitişini sınırlamak için kullanılır.

Her HTML belgesi, bir HTML öğeleri ve metin ağacından oluşur. Her HTML öğesi, bir başlangıç (açılış) ve bir bitiş (kapanış) etiketiyle tanımlanır. Başlangıç ve bitiş etiketleri, etiket adını içerir.

Tüm HTML öğeleri beş türe ayrılır:

boş elemanlar - , ,
, , , , , , , , , , , , ;
biçimlendirilmemiş metin içeren öğeler — , ;
biçimlendirilmemiş metni görüntüleyen öğeler - , ;
başka bir ad alanından öğeler - MathML ve SVG;
düzenli öğeler diğer tüm öğelerdir.

tablo gösterir tam liste HTML4 ve HTML5 tarafından desteklenen öğeler. Deneysel ve kullanımdan kaldırılmış etiketler hariç tutulur. HTML5 spesifikasyonuna eklenen öğeler deniz mavisi ile vurgulanmıştır.

HTML öğelerinin tam listesi Tablo 1. HTML öğeleri Etiket Açıklama

Yorum eklemek için kullanılır.

Belge türünü bildirir ve tarayıcıya dili ve sürümü gibi temel bilgileri sağlar.

Köprü metni bağlantıları oluşturur.

Metni bir kısaltma veya akronim olarak belirtir. Açıklayıcı metin, başlık özniteliği kullanılarak ayarlanır.

Belge veya makalenin yazarının/sahibinin iletişim bilgilerini belirtir. Tarayıcıda italik olarak görüntülenir.

Görüntü haritasındaki belirli bir alana veya görüntü haritasındaki etkin bir alana karşılık gelen metin içeren bir köprüyü temsil eder. Her zaman etiketin içinde iç içe.

Dergi makalesi, blog gönderisi, yorum gibi bir belgenin veya sitenin bağımsız bir bölümünü oluşturan içerik bölümü.

Sayfanın/sitenin ana içeriğiyle dolaylı olarak ilgili olan sayfa içeriğini temsil eder.

Ses içeriğini bir web sayfasına yükler.

Seçime vurgu veya önem vermeden bir metin pasajının kalın stilini belirtir.

Tüm göreli adreslerin hesaplandığı temel adresi (URL) belirtir. Bu, tüm bağlantılar eskisi gibi çalışacağından, sayfayı başka bir konuma taşırken sorunların önlenmesine yardımcı olacaktır.

Metni sağdan sola okuyan bir dilde yazılmış bir metin pasajını metnin geri kalanından ayırır.

Metni, geçerli metin yönünü geçersiz kılarak, dir özniteliği tarafından belirtilen yönde görüntüler.

Büyük alıntıları tanımlamak için kullanılan bir alıntı olarak metni vurgular.

Bir belgenin gövdesini temsil eder (belgenin meta verilerinin parçası olmayan içerik).

Metni yeni bir satıra kaydırma.

Etkileşimli bir düğme oluşturur. Etiketin içine içerik - metin veya resim koyabilirsiniz.

Basit resimler, çizelgeler, grafikler vb. gibi görüntüleri dinamik olarak görüntülemek için kanvas kapsayıcı. Çizim için JavaScript kullanılır.

Tabloya başlık ekler. Etiketin hemen sonrasına eklenir .

Bir alıntının kaynağını belirtmek için kullanılır. İtalik olarak gösterilir.

Tek aralıklı yazı tipi ailesinde görüntülenen bir kod parçasını temsil eder.

Biçimlendirme için aynı tür bilgileri içermeyen bir tablonun bir veya daha fazla sütununu seçer.

Bir dizi mantıksal olarak homojen hücreyi vurgulayan yapısal bir sütun grubu oluşturur.

Öğe, makine tarafından okunabilir biçimde olan ve bir bilgisayar tarafından işlenebilen değer özniteliğinin değerini etiketin içeriğiyle ilişkilendirmek için kullanılır.

Öğenin açılır listesi için kapsayıcı öğe. Değer seçenekleri .

Bir etiketten bir terim tanımlamak için kullanılır.

Metnin üzerini çizerek silinmiş olarak işaretler.

Kullanıcının açıp kapatabileceği etkileşimli bir pencere öğesi oluşturur. İçerik için bir kapsayıcıyı temsil eder, widget'ın görünür başlığı etikete yerleştirilir.

Bir kelimeyi italik yaparak terim olarak tanımlar. Takip eden metin, bu terimin bir transkriptini içermelidir.

Kullanıcının bir görevi tamamlamak için iletişim kutusu, denetçi veya pencere gibi etkileşimde bulunduğu etkileşimli bir öğe. open niteliği olmadan kullanıcı tarafından görülemez.

Bir HTML belgesinin bölümleri için kapsayıcı etiketi. Stil biçimlendirme amacıyla blok öğelerini gruplandırmak için kullanılır.

Terimi ve açıklamasını içeren kapsayıcı etiketi.

Bir terim belirtmek için kullanılır.

Metnin önemli bölümlerini italik olarak görüntüleyerek vurgular.

Harici etkileşimli içeriği veya bir eklentiyi gömmek için bir kapsayıcı etiketi.

Çevrelerine bir kutu çizerek formdaki ilgili öğeleri gruplandırır.

Öğe için başlık/etiket.

Çizimler, diyagramlar, fotoğraflar, kod örnekleri gibi içerikler için genellikle bir açıklama yazısı içeren bağımsız bir kap etiketi.

Bir belgenin veya bölümün bitiş alanını (alt bilgi) tanımlar.

Kullanıcılardan sunucuya bilgi toplamak ve göndermek için form. action niteliği olmadan çalışmaz.

İlişkili bölümleri için altı düzeyde başlık oluşturun.

, , , gibi HTML belgesi meta verileri için kapsayıcı öğe.

Bir sitenin veya bir grup gezinme bağlantısının tanıtıcı bilgileri için bölüm. Bir veya daha fazla başlık, logo, yazar hakkında bilgi içerebilir.

Paragrafların tematik ayrımı için yatay çizgi.

Bir HTML belgesinin kök öğesi. Tarayıcıya bunun bir HTML belgesi olduğunu söyler. Diğer tüm html öğelerinin kapsayıcısıdır.

Ek vurgu yapmadan metnin bir bölümünü italik hale getirir.

Geçerli HTML belgesine başka bir belge yükleyerek bir satır içi çerçeve oluşturur.

Değeri gömülecek görüntünün adresi olan src özniteliğini kullanarak görüntüleri bir HTML belgesine gömer.

Kullanıcının veri girebileceği zengin form alanları oluşturur.

Metni alt çizgi ile vurgular. Bir belgedeki değişiklikleri vurgulamak için kullanılır.

Kullanıcı tarafından klavyeden girilecek metni tek aralıklı bir yazı tipi ailesinde vurgular.

Sayfa hakkında ek bilgi depolamak için kullanılır. Bu bilgiler, tarayıcılar tarafından sayfayı işlemek için ve arama motorları tarafından dizine eklemek için kullanılır. Bir blokta birkaç etiket olabilir çünkü kullanılan niteliklere bağlı olarak farklı bilgiler taşırlar.

Belirtilen aralıkta ölçüm göstergesi.

Bir site genelinde gezinme bağlantıları içeren bir belgenin bölümü.

Komut dosyası oluşturmayı (komut dosyası) desteklemeyen bir bölümü belirtir.

Ortamı (ses, video, Java uygulamaları, ActiveX, PDF ve Flash gibi) gömmek için bir kapsayıcı. Geçerli HTML belgesine başka bir web sayfası da ekleyebilirsiniz. etiketi, parametreleri gömülü bir eklentiye iletmek için kullanılır.

Sıralı numaralandırılmış bir liste. Numaralandırma sayısal veya alfabetik olabilir.

Açılır listede seçilecek varyantı/seçeneği belirtir , veya .

Bir komut dosyası kullanılarak hesaplanan bir hesaplamanın sonucunu görüntülemek için bir alan.

Metindeki paragraflar.

Öğe kullanılarak gömülü eklentiler için seçenekleri belirtir.

Bir öğe içeren kapsayıcı öğe ve sıfır veya daha fazla eleman. Kendi başına hiçbir şey göstermez. Tarayıcının en uygun görüntüyü seçmesine izin verir.

Metni biçimlendirmeden, boşlukları ve metin tirelerini koruyarak görüntüler. Bilgisayar kodunu, e-posta mesajlarını vb. görüntülemek için kullanılabilir.

Herhangi bir görev için bir ilerleme göstergesi.

Kısa bir alıntı belirtir.

Doğu Asya karakterleri ve bunların kod çözme için kapsayıcı.

Ek açıklamanın temel bileşeni olarak içine yerleştirilmiş metni belirtir.

Küçültülmüş yazı tipinde görüntülenen, öğenin içine alınmış karakterlerin üstüne veya altına kısa bir açıklama ekler.

Yuvalanmış metni isteğe bağlı ek açıklama olarak işaretler.

Tarayıcı öğeyi desteklemiyorsa alternatif metni görüntüler.

Alakalı olmayan metni üstü çizili olarak görüntüler.

Sistem mesajlarının yanı sıra bir program kodunun veya komut dosyasının yürütülmesinin sonucunu temsil eden metni görüntülemek için kullanılır. Tek aralıklı yazı tipinde görüntülenir.

Bir istemci tarafı komut dosyası (genellikle JavaScript) tanımlamak için kullanılır. Ya betik metnini içerir ya da src özniteliğini kullanarak harici bir betik dosyasına işaret eder.

Bir sayfanın mantıksal alanını (bölümünü), genellikle bir başlıkla tanımlar.

Önerilen kümeden değerleri seçmenize izin veren bir kontrol. Değer seçenekleri .

Metni daha küçük bir yazı tipi boyutunda görüntüler.

, , öğeleri için alternatif ortam kaynaklarının konumunu ve türünü belirtir.

Satır içi öğeler için kapsayıcı. Tek tek sözcükleri renkle vurgulamak gibi metin pasajlarını biçimlendirmek için kullanılabilir.

Metne kalın vurgulayarak vurgular yerleştirir.

Satır içi stil sayfalarını içerir.

Kimyasal formüllerdeki bir elementin dizini gibi alt simge karakterlerini belirtir.

Etiket için görünür bir başlık oluşturur. Başlığın ayrıntılarını görüntüleyebileceğiniz içi doldurulmuş bir üçgenle görüntülenir.

Üst simge karakterleri belirtir.

Tablo oluşturmak için etiket.
	Tablonun gövdesini tanımlar.
		Bir tablo hücresi oluşturur.
	Bir komut dosyası tarafından kopyalanabilen ve bir belgeye eklenebilen HTML kodu parçalarını bildirmek için kullanılır. Bir etiketin içeriği, alt öğesi değildir.
	Büyük metin giriş alanları oluşturur.
	Tablo alt bilgisini belirtir.
	Bir tablo hücresi başlığı oluşturur.
	Tablonun başlığını belirtir.
	Tarih/saati belirtir.
	Tarayıcının başlık çubuğunun üst kısmında görüntülenen HTML belgesinin başlığı. Arama sonuçlarında da görünebilir, bu nedenle bir başlık verilirken bu dikkate alınmalıdır.

Bir tablo satırı oluşturur.
	Öğeler için altyazı ekler ve .
	Ek vurgu yapmadan, altı çizili bir metin pasajını vurgular.
	Madde işaretli bir liste oluşturur.
	Programlardaki değişkenleri italik olarak görüntüleyerek vurgular.
	Sayfaya video dosyaları ekler. 3 video formatını destekler: MP4, WebM, Ogg.
	Uzun bir satırın nerede kesildiğini tarayıcıya gösterir.

Etiketli hile sayfası

Referans kolaylığı için etiketleri konuya göre gruplandırdım, her etiket için görüntüleme özelliği değerleri ekledim. Tabloya gitmek için resme tıklayın.

Etiket ( pl. etiketler, bazen etiket), bir web sayfasının kaynak metnini işaretlemek için kullanılan HTML dilinin bir öğesidir. Etiketler, köşeli parantez içine alınmış İngilizce kelimelerin kısaltmaları veya kısaltmalarıdır, örneğin, tag

…

İngilizce kelimenin kısaltması paragraf, yani bu etiketin içindeki metin tarayıcılar tarafından bir paragraf olarak tanınacaktır.

HTML'deki her etiketin özel bir anlamı vardır ve belirli verilerin görüntülenmesinden sorumludur. Etiket adlarındaki harflerin durumu önemli değildir, örneğin, etiket

…

ve etiket

…

- Bu aynı. Yani, etiketler hem küçük hem de büyük harflerle yazılabilir. Önceden, etiketlerin normal metinden farklı olması için tüm etiketlerin büyük harflerle yazılması genel olarak kabul ediliyordu. Pek çok editörün sözdizimi vurgulaması olduğundan artık bu gerekli değildir.

Etiket sınıflandırması

HTML'de 90'dan fazla etiket vardır.Kural olarak, bir etiket belgenin yalnızca bir bölümünü etkiler, örneğin, birinci düzey başlık etiketi .... Bu gibi durumlarda, eşleştirilmiş etiketler kullanılır: açılış Ve kapanış. Bir açılış etiketi (örneğin, ) bir efekt oluşturur ve bir bitiş etiketi ( ) onu sonlandırır. Örnekten de görebileceğiniz gibi, kapanış etiketinde her zaman bu sembol (/ ) bulunur - eğik çizgi. Bu etiketler denir eşleştirilmiş.

Bazı etiketlerin göründükleri yerde tek seferlik bir etkisi vardır. Örneğin, yatay çubuk etiketi veya resim görüntüleme etiketi . Bu tür etiketlerin bitiş etiketleri yoktur. Bu tür etiketlere eşlenmemiş denir.

etiket türleri

Ek olarak, etiketler işlevlerinde farklılık gösteren birkaç türe ayrılır:

belge başlık etiketleri;
blok elemanları;
satır içi öğeler;
evrensel öğeler;
listeler;
tablolar;
çerçeveler.

Bu ayrım katı değildir, bu nedenle bazı etiketler farklı gruplardadır. Örneğin, listeler oluşturmak için etiketler ve

Etiketler bir tarayıcıya yüklendiğinde görüntülenmezler ancak içeriklerinin nasıl görüntüleneceğini etkilerler. Bir etiket yanlış yazılmışsa, bütünüyle yoksayılır.

Tüm etiketlerin yazarken uyulması gereken belirli bir yapısı vardır. Ek olarak, hemen hemen tüm etiketler, içeriğin görüntülenme şeklini değiştirebilen çeşitli niteliklere sahiptir.

Özellikleri içeren etiketlerin doğru yapısına bakalım:

Kendisi Web Yöneticisi

Örneğin, tamamen farklı iki etiket verdim. Birinci tek - görüntülerin görüntülenmesinden sorumludur, nitelik - src="logo.jpg" . Saniye …çift, bağlantı oluşturmaktan sorumludur, öznitelik ise href = "site" dir.

Sonuç 1: Nitelikler eşleştirilmiş ve eşlenmemiş etiketlere sahip olabilir.

Sonuç 2 : Yalnızca açılış etiketlerinin nitelikleri olabilir, kapanış etiketlerinin nitelikleri yoktur.

Açıklama için resim:

Şekil 1. Html etiketinin yapısı

Eğitimde incelediğimiz basit bir web sayfası örneğine bakalım.

Bir HTML öğesi, HTML ile yazılmış bir web sayfasının temel yapısal birimidir.

HTML Sözdizimi eşleştirilmiş etiketlerden oluşan öğeler:

Öğe bir başlangıç etiketiyle başlar.
Eleman bir kapanış etiketi ile biter.
Bir öğenin içeriği, açılış ve kapanış etiketleri arasındaki her şeydir. İçerik, metin ve/veya başka bir HTML öğesi olabilir.

Not: Kapanış etiketine "/" karakterini koymayı unutmayın, elementinizin bittiğini ve bundan sonra yazılacak olanın zaten başka bir element olduğunu tarayıcıya bildirir. Kapanış etiketine "/" sembolünü koymazsanız, tarayıcı bunu, tarayıcıya göre hala kapatılmamış olan bir öncekinin içine yerleştirilmiş yeni bir öğe olarak alacaktır.

Tek etiketlerden oluşan HTML öğelerinin sözdizimi şöyledir:

Öğe yalnızca açılış etiketinden oluşur.

Tek etiketlerden oluşan öğeler boş olarak adlandırılır. HTML'de 16 tek etiket vardır:

Eşleştirilmiş etiketlerden oluşan HTML öğeleri, diğer öğeleri içerebilir veya diğer öğelerin içine yerleştirilebilirken, öğelerin iç içe geçme derinliği sınırlı değildir.

Aşağıdaki örnek, ikisi iç içe geçmiş üç öğeye sahiptir:

ilk paragrafım

Bir öğe diğerinin içinde iç içe geçtiğinde, yuvalanmış öğenin aynı öğe içinde başlayıp bitmesine dikkat edilmelidir. Bu nedenle, örneğin aşağıdaki kod yanlıştır:

Bu çok

Burada eleman elemanın dışına çıkar

Doğru yerleştirme örneği:

Çok ilginç

Burada öğe düzgün bir şekilde iç içe geçmiştir - tamamen öğenin içindedir

Tarayıcı, HTML kodundaki boşluk karakterlerini yok sayar, böylece kodunuzu okunabilir hale getirerek bunları kendi avantajınıza kullanabilirsiniz. Boşluk karakterleri şunları içerir: sekme karakterleri, satır sonları ve düzenli boşluklar, herhangi bir miktarda kullanılabilirler. Boşluk karakterleri kullanan örnek kod:

Başlık İlk başlığım

ilk paragrafım

Örnek kod kullanılmadan yazılabilirdi. boşluk karakterleri, ancak bunun gibi kodlar daha az okunabilir olacaktır:

Başlıkİlk başlığım

ilk paragrafım

Bir HTML belgesindeki kod zamanla büyüdükçe ve daha karmaşık hale geldikçe, boşluk kullanmanın aslında kodun okunabilirliğini iyileştirdiği açık hale gelir.

HTML düz Metin dosyası.htm (html) uzantılı. İlk başta en basit sayfayı oluşturmak için, sadece pratik yaparken, sadece bir not defterine ihtiyacınız var. Not defterini açın ve metni yazın.

Her HTML öğesi köşeli parantezlerle çevrili bir etikettir. Herhangi bir dosya, html sayfası bir etiketle başlar ve bir etiketle biter.

Bu etiket, yalnızca tarayıcıya (web'de gezindiğiniz programdır) şunu söyler: bu belge bir html biçimlendirme belgesidir.

etiketi, html belgesinin başlangıcı anlamına gelir ve kapanış etiketi, html belgesinin sonu anlamına gelir.

Bu etiketlerin içinde, birkaç başka önemli etiket vardır. Etiketin hemen ardından sayfanın başlığı ve sayfanın gövdesi anlamına gelen etiketler bulunur.

İlk HTML sayfam

etiketi, bu sayfa görüntülendiğinde pencere başlığının başlığı anlamına gelir.
Şimdi yeni bir tane oluşturabilirsiniz. Metin belgesi not defterinde yukarıdaki metni kopyalayıp Page1.html olarak kaydedin ve tarayıcıda çalıştırın, tarayıcı pencere başlığında sayfanın başlığını ve boş bir sayfa göreceksiniz çünkü etiketlerde sayfanın gövdesinde hiçbir şey göstermiyoruz.

Bu nedenle, yukarıdaki metin bizim için herhangi bir web sayfasının temel çerçevesi olacaktır.

, , Bunlar yalnızca eşleştirilmiş etiketlerdir - bir etiket çifti olarak giden etiketler ve / simgesiyle kapanış, kapanış etiketi. Eşleştirilmiş etiketler için, etiketin başlangıcı ile bitişi arasında bulunan değer, etiketin eylemidir. Eylem, / karakterli bir etiket bulunana kadar yayılacaktır.

Eşlenmemiş etiketler - kapanış etiketi yoktur. Aşağıda bu tür etiketlere örnekler vereceğiz.

- başlık html sayfaları, içerir anahtar kelimeler arama motorları, çeşitli komut dosyaları vb.

- Doğrudan html belgesinin gövdesi.

Eşlenmemiş etiket.

Not: Çoğu durumda, artık site oluştururken hazır rutinler, eklentiler vb. - daha fazlası için hızlı oluşturma siteler, ancak bu tür rutinleri ve şablonları uygulamak ve kullanmak için bu oturumlar hakkında minimum düzeyde bilgi sahibi olunması gerekir.