본문 바로가기
Publishing/HTML

html header 정보

by 오다다의 이상한 코드 odada 2020. 2. 12.

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 페이지를 올바르게 표시하려면 웹 브라우저가 페이지에 사용 된 문자 세트를 알아야합니다.

<meta>태그에 지정되어 있습니다 :

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
html header 정보  (0) 2020.02.12
웹접근성 준수 된 회원가입 폼  (0) 2020.02.12
HTML input 속성  (0) 2020.02.12
HTML Form 요소  (0) 2020.02.12

댓글0