dapat menggunakan apapun dengan urutan apapun? apakah penempatan dari <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
itu penting sebelumnya<title>
ini paling banyak digunakan, apakah ini cara terbaik?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Title Goes Here</title>
<link rel="stylesheet" href="http://sstatic.net/so/all.css?v=5912">
<link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#wmd-input").focus();
$("#title").focus();
$("#revisions-list").change(function() { window.location = '/posts/1987065/edit/' + $(this).val(); });
});
</script>
</head>
<body>
<p>This is my web page</p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools.js"></script>
</body>
</html>
situs ini http://stackoverflow.com tidak memiliki pengkodean dan<meta>
Saya menggunakan CMS yang memiliki komponen SEO yang menambahkan semua <meta>
untuk SEO setelah semua js dan css. file. dapatkah penempatan elemen apa pun dalam urutan apa pun yang diizinkan <head>
memengaruhi kompatibilitas dan pengkodean dokumen?
<meta>
tag adalah solusi untuk kasus tersebut, tetapi tidak penting.Jawaban:
Dalam HTML,
DOCTYPE
harus didahulukan, diikuti oleh satu<html>
elemen, yang harus berisi<head>
elemen yang mengandung<title>
elemen, diikuti oleh<body>
elemen. Lihat deskripsi struktur global dokumen HTML di HTML 4.01 dan draf HTML5 ; persyaratan sebenarnya kebanyakan sama selain dariDOCTYPE
, tetapi mereka dijelaskan secara berbeda.Tag yang sebenarnya (
<html>
,</html>
,<head>
, dll) adalah opsional; elemen akan dibuat secara otomatis jika tag tidak ada.<title>
adalah satu-satunya tag yang diperlukan dalam HTML. Dokumen HTML 4.01 valid terpendek (setidaknya, yang dapat saya hasilkan) adalah (memerlukan<p>
karena harus ada sesuatu<body>
agar valid):<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><title></title><p>
Dan dokumen HTML5 valid terpendek:
<!DOCTYPE html><title></title>
Perhatikan bahwa di XHTML, semua tag harus ditentukan secara eksplisit; tidak ada elemen yang akan disisipkan secara implisit.
Dalam beberapa situasi, browser melakukan sniffing tipe konten untuk menentukan jenis sumber daya yang belum ditentukan menggunakan
Content-Type
header HTTP, dan juga sniffing pengkodean karakter jikaContent-Type
header belum disediakan atau tidak menyertakancharset
(Anda biasanya harus mencoba untuk menyertakan tajuk ini, dan memastikan bahwa tajuk itu benar, tetapi ada beberapa situasi yang tidak dapat Anda lakukan, seperti file lokal tidak ditransfer melalui HTTP). Mereka hanya mengendus sejumlah byte di awal dokumen untuk tujuan ini, jadi apa pun yang dimaksudkan untuk mempengaruhi konten sniffing atau karakter encoding sniffing harus mendekati awal dokumen.Karena alasan ini, HTML5 menetapkan bahwa
meta
tag apa pun yang digunakan untuk menentukan kumpulan karakter (baik<meta http-equiv="Content-type" content="text/html; charset=...">
atau sederhana<meta charset=...>
) harus berada dalam 1024 byte pertama dari file agar dapat diterapkan. Jadi, jika Anda akan memasukkan informasi pengkodean karakter dalam dokumen Anda, Anda harus meletakkan tag di awal file, bahkan mungkin sebelum<title>
elemen. Tapi ingat bahwa tag ini tidak diperlukan jika Anda menentukanContent-type
header dengan benar.Di CSS, deklarasi gaya yang lebih baru lebih diutamakan daripada yang sebelumnya , semuanya sama. Jadi, Anda biasanya harus meletakkan style sheet paling umum yang mungkin diganti sebelumnya, dan style sheet yang lebih spesifik nantinya.
Untuk alasan performa, sebaiknya letakkan skrip di bagian bawah halaman, tepat sebelum
</body>
, karena skrip pemuatan memblokir rendering halaman.Jelasnya,
<script>
tag harus diurutkan sehingga skrip yang bergantung pada setiap pesanan memiliki dependensi yang dimuat terlebih dahulu.Secara keseluruhan, selain batasan yang telah saya tentukan, urutan tag di dalam
<head>
seharusnya tidak terlalu menjadi masalah, selain untuk keterbacaan. Saya cenderung ingin melihat bagian<title>
atas, dan meletakkan<meta>
tag lainnya dalam semacam urutan logis.Sering kali, urutan yang harus Anda masukkan ke dalam badan dokumen HTML haruslah urutan tampilannya, atau urutan aksesnya. Anda dapat menggunakan CSS untuk mengatur ulang berbagai hal, tetapi pembaca layar umumnya akan membaca berbagai hal dalam urutan sumber, indeks penelusuran akan mengekstrak berbagai hal dalam urutan sumber, dan seterusnya.
sumber
iframe
dan tidak pernah memiliki judul yang terlihat ), tetapi kali ini mereka memutuskan untuk tidak mengubahnya.<script>
tag dengan atributasync
ataudefer
di<head>
. Lihat stackoverflow.com/questions/436411/…Ini adalah template yang saya gunakan, hapus saja apa pun yang tidak Anda perlukan untuk proyek baru.
<!doctype html> <html class="no-js" lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title></title> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content=""> <meta name="robots" content="index, follow"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="default"> <link rel="stylesheet" href="scss/style.css" /> <!-- http://realfavicongenerator.net/ --> <meta property="fb:page_id" content=""> <meta property="og:title" content=""> <meta property="og:image" content=""> <meta property="og:description" content=""> <meta property="og:url" content=""> <meta property="og:site_name" content=""> <meta property="og:type" content="website"> <meta name="twitter:card" content="summary"> <meta name="twitter:url" content=""> <meta name="twitter:title" content=""> <meta name="twitter:description" content=""> <meta name="twitter:image" content=""> <meta name="twitter:site" content=""> <script src="js/vendor/modernizr.js"></script> </head> <body> </body> </html>
sumber
<html class="default">
?Menambahkan beberapa saran kinerja ke jawaban Brian, prioritas tertinggi seharusnya secara logis adalah hal-hal yang perlu diunduh, sehingga peramban dapat mulai mengunduhnya secepatnya, dan hal-hal yang akan memengaruhi tampilan laman. Jadi saya sarankan:
Anda juga dapat mempertimbangkan untuk memasukkan CSS dan JS apa pun yang dimuat di head, terutama jika ukurannya kecil dan skrip / lembar eksternal tidak mungkin di-cache sesuai dengan profil pengunjung biasa Anda. Dan jika Anda melakukannya sebaris, idealnya Anda ingin mengompresnya.
Hal terakhir: Pengguna harus menunggu head - dan sumber daya pemblokiran yang dimuat - jadi yang terbaik adalah meletakkan sebanyak mungkin di body atau footer.
sumber
Menurut W3 harus:
sumber
Kebanyakan browser tidak mempermasalahkan bagaimana Anda mengurutkan elemen Anda, tetapi Anda harus selalu menentukan
charset
terlebih dahulu.Praktik terbaik untuk IE7 + membutuhkan bahwa
charset
,X-UA-Compatible
, danbase
deklarasi terjadi sebelum hal lain dalamhead
, jika tidak browser mulai lebih dan re-mem-parsing segala sesuatu yang datang sebelumnya.sumber
Anda ingin tipe konten Anda terlebih dahulu karena ini menunjukkan pengkodean karakter, jika tidak, jika muncul nanti, beberapa browser mencoba menebak pengkodean. (Saya tidak dapat mengingat secara spesifik, tetapi saya pikir IE akan menebak jika tidak menemukan pengkodean dalam 75 karakter pertama dokumen?)
Sebagian besar server web mengirim pengkodean di header HTTP, tetapi jika pengguna menyimpan halaman Anda, header tersebut tidak disimpan dengannya.
Saya akan menempatkan referensi CSS di urutan kedua sehingga browser mendownloadnya secepat mungkin.
JavaScript Saya tidak akan meletakkannya di kepala, itu harus berada di bagian bawah halaman Anda karena mengunduhnya memblokir rendering halaman.
sumber
IIRC, beberapa browser akan memuat ulang dokumen saat menemukan
content-type
elemen. Jadi elemen itu mungkin harus didahulukan dalamhead
elemen dokumen.sumber