<img> etiketi nasıl düzgün kapatılır?

123

<img src='stackoverflow.png'>
<img src='stackoverflow.png'></img>
<img src='stackoverflow.png' />

Hangisi / hangileri doğrudur?

html

— insertusernamehere
kaynak

6

Soru "Bir <img> etiketi nasıl düzgün kapatılır?" bu gerçek bir sorudur ve cevaplar yararlıdır. Bu soru kapatılmamalıydı.

3

Şu anda soru iyi. Öyle değil , eksik, kapsamının çok geniş veya rhetorial, belirsiz belirsiz. Aşağıda da harika bir cevap var.

— David J.

Aşağıdaki yanıtlardan hangisinin doğru olduğunu bilmiyorum, ancak ilginç bir şekilde, Firefox'un Kod Denetçisi, etiketi oraya koymazsanız etiketin sonuna </img> ekler. Ve IE yapmaz. Bu benim evrenim için önemlidir.

— Chiwda

PS Dreamweaver, /> XHTML etiketini ekler.

— Chiwda

50

<img src='stackoverflow.png' />

İyi çalışıyor ve etiketi düzgün kapatıyor. altGörme engelli kişiler için özelliği eklemek en iyisidir.

— Ed Heal
kaynak

4

<img />[X] HTML / XML'de geçerli olduğu doğrudur , ancak günümüzde XHTML kullanımı çok nadirdir ve sunucunuz sayfalara hizmet text/htmlediyorsa, endişelenmeniz gereken tek şey geçerli HTML yazmaktır. Bir HTML uygulamasını XHTML'ye taşıma olasılığı sıfıra yakındır.

— Fabrício Matté

1

4.01 Geçiş ve üstü hedefleniyorsa yukarıdaki yanıt W3C'nin HTML denetleyicisi ile doğrulanamayacaktır. Ayrıca W3C Biçimlendirme Doğrulama Hizmeti'ne bakın . Yukarıdaki cevabın HTML5 veya XHTML gerektirdiğine inanıyorum. Doğrulama hatalarını önlemek için birini kullanmanız gerekir <img src='stackoverflow.png'>(sizin için önemliyse).

— jww

1

@ FabrícioMatté Gerçek kullanımda xhtml'yi ciddi şekilde küçümsüyorsunuz. Şirket büyüdükçe, html yerine xhtml veya xhtml gibi biçimlendirilmiş html5 ile (kolay / hızlı ayrıştırma için) veya mikro veriler gibi başka şeylerle veya ixbrl gibi gelişmiş biçimlendirme ile çalışma olasılıkları o kadar yüksektir.

— Robert McKee

"İyi çalışıyor" ve "belirtilmiş" arasında büyük bir fark vardır ve bu etikette kapanış eğik çizgisinin kullanıldığını belirten herhangi bir HTML belirtimini asla bulamazsınız. Başkalarının da belirtildiği gibi, orijinal olarak XHTML / XML kullanmak üzere yazılmış web sitelerini bozmamak için izin verilir, ancak hiçbir yerde kullanımına ihtiyaç olduğunu belirten herhangi bir ifade veya örnek bulamazsınız. Aslında, hiçbir anlamı olmadığını belirten ifadeler bulacaksın ve tarayıcılara bunu görmezden gelme talimatı verildi!

— Rob

Rob - 6 yıl önce bir sorun vardı. Bu onu düzeltti. Sanırım artık tarayıcılar daha iyi

— Ed Heal

164

Bu geçerli HTML5 ve kapatmadan kesinlikle sorun değil. Sözde boşluk unsurudur:

<img src='stackoverflow.png'>

Aşağıdakiler geçerli XHTML etiketleridir. Kapatılmaları gerekiyor. Sonuncusu da HTML 5'te iyidir:

<img src='stackoverflow.png'></img>
<img src='stackoverflow.png' />

— Marvin Rabe
kaynak

5

Yalnızca geçerli HTML5 değil, aynı zamanda HTML4'te de geçerlidir. HTML, söylediğiniz gibi kendi kendine kapanan "void" öğeleri gerektirmez. Tutarlı cevap için +1.

— Fabrício Matté

2

