-
접근성과 Semantic HTML
접근성이란 장애에 관계없이 모든 사람이 동등하게 웹을 사용할 수 있어야 한다는 원칙이다. 웹 기술에는 접근성을 위한 많은 기능이 내장되어 있으며 웹 개발자는 사용자를 배제하지 않도록 이를 알아야 한다.
위에서 말한것 처럼 HTML에는 접근성을 위한 대단히 많은 기능이 내장되어 있다. 어지간한 규모의 회사가(그 회사도 잘 모르겠다)아니라면 웹 개발시에 접근성을 크게 신경쓰진 않을것이다. 아마 콘텐츠 소비자가 콘텐츠 기획, 디자인, 개발을 한 사람과 동등한 위치라고 생각하기 때문일 것이다.
이 글에서는 접근성 기능에 대해 아주 깊이있게 다루진 않고 쉽게 지킬수 있는 몇가지 내용에 대해 다루고자 한다. JSX와, ESLint를 사용할 수 있는 프로젝트를 진행한다면 몇몇 플러그인을 통해 해결할 수도 있는 내용도 포함 되어있다.
간단하게 사용가능한 몇가지 접근성 관련 HTML
1. 레이블을 모든 폼 컨트롤과 연결
대부분의 경우 모든 독자가 필요한 입력을 이해하는 데 도움이 되도록 레이블이 필요함
<label for="username">사용자 이름</label>
<input type="text" id="username" name="username" />
2. 모든 이미지에 대체 텍스트 포함
모든 정보 및 기능 역할을 하는 이미지에 대체 텍스트 (alt)가 포함되어있는지 확인. 장식용 이미지의 경우 빈 텍스트라도 입력한다. 그러면 스크린 리더가 해당 이미지는 장식용 이미지라고 판단한다.
또한 단순 장식용 이미지라면 CSS의 background 속성을 사용해도 무방하다.
<img src="clear_sky.png" alt="맑게 개인 하늘입니다." />
3. 페이지에 언어 속성값 추가
검색 엔진과 브라우저를 지원하기 위해서 이며, 검색 엔진과 브라우저는 해당 lang 값에 맞게 여러가지 지원을 해준다.
<html lang="ko-KR"></html>
4. Semantic HTML로 적절한 마크업
올바름에 가깝게 작성된 Semantic(의미론적) HTML일수록 스크린 리더가 구문 분석을 더 잘 할수 있으며, SEO 측면에서도 많은 도움이 된다. 별도 포스트에서 자세히 다뤄보겠다.
<html>
<head>
<title>Semantic HTML 문서</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Article heading</h1>
<section>
<h2>Content heading</h2>
<p>article content</p>
</section>
</article>
</main>
<section>
<h1>Section heading</h1>
<p>Section content</p>
</section>
<aside>Auxiliary content</aside>
<footer>
<figure>
<img src="logo.png" alt="" />
<figcaption>Slogan</figcaption>
</figure>
</footer>
</body>
</html>
5. 사용자가 실수를 방지하고 수정할 수 있도록 지원
사용자가 사이트에서 양식을 작성할 때, 명확한 지침 및 오류 메시지 그리고 알림을 제공한다.
사용자가 양식을 입력하다 오류가 발생하는 경우에 다음과 같은 지원을 할 수 있다.
사용자가 문제의 위치를 찾을 수 있도록 지원
구체적이고 이해하기 쉬운 설명 제공
어떻게 수정하면 되는지 제안 표시
<label for="phone">휴대폰 번호</label>
<input
id="phone"
name="phone"
type="tel"
pattern="^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$"
aria-describedby="phone-desc"
/>
<p id="phone-desc">예) 010-1234-1234</p>
6. 코드내의 엘리먼트 순서가 논리적으로 전개되는지 확인
제공하려고 하는 정보가 코드내의 엘리먼트 순서와 일치하는지 확인, 좋은 방법은 CSS를 제거하고 비교해보는 것이다.
7. 사용자의 상황에 맞게 바뀌는 레이아웃 작성
사용자의 여러 장치나 상황에 맞게 레이아웃이 적절히 변경되도록 작성. 폭 넓게 보면 반응형 레이아웃을 작성하는 것이다.
8. 비표준 대화형 엘리먼트에 대한 의미 제공
WAI-ARIA를 사용하여 아코디언과 같은 커스텀 버튼과 같은 커스텀 위젯의 기능 및 상태에 대한 정보를 제공한다.
아래는 아코디언과 같은 버튼을 구현할때의 예시이다. HTML 코드가 온전히 작성하려면 추가적인 JavaScript나 CSS코드가 필요하다. (아코디언이 접히거나 펴질때때, 키보드 이벤트에 반응할때 등)
<nav aria-label="Main Navigation" role="navigation">
<ul>
<li><a href="...">Home</a></li>
<li><a href="...">Shop</a></li>
<li class="has-submenu">
<a aria-expanded="false" aria-haspopup="true" href="...">SpaceBears</a>
<ul>
<li><a href="...">SpaceBear 6</a></li>
<li><a href="...">SpaceBear 6 Plus</a></li>
</ul>
</li>
<li><a href="...">MarsCars</a></li>
<li><a href="...">Contact</a></li>
</ul>
</nav>
9. 모든 대화형 엘리먼트가 키보드로 접근 가능한지 확인
키보드 액세스는 메뉴, 마우스 오버 정보, 접혔다 펴지는 아코디언 또는 미디어 플레이어와 같은 대화형 요소를 개발할 때 꼭 고려해야 한다. tabindex=0을 사용하여 일반적으로 포커스를 받지 않는 엘리먼트 (일반적으로 <div>나 <span>)을 상호작용에 사용할 때 포커스를 받도록 순서에 추가한다. 온전하게 동작하게 하기 위해서는 JavaScript 코드가 필요하다.
10. <button> 과 <a>
현재 페이지에서 상호작용 작업을 하는 모든 곳에 <button>을 사용한다.
다른 페이지로 이동하는 상호작용을 하는 곳에 <a>를 사용한다.
<a>의 경우 별 문제가 없지만 <button>의 경우 하고자 하는 것에 대해 구현하기가 힘든 경우가 있다. <button>은 기본적으로 인라인 엘리먼트 이므로 태그 안에 <p> <div> 등의 블록 수준 엘리먼트를 사용할 수가 없다. 가령 버튼 내부에 텍스트, 이미지, 또 다른 버튼등이 중첩되어 있는 엘리먼트를 만들기 위해선 어떻게 해야할까? 구현하고자 하는데 적절한 시멘틱 태그가 없다면?
두 경우 모두 커스텀 컨트롤을 작성해야 한다. 중요한 접근성 원칙은 커스텀 컨트롤에 역할과 이름이 필요하다는 것이다.
HTML는 글로벌 속성중 name이라는 속성이 있다. 이 name은 컴퓨터가 읽기 위한 값이며 보통 데이터가 제출될 때 키값으로 사용된다. 이 이름은 사용자에게 도움이 되지 않는다. 즉, 접근성 기술이 아닌 것이다.
접근 가능한 이름을 지정하려면 aria-label속성을 사용해야 한다. 위에서 얘기한 아코디언 버튼을 하나 만든다고 가정하면 아래처럼 작성할 수 있다.
<div role="button" aria-label="Open Arcodian">아코디언 버튼!</div>
role="button"을 통해 div에 구조와 의미를 부여하고 aria-label="Open Arcodian"으로 접근 가능한 이름을 부여했다. 아코디언은 처음에 접혀있으므로 다음 속성을 통해 접힘 상태에 접근 가능하게 할 수 있다.
<div role="button" aria-label="Open Arcodian" aria-expanded="false">
아코디언 버튼!
</div>
아래처럼 아이콘이 이미지가 아닌 폰트인 경우
<i class="navbarIcon" role="img" aria-hidden="true"></i>
이미지 역할을 하지만 접근성 API에는 노출되지 않도록 aria-hiddn="true"를 사용했다. 이런 경우 아이콘 밑에 텍스트 캡션이 있어야 함을 잊지 말자.
이외에도 aria- 속성은 굉장히 많으니 접근성에 대해 깊이 공부중이라면 아래 URL로 들어가 참조해보자.
MDN - ARIA states and properties
11. 색상이 유일한 시각적 지표가 되어서는 안됨
색맹, 색약 등의 시각적 장애가 있는 사용자에게는 의도한 색상대로 보이지 않을 것이므로 색상이 유일한 시각적 지표가 되선 안된다.
12. outline을 제거하지 말것
무엇을 하든 outline을 제거하지 말것. 아래의 CSS 한줄은 수많은 접근성을 해치고 있다.
outline: 0;
대부분의 브라우저는 outline 속성을 사용하여 대화형 요소의 시각적 포커스를 표시한다. 두 가지 선택지가 있다. 그대로 두거나 브라우저의 기본 스타일이 싫다면 커스텀 하자. 제거하는 것은 옵션이 아니다.
13. autocomplete 속성
몇몇 폼 컨트롤 엘리먼트에는 autocomplete 속성을 사용할 수 있는데 이것은 모든 사람에게 편리하다. 이것은 운동 장애나 인지 장애가 있는 사용자에게 매우 유용하다. 이들이 양식을 작성하는 것은 어려울 수 있으며 autocomplete 속성은 종종 도움의 손길을 제공한다. 요새의 브라우저는 매우똑똑하게 양식을 자동으로 채워주므로 사용하지 않을 이유가 거의 없다.
그 외 추가적으로 읽어보면 좋은 내용
접근성 랜드마크
-
Semantic HTML
Semantic(의미론적) HTML 이란?
시맨틱(의미론적) HTML은 HTML 마크업을 사용하여 웹 페이지의 모양이 아닌 콘텐츠의 의미를 전달하는 것을 말한다. 브라우저와 개발자 모두에게 그 의미를 명확하게 설명한다.
이 접근 방식에는 몇 가지 이점이 있다.
첫째, 검색 엔진 및 기타 기술이 사이트 콘텐츠의 구조와 목적을 이해하는 데 도움이 된다.
둘째, 이전 접근성 포스트에서도 말했듯이 보조 기술을 사용하여 웹을 탐색하는 사람들이 콘텐츠에 더 쉽게 액세스할 수 있도록 한다.
셋째, 각 요소의 목적이 명확하기 때문에 코드를 더 쉽게 읽고 유지 관리할 수 있다.
이런 이점을 획득하기 위해서 시맨틱 HTML은 필수라고 할 수 있다. 가장 일반적인 시맨틱 HTML 태그와 이를 효과적으로 사용하는 방법을 알아보자.
시맨틱한 요소의 예: <form> <table> <article>등…
시맨틱하지 않은 요소의 예: <div> <span>등…
시맨틱 HTML 태그와 용도
<header>
<header>는 웹 페이지의 상단 섹션을 마크업하는 데 사용되며, 일반적으로 기본 제목이나 로고, 내비게이션 및 사이트의 모든 페이지에 공통적인 기타 요소를 포함한다. <header>태그를 사용하면 페이지의 헤더와 기본 콘텐츠를 명확하게 구분하여 사용자가 웹사이트를 더 쉽게 이해하고 탐색할 수 있다.
<body>의 자식인 경우 웹 페이지의 전체 헤더를 정의하지만 <article> 또는 <section>의 자식인 경우 해당 섹션에 대한 특정 헤더를 정의한다.
주 컨텐츠
하나의상의 제목요소 (h1 ~ h6)
로고 또는 아이콘
저자 정보
여러개의 <header>를 하나의 문서내에 가질수있다. 하지만 <header>는 <footer>, <address>또는 다른 <header>에 중첩되면 안된다.
<article>
<header>
<h1>점심을 뭐먹을지는 항상 고민된다.</h1>
<p>직장인들의 점심메뉴 고민은 늘 크리티컬한 이슈이다.</p>
</header>
<p>콘텐츠...</p>
</article>
<nav>
<nav>태그는 탐색 링크가 포함된 웹 페이지의 섹션을 마크업하는 데 사용된다. 태그를 사용하면 웹사이트의 이 섹션이 탐색을 위해 특별히 설계되었음을 사용자와 검색 엔진 모두에 나타낼 수 있다.
모든 링크가 <nav>안에 있어야 하는건 아니다. 주요한 탐색링크 집합의 컨테이너로 사용된다.
<nav>
<a href="/html">HTML</a>
<a href="/css">CSS</a>
<a href="/javascript">JavaScript</a>
<a href="/react">React</a>
</nav>
<main>
<main> 태그는 웹 페이지의 기본 콘텐츠 영역을 마크업하는 데 사용된다. 태그를 사용하면 페이지의 어느 부분에 주요 콘텐츠가 포함되어 있는지 사용자와 검색 엔진 모두에게 명확하게 알릴 수 있다.
<main>태그는 이상적으로 페이지에 한번만 사용해야 한다.
<article>
<article> 태그는 블로그 게시물, 뉴스 기사 또는 제품 리뷰와 같은 독립형 콘텐츠를 나타내는 데 사용된다. 태그 내의 콘텐츠는 독립적이고 의미 있어야 하며 제목, 단락, 이미지 및 기타 유형의 콘텐츠를 포함할 수 있다. 독립적이라는 콘텐츠가 그 자체로 의미가 있어야 함을 말한다. 웹 사이트의 나머지 부분과 독립적이다.
<article class="all-browsers">
<h1>가장 유명한 브라우저</h1>
<article class="browser">
<h2>구글 크롬</h2>
<p>
구글 크롬은 2008년에 등장한 브라우저로서 현재 세계에서 가장 점유율이 높은
브라우저 입니다!
</p>
</article>
<article class="browser">
<h2>모질라 파이어폭스</h2>
<p>파이어폭스는 모질라 재단에서 개발한 오픈소스 브라우저 입니다.</p>
</article>
<article class="browser">
<h2>마이크로소프트 엣지</h2>
<p>
마이크로소프트 엣지는 2015년에 등장하여 기존 브라우저인 인터넷
익스플로러를 대체합니다.
</p>
</article>
</article>
<aside>
<aside>태그는 웹 페이지의 기본 콘텐츠와 관련이 있지만 필수적인 부분이 아닌 콘텐츠를 마크업하는 데 사용된다. 여기에는 보충 정보, 광고 또는 관련 기사와 같은 것이 포함될 수 있다. 주로 사이드바 처럼 배치되며 주변 콘텐츠와 간접적으로 연관된다.
<p>
저는 지난주에 강원도 속초를 다녀왔습니다. 일출이 아름다웠고 장칼국수가
맛있었습니다.
</p>
<aside>
<h4>강원도 속초</h4>
<p>
속초시는 대한민국 강원특별자치도 동해안 북부에 위치한 시이다. 시의 서쪽으로
설악산 국립공원이 있고, 시의 중심부에는 석호인 영랑호와 청초호가 있다.
동해에는 한류와 난류가 교류하여 어족이 풍부하기 때문에 동명항과 대포항을
중심으로 수산업과 관광업이 발달하였다.
</p>
</aside>
<section>
<section>태그는 주제별로 그룹화된 웹 페이지의 섹션을 마크업하는 데 사용된다. 여기에는 긴 기사의 하나의 장을 담당하는것을 주로 한다. W3C의 HTML 문서에 따르면 “섹션은 일반적으로 제목이 있는 내용의 주제별 그룹이다.”라고 표현한다.
각 섹션을 제목으로 시작하는 것이 가장 좋다. 또한 컨텍스트에 따라 섹션을 다른 섹션이나 아티클로 분할할 수 있다.
<section>
<h1>WWF</h1>
<p>
세계자연기금(WWF)은 국제기구입니다. 보존, 연구, 복원에 관한 문제를 연구하고
있습니다. 이전에는 세계야생생물기금(World Wildlife Fund)으로 명명되었습니다.
WWF는 1961년에 설립되었습니다.
</p>
</section>
<footer>
<footer>태그는 저작권 정보, 연락처 세부 정보 또는 소셜 미디어 프로필 링크와 같은 항목을 포함할 수 있는 웹 페이지의 하단 섹션을 표시하는 데 사용된다. 문서 또는 섹션의 바닥글을 정의하는데 주료 사용되며 하나의 문서에 여러개가 있을수 있다.
<footer>
<p>저작자: arqhive</p>
<p>
<a href="mailto:hgystation@gmail.com">hgystation@gmail.com</a>
</p>
</footer>
<figure>, <figcaption>
<figure> <figcaption>태그는 웹 페이지의 기본 콘텐츠에서 참조되는 독립적인 콘텐츠를 마크업하는 데 사용된다. 태그는 콘텐츠 자체를 마크업하는 데 사용되며 태그는 콘텐츠에 대한 캡션 또는 설명을 마크업하는 데 사용된다.
참고: 접근성의 관점에서, 캡션과 alt 텍스트는 다른 역할을 한다. 캡션은 이미지를 볼 수 있는 사람들에게도 도움이 되지만, alt 텍스트는 이미지가 없을 때와 같은 기능을 제공한다. 따라서, 캡션과 alt 텍스트는 같아서는 안된다. 왜냐하면 이미지가 없을 때 둘 다 나타나기 때문이다.
<figure>는 이미지일 필요가 없다. <figure>는 다음과 같은 독립적인 컨텐츠 단위이다.
여러 이미지, 코드 스니펫, 오디오, 비디오, 방정식, 표 등등…
<figure>
<img src="image.jpg" alt="Image description" />
<figcaption>이미지 캡션</figcaption>
</figure>
<detail>, <summary>
<detail>및 <summary>태그는 콘텐츠의 축소 가능한 섹션을 표시하는 데 사용된다. <detail>태그는 섹션의 제목을 마크업하는 데 사용되며 <summary>태그는 콘텐츠 자체를 마크업하는 데 사용된다. 아코디언을 구현할때 적절한 태그이다.
<details>
<summary>클릭하면 펼쳐집니다.</summary>
<p>펼쳐질때 보이는 콘텐츠 입니다.</p>
</details>
<mark>
<mark>태그는 어떤 이유로 강조 표시된 텍스트를 마크업하는 데 사용된다. 여기에는 검색 결과 또는 사용자가 강조 표시한 텍스트와 같은 항목이 포함될 수 있다.
<p>여기에 <mark>하이라이트</mark> 텍스트가 있습니다.</p>
<time>
<time>은 기계가 읽을 수 있는 형태로 날짜와 시간을 표현할 때 사용한다. 예를 들어, 일정의 경우 사용자 에이전트가 자동으로 달력에 일정을 추가할 수 있도록 정확한 일시를 나타낼 수 있다. 한가지 주의할점은 datetime속성은 정해진 포맷으로만 입력해야 하는 것이다.
<p>
다음 이벤트가 일어날 날짜:
<time datetime="2024-02-25">2024년 2월 25일</time>.
</p>
<progress>
<progress>태그는 진행률 표시줄을 표시하는 데 사용된다. 태그를 사용하면 사용자가 작업 진행 상황을 더 쉽게 이해할 수 있다.
<progress value="50" max="100"></progress>
Italic, Bold, Underline
위에서 이야기했던 요소들은 관련된 의미들을 명확히 구분한다. 그러나 <b>, <i>, <u>의 상황들은 좀 어지럽다. 이 요소들은 CSS가 형편없이 지원되거나 완전히 지원되지 않는 경우에 이탤릭체 또는 밑줄 등을 표현할 수 있도록 고안되었다. 의미론적이 아닌 표현에만 영향을 주는 이와 같은 요소들은 현재적 요소로 알려져 있으며, 더 이상 사용되어서는 안된다. 앞에서 살펴본 바와 같이 의미론은 접근성, SEO 등에 매우 중요하기 때문이다.
HTML5 에서는 <b>, <i>, <u> 를 조금 혼란스럽긴 하지만 새로운 의미론적 역할로 재정립 하였다.
<i> 요소는 과거로부터 줄곧 기울임꼴로 전달되는 의미를 전달하기 위해 사용된다. 외래어, 분류학 명칭, 전문 용어, 생각…
<b> 요소는 과거로부터 줄곧 굵은 글씨로 전달되는 의미를 전달할 때 사용한다. 주요 단어, 제품 이름, 주요 문장…
<u> 요소는 과거로부터 줄곧 밑줄을 치는 것으로 전달되는 의미를 전달할 떄 사용한다. 적절한 이름, 잘못된 철자…
의미가 정립되어 있긴 하지만 어디까지나 과거로부터 현재까지 전달되는 의미이지 진정한 의미론적 요소라고 보기는 힘들다. 위에서 말했듯이 <b>, <i>, <u> 요소는 사용하지말고 필요하다면 CSS를 이용해 구현하자.
위의 3요소는 스크린리더가 아무런 처리도 하지 않는다.
비의미론적 요소
때로는(이라고 쓰고 굉장히 자주) 일부 항목을 함께 그룹화하거나 일부 콘텐츠를 래핑하는 이상적인 의미 체계 요소를 찾을 수 없는 상황에 직면하게 된다. 때로는 요소 집합을 함께 그룹화하여 일부 CSS 또는 JavaScript를 사용하여 단일 엔터티로 모두 영향을 줄 수 있다. 이와 같은 경우 HTML은 <div> 및 <span> 요소를 제공한다. 가급적이면 적절한 클래스 속성과 함께 사용하여 쉽게 타겟팅 할 수 있도록 일종의 레이블을 제공해야 한다(WAI-ARIA 이용).
<span>은 인라인 비의미론적 요소로, 콘텐츠를 래핑할 더 나은 의미론적 텍스트 요소를 생각할 수 없거나 특정 의미를 추가하고 싶지 않은 경우에만 사용해야 힌다.
<div>는 블록 수준의 비의미론적 요소로, 사용할 더 나은 의미론적 블록 요소를 생각할 수 없거나 특정 의미를 추가하고 싶지 않은 경우에만 사용해야 한다. 예를 들어, 이커머스 사이트에서 시간을 보내는 동안 언제든지 불러올 수 있는 장바구니 위젯이 있다.
경고: div는 사용하기 너무 편리해서 많이 사용하기 쉽다. 의미론적 가치가 없기 때문에 HTML 코드를 복잡하게 만들 뿐이다. 더 나은 의미 체계 솔루션이 없을 때만 사용하고 사용량을 최소한으로 줄이지 않으면 문서를 업데이트하고 유지 관리하는 데 어려움을 겪을 것이다.
-
HTML 미세팁 모음
HTML 미세팁 모음
짚고 넘어가야할 HTML 내용이나, 미세팁 등을 정리해 본다.
(내가 알아낼수록 내용 더욱더 추가됨 😎)
엘리먼트 관련
<img> 엘리먼트에는 src뿐 아니라 alt도 필수 속성이다!
<h1> 과 같은 제목 엘리먼트를 이용해 텍스트를 크거나 굵게 만들면 안된다! 제목에만 사용하자.
<picture> 엘리먼트는 장치별 적합한 이미지를 사용해 적절한 대역폭을 사용하고 싶은 경우, 여러 확장자를 추가해 여러 브라우저에 대응하려는 경우 사용한다.
많은 <meta> 기능들이 더이상 사용되지 않는다. 대표적으로 <meta name="keywords" content="fill, in, your, keywords, here"> 같은 다른 검색 용어에 대해 해당 페이지의 관련성을 부여하기 위해 검색 엔진에 키워드를 제공하는 기능이였는데, 스팸 발송자들이 키워드 목록에 수백 개의 키워드를 채워버리는 악용 사례가 생겨 버렸기 때문에 이것들은 검색 엔진들이 아예 무시를 해버리게 되었다.
속도를 향상하기 위해 메인 콘텐츠가 완전히 로딩된 이후에 JavaScript로 <iframe>의 src 속성을 설정하는 편이 좋다. 웹 페이지를 더 빠르게 이용할 수 있고 SEO 측정 시 중요한 지표인 웹 페이지 로딩 시간을 단축할 수 있다.
페이지 관련
Favicon은 작은 이미지이므로 대비가 높은 단순한 이미지여야 한다.
URL을 링크 텍스트의 일부로 반복하지 않는다. URL이 보기 흉하며, 화면을 보는 사람들이 글자로 URL을 볼 때 이상하게 보인다. 링크 텍스트에 “링크”나 “링크로 이동”이라고 쓰지 않는다. 링크는 일반적으로 다른 색상으로 스타일링되고 밑줄이 그어져 있기 때문에 시각적으로 브라우저를 보는 사용자들도 링크가 있다는 것을 경험적으로 안다. (사용자들이 익숙하기 때문에 일반적으로 이 규칙을 어기면 안 된다.)
링크 텍스트를 가능한 짧게 작성한다. 화면 판독기는 전체 링크 텍스트를 해석해야 하므로 유용하다.
동일한 텍스트의 여러 복사본이 서로 다른 장소에 연결되는 경우를 최소화 한다. “여기 클릭”, “여기 클릭”, “여기 클릭”이라는 라벨이 붙어 있는 링크 목록이 있는 경우, 화면 판독기 사용자에게 문제가 발생할 수 있다
검색 엔진은 이미지 파일 이름을 읽고 SEO에 포함한다. 따라서 그 내용을 설명하는 파일 이름을 사용하자. img835.png 보다는 flower.jpg가 낫다.
Block Level Element vs Inline Element
Block Level Element (블록 수준 엘리먼트)
블록 수준 엘리먼트는 항상 새 줄에서 시작하며, 브라우저는 엘리먼트 앞뒤에 약간의 공백을 자동으로 추가한다.
블록 수준 엘리먼트는 항상 사용 가능한 전체 너비를 차지한다. (가능한 왼쪽과 오른쪽으로 뻗는다.)
대표적인 블록 수준 엘리먼트
address, article, aside, blockquote, canvas, dd, div, dl, dt, fieldset, figcaption, figure, footer, form, h1-h6, header, hr, li, main, nav, noscript, ol, p, pre, section, table, tfoot, ul, video
Inline Level Element (인라인 수준 엘리먼트)
인라인 엘리먼트는 새 줄에서 시작하지 않는다. 인라인 엘리먼트는 필요한 만큼만 너비를 차지한다.
대표적인 인라인 수준 엘리먼트
a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, output, q, samp, script, select, small, span, strong, sub, sup, textarea, time, tt, var
인라인 엘리먼트는 블록 수준 엘리먼트를 포함할 수 없다!!!!
<button>
<div>잘못된 엘리먼트 포함</div>
<p>이렇게 하면 안돼요~</p>
</button>
HTML 작성가이드
1. 문서 맨 첫줄에 항상 DOCTYPE 선언
<!DOCTYPE html>
2. 소문자 엘리먼트 이름 사용
HTML은 엘리먼트의 대소문자를 구분하지 않지만 소문자를 사용하는 것이 좋다.
대문자와 소문자를 섞는 것은 좋지 않다.
개발자는 일반적으로 소문자 이름을 사용한다.
소문자가 더 깔끔해 보인다.
소문자는 쓰기가 더 쉽다.
<p>이건 좋지 않다.</p>
<p>이건 좋다.</p>
3. 모든 HTML 엘리먼트 닫기
<br />
<br />
<p>위의 경우는 자유지만 XHTML의 경우 닫아야 한다.</p>
4. 속성은 소문자로 작성하기
HTML에서는 속성 이름에 대문자와 소문자를 혼합할 수 있다.
그러나 2번과 같은 이유로 소문자로 작성하는 것이 좋다.
<img src="이건 별로다." />
<img src="이것도 별로다." />
<img src="이건 좋다." />
5. 속성값은 따옴표로 감싸자
HTML에서는 따옴표 없이 속성 값을 사용할 수 있다.
그러나 다음과 같은 이유로 속성 값을 따옴표로 감싸는 것이 좋습니다.
개발자는 일반적으로 속성 값을 따옴표로 감싼다.
따옴표로 묶인 값은 읽기가 더 쉽다.
값에 공백이 포함된 경우 반드시 따옴표를 사용해 한다.
<!-- 좋다. -->
<table class="striped"></table>
<!-- 별로다. -->
<table class=striped"></table>
6. <img> 에는 항상 alt, width, height 속성을 지정하자.
<img> 에 항상 alt, width, height 속성을 지정한다.
이미지가 어떤한 이유로든 표시되지 않을때 alt 속성의 값을 표시 할 수 있다. (이미지가 단순히 페이지를 꾸미는 용도라면 빈 문자열을 넣어도 무방)
width, height를 지정하면 브라우저가 해당 값만큼 공간을 예약할 수 있기 때문에 페이지 로드시의 깜박임이 줄어든다.
7. 등호 주변에 공백을 사용하지 말자
등호 주변에 공백을 허용하지만 사용하지 않는것이 좋다.
<!-- 좋다. -->
<link rel="stylesheet" href="styles.css" />
<!-- 별로다. -->
<link rel="stylesheet" href="styles.css" />
8. 한 페이지에 너무 많은 HTML 코드를 사용하지 작성하지 않기
가로로 스크롤 되지 않도록 주의하자. (보통 Linter나 Prettier의 도움을 받아 해결한다.)
9. 빈 줄과 들여쓰기
이유 없이 빈 줄, 공백 또는 들여쓰기를 추가하지 않는다.
가독성을 높이려면 빈 줄을 추가하여 큰 코드 블록이나 논리 코드 블록을 구분한다.
가독성을 위해 들여쓰기로 공백 두 개를 추가한다. 탭 키를 사용하지 않는다.
10. <title>은 중요하다!
페이지 제목의 내용은 검색 엔진 최적화에 매우 중요하다(SEO)! 페이지 제목은 검색 엔진 알고리즘에서 검색 결과 에 페이지를 나열할 순서를 결정하는 데 사용된다.
브라우저 도구 모음에서 제목을 정의한다.
페이지가 즐겨찾기에 추가될 때 페이지의 제목을 제공한다.
검색 엔진 결과에 페이지의 제목을 표시한다.
따라서 제목을 가능한 한 정확하고 의미 있게 작성해야 한다!
11. <html> 및 <body> 생략하지 않기
생략하면 오래된 브라우저에서 오류가 발생할 수 있다.
생략하면 DOM 및 XML 소프트웨어와 충돌 할 수도 있다.
12. <head>를 생략해도 될까?
페이지에 <head>가 생략된 경우 브라우저는 알아서 <head>를 추가하지만 명시적으로 작성해 주는것이 좋다.
13. 항상 lang 속성 추가
항상 lang속성을 <html>엘리먼트 내에 포함하자. 이는 검색 엔진과 브라우저를 지원하기 위한 것이다.
<html lang="ko"></html>
14. 메타데이터
문서의 적절한 해석과 올바른 검색 엔진 인덱싱을 보장하기 위해 문자 인코딩은 HTML 문서 내에 가능한 한 빨리 정의해야 한다.
<html>
<head>
<!-- 최신에는 UTF-8 외에는 아무것도 신경쓸 필요 없다. -->
<meta charset="UTF-8" />
</head>
</html>
15. 뷰포트 설정
모든 웹페이지에 다음 요소를 포함해야 한다. (반응형 웹사이트를 만들기 위해서도 필수)
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
width: device-width: 페이지의 너비를 장치의 너비로 설정
initial-sacle: 1.0: 페이지 초기 확대/축소 수준 (1.0은 확대/축소가 없다는 의미)
모바일이나 태블릿에서 아래 2개를 비교해보면 바로 이해가 된다.
뷰포트 설정 없음
뷰포트 설정 있음
관례
가급적이면 페이지당 하나의 <h1>만 사용한다.
<h2> ~ <h6> 은 계층적으로 나타나야 한다.
꼭 필요한게 아니라면 <h1> ~ <h6>을 한 페이지에 3개 이상 사용하지 않는다. 많은 목차 레벨을 가진 문서(예를 들어 너무 깊은 heading 계층)는 다루기 힘들고 탐색하기 어렵다.
밑줄에 대한 위험성 - 사람들은 밑줄을 하이퍼링크와 강하게 연관시킨다. 따라서 웹에서는 링크에만 밑줄을 긋는 것이 가장 좋다. 의미론적으로 적합한 경우 <u> 요소를 사용하되, CSS를 사용하여 기본 밑줄을 웹에서 더 적합하게 변경할 수 있는지 고려한다.
진짜 맨날쓰는 HTML Entity
일부 기호는 HTML 예약되어 있으므로 Entity Number를 사용하여 문자를 표시해야 한다.
매우 자주쓰는건 아래와 같고 나머지는 필요할때 찾아 쓰면 된다.
공백 (두칸 이상의 공백이 필요한경우) -
< - <
> - >
& - &
" - "
' - '
ARQHIVE
