Publishing

HTML Convention

oodada 2020. 11. 11. 10:49
반응형

DOCTYPE

문서타입에 (X)HTML의 버전과 문서형을 지정하는데, 다양한 플랫폼 지원을 위해 XHTML 1.0 , 하위 브라우져 호환성을 위해 Transitional 모드를 권장하고 있다. (Transition 모드를 사용하더라도, 웹표준 준수율의 향상을 위해 가급적 Strict 모드의 문법을 사용하는 것을 권장함) 시스템 식별자를 명시하여 Standards 모드 방식으로 지원해야 하나 예외적으로 메일, 개별카페, 개별블로그 등의 UCC영역에 해당하는 서비스는 과거 비표준 태그 허용을 위해 Quirks 모드로 지원할 수 있다.

HTML5 권장

<!doctype html>

XHTML

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

HTML 일반

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

 

문서 제목

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

 

기본 규칙

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

문서제목 기본 요소

문서 제목에 포함되는 기본 요소를 정의한다.

서비스명

  • 'Daum 영화', 'Daum 미디어다음'

컨텐츠 제목

  • 서비스에서 제공하는 컨텐츠의 제목 - 뉴스 기사 제목, 영화 정보 페이지의 영화 이름
  • 사용자가 제작한 컨텐츠(UCC)의 제목 - 미즈넷, 아고라, 카페의 글 제목
  • 개인/그룹의 Identity를 갖는 공간의 이름 (카페명, 블로그명)

하위 섹션명

  • 하나의 서비스내 하위 섹션명. 보통 서비스별 GNB에서 TAB으로 표현되는 구분.
  • '영화정보' (Daum 영화), '뮤직비디오' (Daum 뮤직)

 

각 요소별 상세규칙

서비스 명

  • Daum의 모든 서비스는 문서 제목에 서비스명을 표기하는 것을 원칙으로 한다.
  • 서비스명은 문서 제목에서 가장 뒷부분에 위치한다.
  • 하위 섹션명을 표시한다.
<title>Daum 부동산</title>
<title>뉴스 : Daum 부동산</title>
<title>커뮤니티탭 : Daum 부동산</title>

 

Meta title 요소

  • 검색 엔진 최적화를 위하여 meta 요소를 이용하여 문서 제목을 추가 명시한다.
  • 컨텐츠 상세 페이지에서는 컨텐츠 제목 만을 표기한다.
  • 서비스홈에서는 서비스명 만을 표기, 서브 섹션홈에서는 하위섹션명 | 서비스명 을 표기한다.
  • 컨텐츠 제목이 HTML validation 을 깨지 않도록 반드시 HTML escape 되어야 한다. 
<meta name="title" content="딸 예니 운동회 참석한 "딸바보" 차승원" />
<meta name="title" content="리뷰 : Daum 영화" />
<meta name="title" content="Daum 영화" />

 

Layout Guide

HTML5 기본 레이아웃

<div id="skipnavigation">
    <a href="#gnb"><span>주메뉴 바로가기</span></a>
    <a href="#main"><span>본문 바로가기</span></a>
    <a href="#login"><span>로그인 바로가기</span></a>
  </div>
  <div class="wrap">
    <!-- header -->
    <header>
      <div class="inner_header">
        <h1>
          <a href="#">회사이름</a>
        </h1>
        <nav>
          <ul>
            <li>
              <a href="#">하나</a>
              <ul>
                <li><a href="#">하나-1</a></li>
                <li><a href="#">하나-2</a></li>
                <li><a href="#">하나-3</a></li>
                <li><a href="#">하나-4</a></li>
              </ul>
            </li>
            <li>
              <a href="#">둘둘둘둘둘</a>
              <ul>
                <li><a href="#">둘-1</a></li>
                <li><a href="#">둘-2</a></li>
                <li><a href="#">둘-3</a></li>
                <li><a href="#">둘-4</a></li>
              </ul>
            </li>
            <li>
              <a href="#">셋셋셋</a>
              <ul>
                <li><a href="#">셋셋셋-1</a></li>
                <li><a href="#">셋셋셋-2</a></li>
                <li><a href="#">셋셋셋-3</a></li>
                <li><a href="#">셋셋셋-4</a></li>
              </ul>
            </li>
            <li>
              <a href="#">넷넷넷</a>
              <ul>
                <li><a href="#">넷넷넷-1</a></li>
                <li><a href="#">넷넷넷-2</a></li>
                <li><a href="#">넷넷넷-3</a></li>
                <li><a href="#">넷넷넷-4</a></li>
                <li><a href="#">넷넷넷-5</a></li>
                <li><a href="#">넷넷넷-6</a></li>
                <li><a href="#">넷넷넷-7</a></li>
              </ul>
            </li>
            <li>
              <a href="#">다섯</a>
              <ul>
                <li><a href="#">다섯-1</a></li>
                <li><a href="#">다섯-2</a></li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </header>
    <!-- //header -->
    <!-- container -->
    <div class="container">
      <div class="contents">
        <div class="sec_g sec_">
          <h2>타이틀</h2>
          <div class="cont_g">

          </div>
        </div>
      </div>
      <aside></aside>
    </div>
    <!-- //container -->
    <!-- footer -->
    <footer>
      <h1><a href="#">회사로고</a></h1>
      <div class="col_right">
        <address></address>
        <div class="copyright"></div>
      </div>
    </footer>
    <!-- //footer -->
  </div>

 

