<head>에서 요소를 주문하는 모범 사례는 무엇입니까?

91

어떤 순서로든 사용할 수 있습니까? <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">전에 배치하는 것이 중요 합니까<title>

이것이 가장 많이 사용됩니다. 가장 좋은 방법입니까?

<!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>

이 사이트 http://stackoverflow.com 에는 인코딩이 없으며<meta>

나는 <meta>모든 js와 css 후에 SEO를 위해 모든 것을 추가하는 SEO 구성 요소가있는 CMS를 사용합니다 . 파일. 허용되는 순서대로 요소를 배치하면 <head>문서 호환성 및 인코딩 에 영향을 미칠 수 있습니까?

html  css  xhtml  w3c 
— 지텐 드라 비야 스
소스
모든 댓글은 어디로 갔나 요?
— Pekka
이 사이트 (stackoverflow.com)에는 인코딩 세트 (UTF-8로)가 있으며, 해당 사이트가 속한 HTTP 헤더에 있습니다. 메타 태그에서 문자 집합을 정의하는 것은 일종의 해키 해결 방법입니다.
— jpsimons
2
권리. HTTP 헤더에서 문자 집합을 정의하는 것이 좋지만 일부 상황에서는이를 설정할 수 없으므로 (예 : 로컬 디스크에서 파일로드) <meta>태그가 이러한 경우에 대한 해결 방법이지만 필수는 아닙니다.
— Brian Campbell
여기에 최소한 9 ~ 10 개의 댓글이있었습니다. 특별한 것은 아니지만 공격적인 것도 없었습니다. 그들은 모두 어디로 갔습니까? 댓글을 삭제할 권한이있는 사람은 누구이며 그 이유는 무엇입니까?
— Pekka
우리 모두는 자신의 의견을 삭제할 권한이 있습니다. 어떤 사람들은 자신의 것을 삭제 했습니까? 나는 내 대답을 작성 하느라 바빴 기 때문에이 질문에 대한 코멘트를 보지 못했습니다. 다른 질문을 생각하고 있지 않습니까?
— Brian Campbell

답변:

111

HTML에서는 DOCTYPE먼저 와야하며 그 뒤에는 <html>요소가 포함 된 <head>요소를 포함 해야하는 단일 요소가 <title>오고 그 뒤에 요소가 와야합니다 <body>. HTML 4.01 및 HTML5 초안 에서 HTML 문서의 전역 구조에 대한 설명을 참조하십시오 . 실제 요구 사항은를 제외하고 거의 동일 DOCTYPE하지만 다르게 설명됩니다.

실제 태그 ( <html>, </html>, <head>, 등) 선택 사항입니다 태그가 없으면 요소가 자동으로 생성됩니다. <title>HTML에서 유일한 필수 태그입니다. 가장 짧은 유효한 HTML 4.01 문서 (적어도 내가 생성 할 수있는)는 <p>다음과 <body>같습니다 (유효 하려면 에 무언가가 있어야하기 때문에 a 필요 ).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><title></title><p>

그리고 가장 짧은 유효한 HTML5 문서 :

<!DOCTYPE html><title></title>

XHTML에서는 모든 태그를 명시 적으로 지정해야합니다. 암시 적으로 삽입되는 요소는 없습니다.

