Bagaimana cara menutup tag <img> dengan benar?

122

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

Yang mana yang benar?

html

— masukkan nama penggunadi sini
sumber

6

Pertanyaannya adalah "Bagaimana cara menutup tag <img> dengan benar?" yang merupakan pertanyaan nyata, dan jawabannya berguna. Pertanyaan ini seharusnya tidak ditutup.

3

Pertanyaannya, saat ini, baik-baik saja. Itu tidak ambigu, tidak jelas, tidak lengkap, terlalu luas, atau rhetorial. Ada jawaban bagus di bawah ini juga.

— David J.

Saya tidak tahu jawaban mana yang benar, tetapi yang menarik, Pemeriksa Kode Firefox menambahkan </img> di akhir tag jika Anda tidak meletakkannya di sana. Dan IE tidak. Ini penting di alam semesta saya.

— Chiwda

PS Dreamweaver menyisipkan /> tag XHTML.

— Chiwda

50

<img src='stackoverflow.png' />

Berfungsi dengan baik dan menutup tag dengan benar. Paling baik untuk menambahkan altatribut untuk orang yang mengalami gangguan penglihatan.

— Ed Heal
sumber

4

Benar bahwa <img />valid dalam [X] HTML / XML, meskipun penggunaan XHTML sangat jarang saat ini dan jika server Anda menyajikan halaman karena text/htmlyang perlu Anda khawatirkan hanyalah menulis HTML yang valid. Peluang untuk memindahkan aplikasi HTML ke XHTML hampir nol.

— Fabrício Matté

1

Jawaban di atas akan gagal divalidasi dengan pemeriksa HTML W3C jika menargetkan 4.01 Transisi dan lebih tinggi. Lihat juga Layanan Validasi Markup W3C . Saya yakin jawaban di atas membutuhkan HTML5 atau XHTML. Untuk menghindari kegagalan validasi, Anda perlu menggunakan salah satunya <img src='stackoverflow.png'>(jika itu penting bagi Anda).

— jww

1

@ FabrícioMatté Anda sangat meremehkan xhtml dalam penggunaan sebenarnya. Semakin besar perusahaan, semakin besar kemungkinan mereka bekerja dengan xhtml daripada html, atau html5 yang diformat seperti xhtml (untuk penguraian yang mudah / cepat), atau Anda bekerja dengan hal-hal lain seperti mikrodata, atau markup yang ditingkatkan seperti ixbrl.

— Robert McKee

Ada perbedaan besar antara "berfungsi dengan baik" dan "ditentukan" dan Anda tidak akan pernah menemukan spesifikasi HTML yang menyebutkan penggunaan garis miring penutup pada tag itu. Seperti yang disebutkan orang lain, diperbolehkan untuk tidak merusak situs web yang aslinya ditulis untuk menggunakan XHTML / XML tetapi Anda tidak akan menemukan kata-kata atau contoh yang menyatakan bahwa penggunaannya diperlukan. Bahkan, Anda AKAN menemukan kata-kata yang menyatakan tidak ada artinya dan browser diinstruksikan untuk mengabaikannya!

— Rob

Rob - 6 tahun yang lalu ada masalah. Ini memperbaikinya. Tebak sekarang browser lebih baik

— Ed Heal

163

Ini adalah HTML5 yang valid dan baik-baik saja tanpa menutupnya. Ini adalah yang disebut elemen kosong:

<img src='stackoverflow.png'>

Berikut ini adalah tag XHTML yang valid. Mereka harus ditutup. Yang terakhir juga baik-baik saja di HTML 5:

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

— Marvin Rabe
sumber

5

Ini bukan hanya HTML5 yang valid, tetapi juga valid di HTML4. HTML tidak membutuhkan elemen "kosong" yang menutup sendiri seperti yang Anda katakan. 1 untuk jawaban yang koheren.

— Fabrício Matté

2

HTML5 atau XHTML akan gagal divalidasi dengan pemeriksa HTML W3C jika menargetkan 4.01 Transisional dan lebih tinggi. Lihat juga Layanan Validasi Markup W3C . Anda perlu menggunakan salah satunya <img src='stackoverflow.png'>(jika itu penting bagi Anda).

— jww

Berkomentar setelah bertahun-tahun ... Bingung melihat <img src="about:logo" alt="about:logo">tag di about:logohalaman firefox 76 ! Meskipun document.body.innerHTMLmenunjukkan <img src=\"about:logo\" alt=\"about:logo\">... Jawaban yang sangat bagus ...

— S.Goswami

4

Sebenarnya, hanya yang pertama yang valid di HTML5

<img src='stackoverflow.png'>

Hanya dua yang terakhir yang valid dalam XHTML

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

(Meskipun tidak diwajibkan secara altketat , atribut _biually_ juga harus disertakan).

Meskipun demikian, halaman HTML5 Anda mungkin akan ditampilkan sebagaimana mestinya karena browser akan menulis ulang atau menafsirkan html Anda sesuai dengan maksud Anda. Itu mungkin berarti mengubah tag, misalnya, dari
<div />menjadi <div></div>. Atau mungkin mengabaikan garis miring terakhir <img ... />.
lihat 2016: Menampilkan HTML5 sebagai XHTML 5.0 untuk validasi lama.
lihat: diskusi 2011 dan tautan tambahan di sini, meskipun seiring waktu beberapa bit mungkin telah berubah