HTML5 veya XHTML, 4.01 Geçiş ve üstünü hedefliyorsa W3C'nin HTML denetleyicisi ile doğrulanamaz. Ayrıca W3C Biçimlendirme Doğrulama Hizmeti'ne bakın . Birini kullanmanız gerekir <img src='stackoverflow.png'>(sizin için önemliyse).

— jww

Yıllar sonra yorum yapmak ... <img src="about:logo" alt="about:logo">firefox 76'nın about:logosayfasındaki etiketi görünce kafam karıştı ! Her ne kadar document.body.innerHTMLgösterileri <img src=\"about:logo\" alt=\"about:logo\">... Çok iyi cevap ...

— S.Goswami

4

Aslında, HTML5'te yalnızca ilki geçerlidir

<img src='stackoverflow.png'>

XHTML'de yalnızca son ikisi geçerlidir

<img src='stackoverflow.png'></img>  
<img src='stackoverflow.png' />

( altKesin olarak gerekli olmasa da, _usually_ özniteliği de eklenmelidir).

Bununla birlikte, HTML5 sayfanız muhtemelen amaçlandığı gibi görüntülenecektir çünkü tarayıcılar html'nizi kastettiğinizi düşündüğü şekilde yeniden yazacak veya yorumlayacaktır. Yani olabilir ondan, örneğin, bir etiket döner anlamına
<div />içine <div></div>. Ya da belki son eğik çizgiyi görmezden geliyor <img ... />.
bkz. 2016: Eski doğrulama için HTML5'i XHTML 5.0 olarak sunma.
bkz: 2011 tartışması ve ek bağlantılar burada, ancak zamanla bazı kısımlar değişmiş olabilir

Kısmen bunun nedeni, tarayıcıların hatayı düzeltmek için çok çabalamalarıdır. Ayrıca, kendi kendine kapanan etiketler ve geçersiz etiketler hakkında çok fazla kafa karışıklığı olduğu için. Son olarak, teknik özellik değişti veya her zaman net olmadı ve tarayıcılar geriye dönük uyumlu olmaya çalışıyor.

Bu nedenle, muhtemelen üç seçenekten herhangi birinden kurtulabilirsiniz,
ancak yalnızca ilki HTML5 standardına uygundur ve bir HTML5 doğrulayıcıdan geçmesi garanti edilir.

Sağlam bir strateji şunlar olabilir:

Kapanış eğik çizgisi olmadan yeni kod yazın.
Kodu yeniden çarpanlara ayırırken, üzerlerinde koşarken yakındaki resim etiketlerini güncelleyin.
Belirli bir ihtiyaç olmadıkça, eski dosyalardaki dokunmadığınız etiketler için fazla endişelenmeyin.

HTML5'te kapatılmaması gereken etiketlerin listesi :

 <br>    <hr>    <input>       
 <img>  <link>   <source>  
 <col>  <area>   <base>
 <meta> <embed>  <param>  
<track>  <wbr>   <keygen> (HTML 5.2 Draft removed)

— SherylHohman
kaynak

1

Bu teknik olarak yanlıştır. Kendi kendine kapanan bir void öğesi html 5'te mükemmel şekilde geçerlidir . XHTML ve HTML 5'in herhangi bir sürümünde geçerli olacak html.spec.whatwg.org/#start-tags'e bakın <img src='stackoverflow.png' />.

— Robert McKee

1

@RobertMcKee Hayır, teknik olarak doğru. Kapanış bölü çizgisinin kullanımına izin verilir ve bir hata olarak işaretlenmezken, hiçbir HTML belirtiminin hiçbir yerinde kullanılmak üzere belirtildiğini görmezsiniz. XHTML / XML tabanlı eski web sitelerini kırmamak için izin verilir, ancak hiçbir yerde, kelimelerle veya örnekle, W3C tarafından belirtilen etiketlerde kapanış eğik çizgi kullanımını gösteren herhangi bir HTML spesifikasyonu bulamazsınız. veya WHATWG.

— Rob

@Rob Yukarıda 12.1.2.1.6 bölümünde bağlantı kurduğum WHATWG belgesine göre -

Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single U+002F SOLIDUS character (/). This character has no effect on void elements, but on foreign elements it marks the start tag as self-closing.

