View
반응형
1. 시멘틱 태그
코드의 외형보다는 코드가 존재하는 의미와 목적에 중점을 둔다.
- 대부분의 태그 요소에는 고유한 의미가 존재한다.
- 검색엔진은 시멘틱 태그를 사용했을 때 더 많은 정보를 얻을 수 있다. SEO, 접근성에 도움을 준다.
- 스크린 리더 등 여러 가지 사용자 입장에서 문서 구조를 파악하기 쉽다.
- 코드를 들여다보는 다른 사람도 코드의 구조와 의미를 파악하기 쉽다.
h1 태그로 감싼 제목을 span 태그로도 외형적으로 똑같이 보이도록 할 수 있지만 제목의 의미를 가진 h1 태그의 장점은 이용할 수 없다.
2. 태그의 종류
각각의 의미가 있는 태그를 사용해야 웹 표준성에 어긋나지 않으므로 지키는 것을 권장한다.
2.1 metadata
<html>
- 문서의 최상위 요소
- lang 속성을 통해 문서의 주 언어가 무엇인지 설정할 수 있다.
- 이 설정은 검색엔진과 스크린 리더의 작동에 영향을 주는 중요한 요소
<head>
- 문서에 적용되는 메타데이터의 집합
<title>
- 문서의 제목을 의미하며 반드시 한 번만 사용해야 한다.
<link>
해당 문서의 메타데이터를 나타내는 요소
- charset : 문서의 문자 인코딩 상태를 의미한다. 보통 UTF-8로 설정하여 모든 언어를 지원하도록 한다
- name="author" : 페이지를 작성한 개발자의 이름
- name="description" : 페이지에 대한 설명 정보를 나타낸다
- name="viewport : 모바일 장치에서 사용자 화면의 사이즈에 대한 값을 지정한다. 필수는 아니나 모바일 기기에서도 많은 접속이 이뤄지기 때문에 넣어주는 것이 좋다
- http-equiv="X-UA-Compatible" : 프라그마 지시문(pragma directive : 컴파일러에게 특정한 기능을 지정)
브라우저에 어떤 행동을 지시하려는 목적으로 사용.
반응형
'FRONT-END > HTML' 카테고리의 다른 글
| a 태그 속성값에 대하여 (짧은 지식) (2) | 2022.04.19 |
|---|---|
| 인라인요소 VS 블록요소 (0) | 2022.04.11 |
| 지옥의< table> 행열행열... (0) | 2022.04.11 |
| Inline element 시멘틱 태그 (0) | 2022.04.11 |
| 웹표준에 대해서 (0) | 2022.04.10 |
댓글
