meta 태그 내 페이지 관련 키워드는 SEO(Search Engine Optimization) 성능을 강화한다. 또한 검색 엔진에서 <meta name="description" content="설명">에 기반해 페이지 관련 설명을 출력한다.
플랫폼 별 특수 meta 태그
Facebook은 <meta property="og: " content=""> 형태를 사용하고, 안드로이드 및 ios는 <meta property="al: " content=""> 그리고 twitter는 <meta property="twitter: " content="">를 사용해 보다 자세한 컨텐츠 미리보기 기능을 제공한다.
meta 태그 키워드 기능
<meta name="keywords" content="key, word"> 기능은 더이상 제공되지 않는다. (악성 스팸이 해당 기능을 악용해 브라우저가 해당 기능을 사용하지 않게 됨.)
h1은 페이지당 하나, 3개보다 많은 종류의 heading(<h$>)을 사용하지 않아야 한다.
Heading과 SEO
검색 엔진은 heading을 페이지 내에서 우선 순위로 삼으며 따라서 heading에는 강조하고자 하는 중요 키워드로 이루어져야 한다.
Heading과 접근성
시각장애인들을 위한 프로그램은 heading을 읽어줌으로써 원하는 정보에 빠르게 접근할 수 있게 하므로 사이트 이용에 어려움을 겪는 사용자를 위해 적합한 Heading을 설정해야 한다.
Heading과 그럴 듯한 Heading의 차이
h 태그를 이용한 것과 같은 폰트 사이즈를 가진 span 태그는 크기만 같다. 상기의 SEO 이점과 접근성을 향상시키기 위해서는 h 태그를 사용해야 한다.
<em>(Emphasis:강한 어조)의 적절한 사용
<em> 태그는 화면판독기에서 다른 톤으로 읽힘, 단순히 css에서 italic 체로 스타일링하는 것과 다른 의미를 지님. 따라서 단순히 스타일링을 위해 italic 체를 사용하는 경우 <em> 태그의 사용은 지양하고 css를 통해 구현하거나 <i> 태그를 사용해야 한다.
<strong>(Strong importance:아주 중요)의 적절한 사용
<em> 태그와 마찬가지로 화면판독기에서 다른 톤으로 읽힘, 따라서 스타일링의 목적으로 사용은 지양하며 스타일링이 목적인 경우, <span> 태그에 css 스타일링을 추가하거나 <b> 태그를 사용해야 한다.
<i>, <b>, <u> 태그의 사용
<i>: 외래어, 분류학 명칭, 전문 용어, 생각 등 <b>: 주요 단어, 제품 이름, 주요 문장 등 <u>: 적절한 이름, 잘못된 철자 등 (사용자들은 밑줄을 하이퍼링크와 강하게 연관시키므로 링크에만 밑줄을 사용하는 것이 가장 좋다.)
HTML 문서의 특정 부분에 링크하는데 document fragment(문서 조각)를 사용할 수 있다. 링크를 걸고자 하는 요소(element)에 id 속성을 지정하고 URL의 끝에 #(hash) 문자와 id에서 지정한 id명을 적는다.
<!-- namul-muchim.html --><h2id="how-to-cook">HOW TO COOK</h2>
<!-- 아래의 링크는 동일 폴더 내에 존재하는 namul-muchim.html 파일에서 HOW TO COOK으로 연결한다. --><p>
나물 무침의 구체적인 요리 방법에 대해 알고 싶다면
<ahref="namul-muchim.html#how-to-cook">요리 방법</a>을 참고하세요!
</p>
링크는 최근 문맥이나 사용자가 좋아하는 도구에 상관없이 모든 사용자에게 접근성이 좋아야 한다.
스크린리더 사용자들은 페이지에서 링크를 통해 건너 뛰는 것을 좋아하고 문맥을 무시하고 링크를 읽는 것을 좋아한다.
검색 엔진은 링크 텍스트를 목표 파일을 색인하는데 사용하므로 링크되는 곳을 설명하는 주요 키워드를 사용해 작성하는 것이 좋다.
비주얼 리더는 페이지의 모든 단어를 세세히 읽어보기 보다는 대충 훑어보는데, 그렇기에 링크와 같은 두드러지는 곳으로 시선이 이끌린다. 여기에 자세히 서술된 링크 텍스트가 존재한다면 유용할 것이다.
지저분해 보이므로 URL을 링크 텍스트에 쓰지 않아야 한다.
링크 텍스트에 “링크” 혹은 “~로의 링크” 식의 용어는 사용하지 않는다. 스크린 리더에서 링크는 링크임을 알려주며(반복은 소음으로 들림) 시각을 사용하는 이용자들도 링크의 표시가 다르게 되어 있기 때문에 쉽게 알 수 있다.
링크 텍스트는 가능한 짧게 작성한다. 스크린 리더는 모든 링크 텍스트를 설명하기에 짧은 것이 도움이 된다.
서로 다른 곳에 중복되는 링크 텍스트가 존재하지 않도록 최소화한다. 스크린 리더는 모든 링크 텍스트를 읽으므로 링크는 필요한 곳에만 표시하고 나머지는 일반 텍스트만 보여줘도 충분한다.
<!-- 좋은 예시 --><p>
나물 무침의 구체적인 요리 방법에 대해 알고 싶다면
<ahref="namul-muchim.html#how-to-cook">나물무침 요리 방법</a>을
참고하세요!
</p><!-- 나쁜 예시 --><p>
나물 무침의 구체적인 요리 방법에 대해 알고 싶다면
<ahref="namul-muchim.html#how-to-cook">여기를 클릭</a>하세요!
</p>
다운로드, 스트림, 팝업창과 플래시 무비와 같은 기대치 않은 효과 등이 발생하는 경우 명확한 설명을 더해 혼란을 줄인다. 예를 들어:
대역폭이 낮다면 링크를 클릭했을 때 다수의 메가바이트 다운로드가 시작 될 수 있다.
Flash player가 설치되어 있지 않다면 갑작스레 Flash 관련 페이지로 연결될 수 있다.
다운로드로 연결할 때는 download 속성을 사용한다. download 속성에 기본 세이브 파일명을 지정할 수 있다.
<p><ahref="https://www.example.com/a/report"download="a-company-report.pdf">
A 회사 신용 보고서 (PDF, 5MB)
</a></p><p><ahref="https://www.example.com/video-stream"target="_blank">
IMF 긴급 속보 동영상 보기(별도의 탭, HD 화질)
</a></p><p><ahref="https://www.example.com/domino-game"target="_blank">
도미노 게임하기(별도의 탭, Flash 필요)
</a></p>
href 속성에 mailto:메일명 형식으로 작성해 해당 메일로 보내는 창을 연다. mailto:에 메일명을 적지 않으면 수신자가 빈 상태가 되는데 사용자가 원하는 상대에게 “공유”하고자 할 때 유용하다.
mailto:에는 cc, bcc, subject와 body(body는 참된 header field에는 속하지 않음)와 같은 header fields를 추가할 수 있다. ? question mark를 통해 메인 URL를 구분하고 & ampersand mark를 통해 각각의 필드를 구분한다.
<!-- cc, bcc는 수신자, subjecct 메일 제목, body 메일 내용 --><ahref="mailto:nowhere@example.com?cc=name2@exmaple.com&bcc=name3@example.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
cc, bcc에게 subject와 body가 미리 쓰여진 이메일 보내기
</a>
한 개 혹은 복수의 paragraph 그리고 리스트 등 block level content의 섹션이 인용될 때 <blockquote> element 안에 감싼다. 그리고 <blockquote>의 cite 속성에서 인용한 소스를 가리키는 URL을 적는다. 여기에서 cite 속성은 유용한 듯 하지만 브라우저나 스크린리더에서 썩 유용하지는 않다.
아래는 blockquote 예시입니다.
The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.
<p>아래는 blockquote 예시입니다.</p><blockquotecite="https://www.example.com/en-US/docs/Web/HTML/Element/blockquote"><p>
The <strong>HTML <code><blockquote></code> Element</strong> (or
<em>HTML Block Quotation Element</em>) indicates that the enclosed text
is an extended quotation.
</p></blockquote>
The quote element — <q> — is intended for short quotations that don't require paragraph breaks.
<!-- q 태그는 인용 표시("")만을 더하고 일반적인 텍스트처럼 렌더링 된다. --><p>
The quote element — <code><q></code> — is
<qcite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
intended for short quotations that don't require paragraph breaks.
</q></p>
<address> element를 통해 contact 정보에 대해 마크업할 수 있다. <address> element는 <article> 혹은 <body> element 내에서 contact 정보를 표기하기 위한 용도로만 사용되어야 한다. 예를 들어 사이트의 footer에 사용하거나 기사의 저자를 표기할 때 사용하고 페이지의 내용과 관계없는 주소들을 마크업하는 곳에는 사용하지 않는다.
Mauv Seoul 00-gu South Korea
Tel: 01234 567 890
Email: mauvpark@gmail.com
<address><p>
Mauv<br/>
Seoul<br/>
00-gu<br/>
South Korea
</p><ul><li>Tel: 01234 567 890</li><li>Email: mauvpark@gmail.com</li></ul></address>
날짜, 화학식, 수학 등식을 사용할 때 superscript(<sup>)와 subscript(<sub>)를 사용할 수 있다.
My birthday is on the 25th of May 2001.
Water's chemical formula is H2O
If x2 is 9, x must equal 3 or -3.
<p>My birthday is on the 25<sup>th</sub> of May 2001.</p><p>Water's chemical formula is H<sub>2</sub>O</p><p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>
<time>element를 통해 기계가 읽을 수 있는 형태의 시간과 날짜로 마크업 할 수 있다. 예를 들어 페이지에 있는 모든 이벤트 날짜를 자동적으로 잡아 캘린더에 넣고 싶다면, <time> element는 모호하지 않고 machine-readable 한 time/date를 추출할 수 있도록 돕는다.
<!-- Standard simple date --><timedatetime="2016-01-20">20 January 2016</time><!-- Just year and month --><timedatetime="2016-01">January 2016</time><!-- Just month and day --><timedatetime="01-20">20 January</time><!-- Just time, hours and minutes --><timedatetime="19:30">19:30</time><!-- You can do seconds and milliseconds too! --><timedatetime="19:30:01.856">19:30:01.856</time><!-- Date and time --><timedatetime="2016-01-20T19:30">7.30pm, 20 January 2016</time><!-- Date and time with timezone offset --><timedatetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time><!-- Calling out a specific week number --><timedatetime="2016-W04">The fourth week of 2016</time>
맞는 작업을 수행하기 위해서는 그에 맞는 element를 사용해야 한다. 단순히 컬러와 폰트 사이즈를 변경하는 것은 시각을 가진 사람들의 이목을 끌 수는 있겠지만 시각 장애인들의 경우 컬러와 폰트사이즈는 아무 의미가 없다(12명 중 한 명의 남자, 200명 중 한 명의 여자는 색맹이며 세계 인구의 4-5%가 시각장애인임). 적절한 element의 사용은 스크린리더로 메인 콘텐츠를 찾거나 내비게이션을 찾는 등의 기능적 수행을 올바르게 수행할 수 있게 돕는다.
머리말(header): <header>.
내비게이션 바(navigation bar): <nav>.
메인 콘텐츠(main content): <main>을 사용하며 다른 서브섹션이 있을 경우 <article>, <section> 그리고 <div>를 함께 사용한다.
사이드바(sidebar): <aside>; 주로 <main> 안에 위치시킨다.
꼬리말(footer): <footer>.
<!DOCTYPE html> My page title
Header
Article heading
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
Subsection
Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.
Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.
Another subsection
Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.
Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.
<main>은 페이지의 유일무이한 콘텐츠를 위한 element다. 따라서 <main>은 페이지 당 하나만 사용해야 하며 <body> 안에 위치시킨다. <main>은 <body> 외의 다른 elements 안에 위치시키지 않는다.
<article>은 페이지의 다른 부분 없이도 온전히 이해될 수 있는 관계 콘텐츠로 구성된 블록을 설정한다.(e.g. 하나의 블로그 포스트)
<section>은 <article>과 비슷하나 하나의 기능(e.g. 미니맵, 일련의 기사 헤드라인과 요약) 혹은 테마를 구성하는 페이지의 한 부분을 그룹화하는 역할에 더 적합하다. 각각의 섹션은 헤딩(e.g. <h1>)과 함께 시작하고는 한다. 맥락에 따라 <article>은 <section>이 될 수 있고 그 반대가 될 수도 있다.
<aside>는 메인 콘텐츠와는 직접적인 관계는 없지만 간접적으로 추가 정보를 제공할 수 있는 콘텐츠를 포함한다.(관계 링크, 저자 bio, 용어사전 등)
<header>는 도입부 콘텐츠로 구성된 그룹을 나타낸다. <body>의 child일 경우 웹페이지의 global header로 기능하고 <article> 혹은 <section>에서는 해당 섹션의 header로 기능한다.(title과 headings와 헷갈리지 말 것)
특별한 의미를 주지 않고 elements를 포장하려면 <div>와 <span>을 사용할 수 있다.
<span>은 일직선(블록 단위가 아닌) 상의 비의미론적 element기 때문에 콘텐츠를 감쌀 수 있는 더 나은 의미론적 텍스트 element가 존재하지 않을 경우 부득이하게 사용하거나 특별한 의미를 두고 싶지 않은 경우에 사용할 수 있다.
<div>은 블록 레벨의 비의미론적 element로 더 나은 의미론적 블록 element가 없을 경우에 한해 사용하거나 특별한 의미 없이 사용하고 싶을 경우에만 사용한다.
주의: <div>가 사용하기 편하기 때문에 과하게 사용하는 경우가 많은데 이것은 의미론적 가치를 가지지 못하므로 작성한 HTML 코드가 지저분해 보일 수 있다. 따라서, 문서를 유지하거나 업데이트 하는데 있어 어려움을 겪지 않기 위해서는 이 element를 최소한으로 사용하는 것이 좋다.
