html header 정보

Publishing/HTML

html header 정보

oodada 2020. 2. 12. 11:31

DOCTYPE

모든 HTML 문서는 문서 유형 선언으로 시작해야합니다 <!DOCTYPE html>.

<!DOCTYPE html>

html 5 권장

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML

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

HTML

문서 제목

각 페이지마다 서로 다른 규칙으로 사용중인 문서 제목 (<title> 태그) 규칙을 일원화함으로써, 서비스 통일성을 높이고 사내 검색 엔진에 대한 최적화를 꾀한다. 또한 문서 제목에 컨텐츠 제목을 포함시킴으로써, 외부 검색서비스에서 해당 컨텐츠의 노출이 더 잘될 수 있도록 한다.

기본 규칙

컨텐츠 제목 (공백) – (공백) 하위섹션명 (공백) | (공백) 서비스명

<title>경제 | Daum 미디어다음</title>
<title>IT/과학 | Daum 미디어다음</title>
<title>스타존 | Daum 영화</title>

하위섹션명은 서비스명 앞에 표기한다.
하위섹션명의 구분자는 ' | ' (vertical bar / pipe 기호) 를 사용한다.
섹션명은 웹접근성 요소로 필수로 작성한다.

Meta 요소

검색 엔진 최적화를 위하여 meta 요소를 이용하여 문서 제목을 추가 명시한다.
컨텐츠 상세 페이지에서는 컨텐츠 제목 만을 표기한다.
서비스홈에서는 서비스명 만을 표기, 서브 섹션홈에서는 하위섹션명 | 서비스명 을 표기한다.
컨텐츠 제목이 HTML validation 을 깨지 않도록 반드시 HTML escape 되어야 한다

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-title" content="NAVER">
<meta name="robots" content="index,nofollow">
<meta name="description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">
<!-- 카카오톡, 블로그 등 메시지 정보 -->
<meta property="og:title" content="네이버">
<meta property="og:url" content="https://www.naver.com/">
<meta property="og:image" content="https://s.pstatic.net/static/www/mobile/edit/2016/0705/mobile_212852414260.png">
<meta property="og:description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="">
<meta name="twitter:url" content="https://www.naver.com/">
<meta name="twitter:image" content="https://s.pstatic.net/static/www/mobile/edit/2016/0705/mobile_212852414260.png">
<meta name="twitter:description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">

HTML 문자셋 속성 HTML Encoding (Character Sets)

HTML 페이지를 올바르게 표시하려면 웹 브라우저가 페이지에 사용 된 문자 세트를 알아야합니다.

HTML5의 기본 문자 집합은 UTF-8입니다.

<meta charset="UTF-8">

@charset CSS 규칙

CSS @charset규칙을 사용하여 스타일 시트에 사용되는 문자 인코딩을 지정할 수 있습니다

@charset "UTF-8";

외부 CSS/JS

외부(External) 방식 CSS/JS를 사용하면 해당 파일만 변경하여 전체 웹 사이트의 모양을 변경할 수 있습니다!

헤드 섹션 내부의 <link> 요소와 <script>요소가 포함되어야합니다.

<link rel="stylesheet" href="./dist/css/comm.css">
<script src="./dist/js/comm.js"></script>

내부 CSS/JS

하나의 단일 HTML 페이지에 고유 한 스타일이있는 경우 내부(Internal) 방식을 사용할 수 있습니다.

인터널 방식은 헤드 섹션 내부의 <style> <script> 요소 내에 정의됩니다.

<!-- CSS -->
<style>
  body {
    background-color: linen;
  }

  h1 {
    color: maroon;
    margin-left: 40px;
  }
</style>

<!-- JS -->
<script>
  $(".counter").countimator();
</script>

저작자표시 비영리 동일조건

'Publishing > HTML' 카테고리의 다른 글

HTML5의 새로운 태그 (0)	2020.02.13
HTML 기본 layout (0)	2020.02.12
웹접근성 준수 된 회원가입 폼 (0)	2020.02.12
HTML input 속성 (0)	2020.02.12
HTML Form 요소 (0)	2020.02.12

현재글html header 정보

odada