브라우저는 Content-TypeHTTP 헤더를 사용하여 지정되지 않은 리소스 유형을 결정하기 위해 일부 상황에서 콘텐츠 유형 스니핑을 수행 하고 Content-Type헤더가 제공되지 않았거나 포함되지 않은 경우 문자 인코딩 스니핑 charset을 수행합니다 (일반적으로 시도해야합니다. 이러한 헤더를 포함하고 올바른지 확인하십시오. 그러나 HTTP를 통해 전송되지 않는 로컬 파일과 같이 불가능한 일부 상황이 있습니다. 그러나 이러한 목적을 위해 문서 시작 부분에서 제한된 수의 바이트 만 감지하므로 콘텐츠 감지 또는 문자 인코딩 감지에 영향을주는 모든 것은 문서 시작 부분에 있어야합니다.

이러한 이유로 HTML5meta 는 문자 집합을 지정하는 데 사용되는 모든 태그 ( <meta http-equiv="Content-type" content="text/html; charset=...">또는 단순히 <meta charset=...>)가 파일의 처음 1024 바이트 내에 있어야 적용되도록 지정합니다 . 따라서 문서에 문자 인코딩 정보를 포함 시키려면 태그를 파일의 앞부분에, 가능하면 <title>요소 앞부분에 넣어야합니다 . 그러나 Content-type헤더 를 올바르게 지정하면이 태그가 필요하지 않습니다 .

CSS에서는 이후 스타일 선언이 이전 스타일 선언보다 우선하며 나머지는 모두 동일합니다. 따라서 일반적으로 이전에 재정의 할 수있는 가장 일반적인 스타일 시트를 배치하고 나중에보다 구체적인 스타일 시트를 배치해야합니다.

성능상의 이유로 스크립트를 </body>로드하면 페이지 렌더링이 차단되므로 페이지 하단의. 바로 앞에 스크립트를 배치하는 것이 좋습니다 .

당연히 <script>태그는 각 순서에 의존하는 스크립트가 먼저로드 된 종속성을 갖도록 정렬되어야합니다.

전반적으로 내가 이미 지정한 제약 사항 외에 태그의 순서는 <head>가독성을 제외하고는 그다지 중요하지 않습니다. 나는 <title>위쪽 을 보는 경향이 있고 다른 <meta>태그는 일종의 논리적 순서로 배치하는 경향이 있습니다.

대부분의 경우 HTML 문서의 본문에 항목을 입력해야하는 순서는 표시되어야하는 순서 또는 액세스해야하는 순서 여야합니다. CSS를 사용하여 항목을 재정렬 할 수 있지만 스크린 리더는 일반적으로 소스 순서대로 항목을 읽고 검색 색인은 소스 순서대로 항목을 추출합니다.

— 브라이언 캠벨
소스
5
TITLE이 필수라는 것은 나에게 뉴스 였고 조금 이상해 보입니다. 그러나 공식 사양을 확인하는 것은 물론 절대적으로 정확합니다. 살고 배우십시오!
— Carl Smotricz
제가 놀란 것은 이것이 유일한 필수 태그라는 것입니다. 실제로 HTML5에서도 선택 사항으로 만들어야한다고 주장했습니다 (항상 iframe제목이 표시되지 않고 항상 표시되는 가젯과 같은 것에는 실제로 필요하지 않기 때문입니다). ),하지만 이번에는 변경하지 않기로 결정했습니다.
— Brian Campbell
@Brian-이 멋진 설명에 대해 Brian에게 감사드립니다. 그래서 나를 실망시키지 않았습니다. 이 사이트에는 마스터 마인드가 있습니다. 그리고 U가 질문을 아주 잘 이해하는 한 가지 더 다음 u는 아주 잘 대답합니다. 훌륭한 일.
— Jitendra Vyas
1
@Jitendra 하하! 최근 질문에 대한 답변을 많이했는데, 그렇지 않나요? 나는 새해 파티에서 조금 취했다. 하지만 시도해 볼 수 있습니다 ... 그래도 내 대답이 마지막 커플만큼 좋을 것이라고 보장하지는 않습니다.
— Brian Campbell
3
현대적인 접근 방식은 또는 속성이있는 <script>태그를 . stackoverflow.com/questions/436411/… 참조asyncdefer<head>
— joshreesjones 2014-06-27
32

이것은 내가 사용하는 템플릿입니다. 새 프로젝트에 필요하지 않은 것은 삭제하면됩니다.

