1. 시맨틱 태그
- 시맨틱 태그는 태그의 이름만으로 태그의 용도나 역할에 대한 의미가 명확한 태그이며, 웹 페이지의 구조를 설계하기 위한 목적으로 사용.
- 엄격한 사용법이 있지도 않고, 안써도 문제되지 않지만 잘 활용하면 검색 엔진 최적화(SEO)나 접근성(Accessibility)을 높이는데 도움을 준다.
- 대표적인 시맨틱 태그: table, form, a 태그 등
- 대표적인 논 시맨틱 태그: div, span 태그 등
1-1. header 태그
<header></header>- header 태그는 웹 페이지에서 헤더 영역을 구분하는데 사용
- 웹 사이트의 최상단이나 좌측에 위치하고 로고, 검색, 메뉴와 같은 요소들을 포함
1-2. nav 태그
<nav></nav>- nav(navigation) 태그는 웹 페이지에서 내부의 다른 영역이나 외부를 연결하는 링크 영역을 구분하는데 사용
- 내부나 외부를 연결하는 링크가 전부 nav 태그일 필요는 없으며, 웹 사이트의 주요 탐색 링크 영역만 포함하면 됨.
1-3. section 태그
<section></section>- section 태그는 웹 페이지에서 논리적으로 관련 있는 내용 영역을 구분할 때 사용한다.
- 보통 내용의 제목을 나타내는 hn태그 중 하나를 포함한다.
1-4. article 태그
<article></article>- article 태그는 웹 페이지에서 독립적인 영역을 구분할 때 사용.
- section 태그와 비슷하지만 section 태그는 웹 페이지 안에서 관련있는 내용을 구분하고, article 태그는 어떤 웹 페이지에서든 독립적으로 사용될 수 있는 영역을 구분한다는 점에서 차이가 있다.
1-5. aside 태그
<aside></aside>- aside 태그는 웹 페이지 안에서 독립적인 내용으로 보기 어려워서 section 태그나 article 테그로 영역을 구분할 수 없을 때 사용
1-6. footer 태그
<footer></footer>- footer 태그는 웹 페이지에서 푸터 영억을 구분할 때 사용된다.
- 일반적으로 웹 페이지 최하단에 있으며, 저작권 정보, 연락처, 사이트 맵 등의 요소들을 포함한다.
1-7. main 태그
<main></main>- main 태그는 웹 페이지의 주요 내용을 지정할 때 사용하는 태그.
- 문서에서 반복해서 등장하는 요소를 포함해선 안된다.
1-8. figure 태그
<figure></figure>- 이미지와, 이미지 설명을 담고 있는 영역
2. 글로벌 속성
- html 에서 태그 종류 상관없이 모든 태그에서 공통으로 사용할 수 있는 속성을 말함.
- 자주 쓰이는 속성들을 정리했음.
| 속성 | 값 | 설명 |
|---|---|---|
| class | value | 요소에 클래스 값을 지정함, 클래스 값은 CSS에서 클래스 선택자로 활용함. |
| id | value | 요소에 아이디 값을 지정함, 아이디 값은 CSS에서 아이디 선택자로 활용함. |
| style | style | 요소에 인라인 스타일 지정. |
| title | text | 요소에 추가 정보를 지정함, 마우스를 요소 위에 올리면 툴팁으로 추가 정보가 표시됨. |
| lang | language code | 요소에 사용한 텍스트의 언어 정보를 지정함. |
| hidden | hidden | 요소를 화면에 감춤. |
| data-* | value | 사용자가 임의의 속성을 만들 수 있다. |
2-1. class 속성
<div class="이름명"></div>- class 속성은 요소에 클래스명을 지정할 때 사용.
- css에서 클래스 선택자로 활용하고, 같은 클래스명은 여러 요소가 중복해서 가질 수 있음.
2-2. id 속성
<div id="이름명"></div>- id 속성은 요소에 아이디를 지정할 때 사용.
- css에서 아이디 선택자로 활용하고, 중복될 수 없음.
2-3. style 속성
- style 속성은 css 코드를 인라인으로 작성할 때 사용한다.
2-4. title 속성
<p> <span title="말할 것 추가정보">말할 것</span></p>- title 속성은 요소에 추가 정보를 넣을 때 사용한다.
- title 속성에 넣은 값은 요소에 마우스를 올리면 툴팁으로 표시됨.
2-5. lang 속성
<html lang="ko">- lang 속성은 요소에 사용한 텍스트의 언어 코드를 지정할 때 사용함.
2-6. data-* 속성
- data-* 속성은 사용자 커스텀 속성을 만든다.
- html에서 정해진 속성이 아니면 사용할 수 없다, 그러나 html5에서는 data-* 속성으로 사용자가 원하는 속성을 만들 수 있다.
프로그래밍 공부하는 찬우입니다👋