img, bölüm 12.1.2'ye göre geçersiz bir öğedir

— Robert McKee

1

@RobertMcKee Evet. Bu, eğik çizgiye neden izin verildiğini özetleyen spesifikasyonun (bir kısmı) (önceki yorumumda verdiğim nedenlerden dolayı). Bununla birlikte, söz konusu öğenin gerçek belirtimine (bu durumda img) bakmanız gerekir; bu, sözcükler ve örneklerle, kapanış eğik çizgisinin gerekli olmadığını veya belirtilmediğini açıkça gösterir. Aslında, bakmadan, bu bölümdeki daha fazla okuma, kapanış eğik çizgisinin hiçbir anlamı olmadığını, hiçbir şey yapmadığını ve tarayıcıların bunu görmezden gelmesi gerektiğini belirtir. Bu yüzden faydasız ve anlamsız ve bizi orijinal yorumuma geri getiriyor: kapanış eğik çizgi kullanılmıyor.

— Rob

1

@Rob Evet, isteğe bağlıdır, ancak tamamen geçerlidir. Bu da ifadeyi Actually, only the first one is valid in HTML5teknik olarak yanlış yapar . İkincisi HTML5'te de geçerlidir. Gerekli değil ama geçerli. Kimse bunun gerekli olduğunu tartışmıyor. Yalnızca spesifikasyonlara göre, etiketin kendi kendine kapanma biçiminin kullanılması tüm mevcut XHTML ve HTML biçimlerinde geçerlidir.

— Robert McKee

2

Kullanmanız gereken en iyi etiket kullanımı:

<img src="" alt=""/>

Ayrıca HTML5'te de kullanabilirsiniz:

<img src="" alt="">

Bu ikisi HTML5'te tamamen geçerlidir Birini seçin ve buna bağlı kalın.

— Md. A. Barık
kaynak

İlk değil onu belirtilen olmadığını en iyi herhangi ikinci ise HTML standardı. İlkine yalnızca tarihsel nedenlerle izin verilir! (Tarayıcıların buna izin vermemesi durumunda bozulabilecek eski web sitelerinde XHTML / XML kullanımıyla uyumluluk.)

— Rob

Rob'un burada ne söylemeye çalıştığından emin değilim, ancak html spesifikasyonu ilkinin geçerli olduğunu belirtiyor.

— Robert McKee

2

İkisi de doğru cevap. HTML5 katı kurallara uyar ve HTML5'te tüm etiketleri kapatabiliriz. Bu nedenle, HTML5 veya HTML kullanmak ve uygun bir cevabı izlemek size bağlıdır.

<img src='stackoverflow.png'>
<img src='stackoverflow.png' />

İkinci özellik daha uygundur.

— PLB
kaynak

Yanlış. İlki, herhangi bir HTML spesifikasyonunda belirtilen tek şeydir . İkincisine yalnızca tarihsel nedenlerle izin verilir, ancak yine, herhangi bir yerde gerektiği gibi belirtilmemiştir.

— Rob

1

-Etiket Boştur ve yalnızca Öznitelik içerir. -Etiket 'Kapanış' etiketine sahip değil.

Yani,

<img src='stackoverflow.png'>
<img src='stackoverflow.png' />

her ikisi de HTML5'te doğrudur.

— PLB
kaynak

İlk doğrudur! İkincisine yalnızca tarihsel nedenlerle izin verilir. (Tarayıcıların buna izin vermemesi durumunda bozulabilecek eski web sitelerinde XHTML / XML kullanımıyla uyumluluk.)

— Rob

1

Bir XHTML ayrıştırıcıyla okumaya çalışacaksanız, kapanış etiketinin olması yararlıdır. Uç bir durum olabilir ama bunu her zaman yaparım. Buna sahip olmanın hiçbir zararı yoktur ve kapatılmamış bir etikete çarptığında devrilmeyecek bir dizi XML okuyucu kullanabileceğimizi bildiğim anlamına gelir.

İçeriği asla ayrıştırmaya çalışmayacaksanız, kapanışı göz ardı edin.

— AmateurD
kaynak