1. html 태그 속성 중 lang= 'ko'를 쓰는 이유? |
html을 작성할 때 !Doctype html 바로 뒤에 오는 태그가 <html>태그이다. 이 html의 속성중 lang이라는 속성이 있는데
이 속성은 현재 페이지의 텍스트가 어떤 언어로 작성되어 있는지 표기하는 것이다. 시각적으로 불편함이 있는 분들은 웹페이지를 스크린 리더를 통해서 이용하는데 lang속성으로 표기한 언어를 기준으로 발음이 적용된다. 그렇기 때문에 lang속성은 웹 페이지를 보다 편리하게 이용할 수 있도록 하는 웹 접근성 관련 속성이다.
2. b태그와 strong태그, i태그와 em태그 |
1. b 태그 vs strong 태그
b태그와 strong태그를 적용한 텍스트는 웹 브라우저에서 볼 때 진하게 표시된다.
외관상으로는 둘의 차이가 없지만, 각각 다른 의미를 가진다.
b 태그의 경우 특정 텍스트의 주의를 끌기 위한 용도로 사용되고,
strong 태그의 경우에는 이 부분이 중요한 부분임을 강조하는 태그이고 웹 접근성에 기여한다.
b 태그를 단지 글씨를 굵게 하는 스타일적인 요소로 쓰면 안된다. 스타일적인 요소는 css의 font-weight를 통해 얼마든지 바꿔 줄 수 있다.
2. i태그 vs em태그
i 태그와 em태그를 적용한 텍스트는 웹 브라우저에서 볼 때 기울임체로 나타난다.
이것들 또한 외관상의 차이는 없지만, 각각 다른 의미를 가진다.
i태그의 경우 문단에서 다른 언어나 필체 또는 전문용어 등을 표현하기 위해 사용된다.
em태그의 경우 중요한 부분을 강조할 때 사용되는 태그로 이 또한 웹 접근성에 기여한다.
i태그 또한 단지 기울임체를 위해 쓰면 안되고 그 의미에 맞게 써야한다. 스타일적인 부분을 css로 처리할 수 있기 때문이다.
3. 인용문 관련 태그들 |
(1) blockquote 태그
blockquote 안의 텍스트는 비교적 긴 인용문을 의미하며 cite라는 속성을 통해 출처를 표시할 수 있다.
(2) cite태그
cite 태그는 저작물의 출처를 표기할 때 사용하고 제목을 반드시 포함해야 한다.
(3) q태그
q태그 안의 텍스트는 비교적 짧은 인용문을 의미한다. 이것 또한 cite속성을 통해 출처를 표시할 수 있다.
(4) mark태그
mark태그는 중요한 부분을 표시하는 기능이다. 인용문에서는 원본에 별도의 표시는 없지만 특별히 중요하다고 생각되는 부분을 표시하는 역할을 한다. mark태그를 사용한 텍스트는 배경색이 노란색의 형광펜으로 그은 것처럼 표시된다.
4. dl, dt, dd태그 |
dl태그는 definition list의 약자로 사전처럼 용어를 설명하는 목록을 만드는 태그이다.
dt태그는 definition term의 약자로 용어의 제목을 의미하고
dd 태그는 definition description의 약자로 용어의 설명을 의미한다.
<예시>
<dl>
<dt>나비</dt>
<dd>나비목의 곤충 가운데 낮에 활동하는 무리를 통틀어 이르는 말.</dd>
</dl>
5. abbr태그 |
abbr태그는 텍스트가 약자임을 알려주는 태그이다. title속성을 이용하여 약자를 풀어서 쓰면 텍스트에 마우스를 올렸을 때 툴팁으로 title속성값이 나온다.
'html' 카테고리의 다른 글
| HTML 탐구생활 : input 태그와 그 외의 태그들 (0) | 2022.09.13 |
|---|---|
| HTML 탐구생활 : form 태그와 관련 속성들 (0) | 2022.08.31 |
| HTML 탐구생활 : 브라우저별 지원 여부 확인 (0) | 2022.06.13 |
| HTML 탐구생활 : 이미지 삽입 요소 img 태그 (0) | 2022.06.12 |
| HTML 탐구생활 : html 코드 시맨틱하게 작성하기 (0) | 2022.05.08 |