색인

일반 문서를 HTML로 다음과 같은 규칙에 맞게 색인화 한다.

  • H1 : 서비스명
  • H2 : 메인메뉴, 본문, 이용약관 등
  • H3 : 세부 컨텐츠, 핵심 컨텐츠 등
  • H4 : 서브 컨텐츠
  • H5, H6 : 헤딩요소의 파편화를 불러일으킬 여지가 있으므로 가급적 사용하지 않는다.

 

Table

caption

캡션은 자신의 부모인 table과 같은 너비를 가짐. caption의 align (bottom,center,left,right,top(기본값))은 마크업흐름상 table의 최상위에 위치 해야함.

summary

Techniques of WCAG 2.0의 H73에서는 테이블의 행, 열을 2단계, 3단계로 정의하는 경우 summary에서 그 구조에 관한 것을 언급해 주어야 한다고함.

scope

읽어야 하는 방향을 지정해주면됨. scope="col"의뜻은 세로(column)로 읽어라. row는 가로(row)로 읽어라.

참고 URL : http://trio.co.kr/webrefer/html40/struct/tables.html#non-visual-rendering

id와 headers

scope와 같은 효과를 볼수 있지만, 마크업이 다소 늘어나게 됨.

summary, caption, scope, header 등을 사용할 경우 이를 스크린리더가 참조할 수는 있지만, 이러한 속성과 요소가 스크린리더만을 위한 것이 아니므로 HTML의 의미를 이해하고 이에 맞게 사용해야지 특정 브라우저나 사용자 기기만을 염두에 두고 HTML을 구성해서는 안됨. table내에 dl, ul, ol 등의 중복구조에 scope등을 쓰게 되는 마크업은 피해야함.

thead,tbody,tfoot

thead만 있으면 벨리데이터 오류. tfoot과 같은 경우 테이블의 가장 아래에 위치하며, 마크업의 흐름상 thead 다음 tfoot 다음 tbody 순으로 코딩해야함

colgroup

  • 세로열전체를 그룹화 함. 사용하는것을 권장함.(가변적인 데이터가 들어오더라도, 사이즈를 유지시켜줌)
    속성으로는 span,width,bgcolor 가 있으며, width 나 class하여 사용하는것을 권장.
    ie6버그로 table에 bg를 깔게되면, 세로열을 기준으로 각col당 repeat를 하게 되므로, bg:none 시켜주면 해결 됨.
    모바일에서 CSS로 %를 사용시에 대응이 안되므로, <col width="%" /> 로 사용해야함.
  • 테이블 내에 보더가 없는 경우에는 <col width="" />사용을 하며, 보더가 있는 경우에는 크로스브라우징시 1px 밀리는 이슈가 발생하여, <col class="" /> 를 사용하여 CSS에서 width를 핸들링함.
  • 제목이 세로형일 시 <col class="넘버링"> 사용

 

caption, summary 적용 방식

[ 권장 ] 

summary와 caption의 내용이 중복되어 summary 생략 가능

<table>
<caption>표의 제목</caption>
</table>
// 추후 HTML5에서 summary가 이슈가 된다면 summary만 삭제가능
반응형
저작자표시 비영리 동일조건

'Publishing' 카테고리의 다른 글

Naming Guide  (0) 2020.11.11
IR 기법  (0) 2020.11.11
CSS Convention  (0) 2020.11.11
HTML Elements  (0) 2020.11.11
HTML Grammar  (0) 2020.11.11

'Publishing'의 다른글

  • 현재글HTML Convention

관련글

티스토리 친구하기

티스토리툴바