HTML Constructure& Semantic

HTML

wlals5855 2024. 7. 27. 23:13

시맨틱태그

웹문서의 구조를 만드는 주요 태그를 사용한다.

>> 태그의 이름을 보고 역할을 하는지 알 수 있다.

시맨틱 태그의 필요성

HTML의 소스코드를 보면서 제목과 메뉴, 본문을 쉽게 구분하는데 도움이 된다.

문서의 구조가 확실하게 나눠지면 인터페이스에서 다양한 화면에 웹문서를 표현하기 쉬워진다.

인터넷에서 웹사이트를 검색할 떼 필요한 내용을 정확히 찾을 수 있다.

<header> 태그
- 주로 상단에 위치해 있다.
- 검색 창이나 메뉴, 로고가 들어가 있다.
단, <head>와 혼동하지 않도록 주의 한다.

<nav> 태그
- 네비게이션 영역
- 같은 웹 문서 안에서 다른 위치로 연결 혹은 다른 웹 문서로 연결하는 링크를 포함한다.
- 웹 문서의 위치에 영향을 받지않는다. >> 헤더, 푸터, 사이드바 안에 포함 혹은 독립 사용 가능하다.

<main>, <article>, <section> 태그
<main> 태그
- 메인 여역
- 메뉴바, 사이드바, 로고처럼 페이지마다 똑같이 들어가는 정보가 없다.
- 웹 문서에서 한 번만 사용한다.
<article>태그
- article: 신문, 잡지의 기사
- 웹에서 실제로 보여주고 싶은 내용을 삽입하는 영역이다.
- 웹문서에서 여러개 사용이 가능하다.
- <article>태그 안에 <section>태그를 사용한다.
<section>태그
- 콘텐츠 영역
- 몇 개의 콘텐츠를 묶는 용도로 사용한다.
- ≠ <article>태그 : 독립된 콘텐츠이다.

<div>태그
- division: 구분, 분할
- <div>요소는 종종 다른 HTML요소의 컨테이너로 사용
- 필수 속성이 아니다.
-> 문서 구조 지정(영역 구별), 스타일 적용