5. 접근성
대다수 사용자에겐 별로 중요하지 않음
SEO
시맨틱해야만 검색 결과 상위에 노출되는 게 아님
이것이 중요하지 않다는 게 아니라 상대를 설득하거나
동기부여 하는데 다소 논리적 빈약함이 있다는 뜻
6. 코딩 규칙과 유지보수성
글로벌 기준의 코딩 규칙 확보, 유지보수성을 높임
의도의 명확성
개발자가 의도한 요소의 뜻을 명확하게 드러냄
협업 개발자간 커뮤니티를 위해 변수명 하나도 허투루 짓지 않듯
마크업 역시 동일한 관점에서 시맨틱을 바라봐야 한다.
7. 匠人
마크업하는 한 인간으로써 작가
(Editorial writer)나 디자이너의
의도를 정확히 이해하고 코드로
명확히 표현해야 할 책임이 있다
8. 강조에는 여러가지 의미가 있다.
<b> … </b>
문서 또는 문장에서 다른 글자와의 문체가 다른 키워드, 테마 등을 나타냄
<em> … </em>
문장의 주된 뉘앙스와 관련된 키워드나 내용을 강조함
<strong> … </strong>
문장에서 가장 주요한 항목이나 심각한 문제임을 드러내고 강조함
<mark> … </mark>
<dfn> … </dfn>
검색과 같은 특정 액션에 따라 결과적으로 주목이 필요한 부분을 나타냄
고유 명사나 전문 용어, 서비스 이름 등 특정 정의어를 나타냄
11. 강조 외에 부차적인 문의 상태는?
<small> … </small>
면책 사항, 주석 등 문서 속의 부차적인 내용을 나타냄
<del> … </del>
과거에 작성했지만 이제 참조할 필요가 없는 내용을 나타냄
<ins> … </ins>
새롭게 추가된 문자나 변경된 내용을 나타냄
<s> … </s>
정보가 낡아 관련 없는 정보가 됐거나 정확성이 보장되지 않는 내용을 나타냄
14. 문장의 상태 구별을 더욱 명확하게! - 1
<i> … </i>
소설속등장인물의생각이나대사,관용구,속담,고유명사등평범한글자구분됨을나타냄
<q> … </q>
짧은 인용문을 나타냄, 인용문이 길다면 <blockquote>을 사용
<u> … </u>
분명하게 발음할 수 없는 텍스트(타이포, 심볼, 오탈자, 한자 등)를 나타냄
<time> … </time>
시각, 일시 등의 시간 정보를 나타냄
15. 문장의 상태 구별을 더욱 명확하게! - 2
<abbr> … </abbr>
준말을 나타내며 title 속성으로 그 준말의 원형을 명시
<cite> … </cite>
책이나 신문, 텔레비전, 노래, 영화 등과 같이 참조(인용)하고 있는
창작물의 제목이나 작가명 또는 참조원 URL 등을 나타냄
<kbd> … </kbd>
사용자에게 제공하고 있는 입력 키(단축키나 명령키)를 나타냄
<address> … </address>
제작자나 책임자 등의 개인 / 조직의 연락처 정보를 나타내며 "주소"를
뜻하는게 아님
20. 보편적인 이름으로 각 폼의 이름을 정한다.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete
https://html.spec.whatwg.org/multipage/forms.html#autofill
21. HTML의 조각을 렌더링할 때는?
<template> … </template>
기본적으로 파싱은 되지만 렌더링되지 않으며 이를 복제하여 특정 DOM
요소의 자식 요소로 배치해 렌더링 시킬 때 사용
<template id="jsi-hoge">
<dl>
<dt></dt>
<dd></dd>
</dl>
</template>
<details> … </details>
개요와 상세 부분을 분리하고 사용자가 의사에 따라 상세 내용을
노출하고자 할 때 사용
<details id="jsi-hoge">
<summary>개요<span>...자세히보기</span></summary>
<p>자세한 내용</p>
</details>
HTML 5.1
24. 증분 검색(Incremental search)을 구현할 때는?
<datalist> … </datalist>
자식 요소로 <option>을 갖고 검색 키워드와 매치되는 요소 목록을
보여주는 UI를 만들때 사용
<input type="text" list="example" />
<datalist id="example">
<option>후보 1</option>
<option>후보 2</option>
<option>후보 3</option>
</datalist>
26. 모달 팝업(Modal Popup)을 구현할 때는?
<dialog> … </dialog>
대화 상자 또는 얼럿과 같은 팝업 UI를 구현할 때 사용
<dialog class="mdl-dialog">
<h4 class="mdl-dialog__title">Allow data collection?</h4>
<div class="mdl-dialog__content">
<p>
Allowing us to collect data will let us get you
the information you want faster.
</p>
</div>
<div class="mdl-dialog__actions">
<button type="button" class="mdl-button">Agree</button>
<button type="button" class="mdl-button close”>
Disagree
</button>
</div>
</dialog>
HTML 5.2