<!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>
— 마테이 야 노프 치크
소스
6
하기 때문에 머리에 첫 번째 태그해야합니다 X-UA 호환 stackoverflow.com/questions/3449286/...
— 데니스
@Denis 당신은 무슨 <html class="default"> 뜻 인지 아십니까 ?
— Shaiju T
3
@stom 클래스 속성이있는 이유를 의미합니까? 페이지가로드되면 해당 클래스를 제거하려면 추가 JavaScript 코드가 필요합니다. 이렇게하면 브라우저에서 JavaScript가 활성화되어 있음을 알 수 있습니다. 이 속성이 여전히 존재하는 경우-이는 JavaScrips가 비활성화되어 필요한 경우 CSS를 사용하여 사용자에게 일부 메시지를 표시 할 수 있음을 의미합니다.
— Denis
@Denis는 <noscript> </ noscript>를 사용하여 자바 스크립트가 활성화되었는지 확인합니다.
— TheCrazyProfessor
1
이 명령에 대한 이유에 대해 말씀해 주시겠습니까?
— 2540625
7

Brian의 대답에 몇 가지 성능 제안을 추가하면 논리적으로 가장 높은 우선 순위는 다운로드해야하는 항목이어야합니다. 그래야 브라우저가 최대한 빨리 다운로드를 시작할 수 있고 페이지가 표시되는 방식에 영향을 미칠 수 있습니다. 그래서 다음과 같이 제안합니다.

  • charset (사양에서 초기에 필요함), 뷰포트, apple-mobile-web-app-capable과 같이 모양에 영향을 미치는 메타
  • 브라우저가 최대한 빨리 렌더링 할 수 있고 사용자가 무언가 일어나고 있음을 감지 할 수 있도록 상단 근처의 제목
  • Favicon 및 터치 아이콘
  • CSS (최소한 스크롤없이 볼 수있는 부분에는 CSS, 멋지게 보려면 바닥 글에 다른 CSS를로드 할 수 있습니다). 이 단계는 일반적으로 다른 모든 작업이 진행되는 것을 차단하므로 CSS 지연 중에 피드백을 제공하기 때문에 이전 항목을 위에 놓았습니다.
  • 바닥 글에로드 할 수없는 중요한 스크립트 (예 : 레이아웃에 영향을 미칠 수있는 사용자 에이전트 스니핑)
  • 기타 모든 것 (예 : 링크 및 메타 태그 형태의 필수 메타 데이터)

특히 일반적인 방문자의 프로필에 따라 작고 외부 스크립트 / 시트가 캐시되지 않을 가능성이있는 경우 헤드에로드 된 CSS 및 JS를 인라인하는 것도 고려할 수 있습니다. 인라인으로 처리하면 이상적으로 압축하는 것이 좋습니다.

마지막으로 : 사용자는 머리와 그것이로드하는 모든 차단 리소스를 기다려야하므로 본문이나 바닥 글에 가능한 한 많이 넣는 것이 가장 좋습니다.

— 마헤 모프
소스
7

W3 에 따르면 다음과 같아야합니다.

  • 메타 문자셋
  • 표제
  • 메타 이름 = "설명"
  • 메타 이름 = "키워드"
  • 스타일 시트
  • JavaScript 파일
— 안드레 브라보 페레이라
소스
링크 된 기사가 리디렉션되고 있으며 주문에 대해 아무 말도하지 않는 것 같습니다.
— 2540625
스타일 시트는 렌더링 차단이며 CSS 전에 js 비동기를로드합니다.
— Null
5

문자 인코딩을 나타 내기 때문에 먼저 콘텐츠 유형을 원합니다. 그렇지 않으면 나중에 나올 경우 일부 브라우저에서 인코딩을 추측하려고 시도합니다. (구체적인 내용은 기억할 수 없지만 문서의 처음 75 자에서 인코딩을 찾지 못하면 IE가 추측 할 것이라고 생각합니까?)

대부분의 웹 서버는 HTTP 헤더로 인코딩을 보내지 만 사용자가 페이지를 저장하면 헤더가 함께 저장되지 않습니다.

브라우저가 가능한 한 빨리 다운로드하도록 CSS 참조를 두 번째로 넣었습니다.

JavaScript는 머리 속에 넣지 않을 것입니다. 다운로드하면 페이지 렌더링이 차단되므로 페이지 하단에 있어야합니다.

— 라이언 도허티
소스
0

IIRC, 일부 브라우저는 content-type요소 를 만나면 문서를 다시로드합니다 . 따라서 해당 요소는 head문서 의 요소 내에서 가장 먼저 와야 합니다.

— 데이비드 R 트리블
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.