Sebagian ini karena browser berusaha keras untuk mengoreksi kesalahan. Juga, karena ada banyak kebingungan tentang tag yang menutup sendiri, dan tag kosong. Akhirnya, spesifikasi telah berubah, atau tidak selalu jelas, dan browser mencoba untuk kompatibel ke belakang.

Jadi, meskipun Anda mungkin bisa lolos dengan salah satu dari tiga opsi,
hanya yang pertama yang mematuhi standar HTML5, dan dijamin lolos dari validator HTML5.

Strategi yang baik mungkin untuk:

Tulis kode baru tanpa garis miring penutup.
Saat memfaktorkan ulang kode, perbarui tag gambar di sekitar, saat Anda menemukannya.
Jangan terlalu khawatir tentang tag dalam file lama yang tidak Anda sentuh, kecuali jika diperlukan.

Berikut adalah daftar tag yang tidak boleh ditutup di HTML5 :

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

— SherylHohman
sumber

1

Ini secara teknis salah. Elemen kosong yang menutup sendiri benar-benar valid di html 5. Lihat html.spec.whatwg.org/#start-tags yang akan menjadi <img src='stackoverflow.png' />valid di semua versi XHTML dan HTML 5.

— Robert McKee

1

@RobertMcKee Tidak, itu benar secara teknis. Meskipun menggunakan garis miring penutup diperbolehkan, dan tidak akan ditandai sebagai kesalahan, tidak ada dalam spesifikasi HTML mana pun Anda akan melihat bahwa itu ditentukan untuk digunakan. Diperbolehkan untuk tidak merusak situs web lama yang didasarkan pada XHTML / XML tetapi Anda tidak akan pernah menemukan spesifikasi HTML yang menunjukkan, dengan kata-kata atau contoh, penggunaan garis miring penutup pada tag yang ditentukan oleh W3C. atau WHATWG.

— Rob

@Rob Menurut dokumen WHATWG yang saya tautkan di atas di bagian 12.1.2.1.6 -

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 adalah elemen kosong per bagian 12.1.2

— Robert McKee

1

@Robert. Itulah (bagian dari) spesifikasi yang menguraikan mengapa garis miring diperbolehkan (untuk alasan yang saya berikan di komentar saya sebelumnya). Namun, Anda harus melihat spesifikasi sebenarnya untuk elemen itu - img dalam kasus ini - yang dengan jelas menunjukkan, dengan kata-kata dan contoh, bahwa tidak ada garis miring penutup yang diperlukan atau ditentukan. Faktanya, tanpa mencarinya, bacaan lebih lanjut di bagian itu akan menyatakan bahwa garis miring penutup tidak ada artinya, tidak melakukan apa-apa dan browser diharuskan untuk mengabaikannya. Jadi tidak ada gunanya dan tidak berguna dan membawa kita kembali ke komentar asli saya: garis miring penutup tidak digunakan.

— Rob

1

@Rob Ya, ini opsional, tetapi sepenuhnya valid untuk melakukannya. Yang membuat pernyataan itu Actually, only the first one is valid in HTML5tidak benar secara teknis. Yang kedua juga valid di HTML5. Tidak wajib, tapi valid. Tidak ada yang memperdebatkan bahwa itu diperlukan. Hanya sesuai spesifikasinya, menggunakan bentuk tag yang menutup sendiri valid di semua bentuk XHTML dan HTML saat ini.

— Robert McKee

2

Penggunaan tag terbaik yang harus Anda gunakan:

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

Anda juga dapat menggunakan di HTML5:

<img src="" alt="">

Keduanya benar-benar valid dalam HTML5. Pilih salah satunya dan pertahankan.

— Md. A. Barik
sumber

Yang pertama bukanlah yang terbaik karena tidak ditentukan dalam standar HTML mana pun sedangkan yang kedua adalah. Yang pertama diperbolehkan hanya karena alasan sejarah! (Kompatibilitas dengan penggunaan XHTML / XML di situs web lama yang akan rusak jika browser melarangnya.)

— Rob

Tidak yakin apa yang Rob coba katakan di sini, tetapi spesifikasi html menentukan bahwa yang pertama valid.

— Robert McKee

2

Keduanya merupakan jawaban yang benar. HTML5 mengikuti aturan ketat dan di HTML5 kita bisa menutup semua tag. Jadi, bergantung pada Anda untuk menggunakan HTML5 atau HTML dan mengikuti jawaban yang sesuai.

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

Properti kedua lebih tepat.

— PLB
sumber

Salah. Yang pertama adalah satu-satunya yang ditentukan dalam spesifikasi HTML apa pun . Yang kedua diperbolehkan hanya karena alasan historis tetapi, sekali lagi, tidak ditentukan seperti yang diharuskan di mana pun.

— Rob

1

-Tagnya Kosong dan hanya berisi Atribut. -Tag tidak memiliki tag 'Penutupan'.

Begitu,

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

keduanya juga benar di HTML5.

— PLB
sumber

Yang pertama benar! Yang kedua hanya diperbolehkan karena alasan historis. (Kompatibilitas dengan penggunaan XHTML / XML di situs web lama yang akan rusak jika browser melarangnya.)

— Rob

1

Sangat membantu untuk memiliki tag penutup jika Anda pernah mencoba membacanya dengan pengurai XHTML. Mungkin kasus tepi tapi saya melakukannya sepanjang waktu. Tidak ada salahnya memilikinya, dan berarti saya tahu kita bisa menggunakan array pembaca XML yang tidak akan jatuh ketika mereka menekan tag yang tidak tertutup.

Jika Anda tidak akan pernah mencoba mengurai konten, abaikan penutupnya.

— AmatirD
sumber