2-2. HTML 시맨틱 태그

2-2. HTML 시맨틱 태그

2021. 10. 7. 22:37ㆍHTML + CSS + JS

728x90

1. 시맨틱 태그 ( semantic)

html 태그는 이름을 봐도 의미를 알 수 있어 시맨틱태그라고 한다.

ex) <head> 대충 어떤 역할을 하는지 알 수 있는 것처럼

2. 시맨틱 태그가 필요한 이유

1) 시맨틱 태그를 사용하면 웹 브라우저가 html 소스 코드만 보고도 어느 부분이 제목이고 메뉴이며, 본문인지를 쉽게 알수 있기 때문이다.

2) 문서 구조가 정확히 나눠지기 때문에 pc나 모바일 웹의 브라우저와 여러 스마트 기기의 다양한 화면에서 웹 문서를 표현하기가 쉽기 때문이다.

3) 마지막으로 인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확하게 찾을 수 있기 때문이다.

3. 시맨틱 태그 종류

1) <header>

<header> 태그는 말 그대로 헤더 영역을 의미하며, 사이트의 헤더는 주로 맨 위쪽이나 왼족에 있고,

헤더에는 검색창이나 로고, 메뉴 등이 포함된다.

2) <nav>

<nav> 태그는 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만들 수 있다.

<nav> 태그는 위치 상관없이 사용할 수 있다,

<nav>에 id 속성을 지정해주면 네비게이션 마다 다른 스타일 적용할 수 있다.

3) <main>

<main> 태그는 웹 문서에서 핵심이 되는 내용이 포함된다.

웹 문서마다 다르게 보여주는 내용으로 구성되며, 웹 문서에서 <main> 태그는 한번만 사용할 수 있다.

4) <article>

<article> 태그는 실제로 보여주고 싶은 내용을 작성하는 태그이다.

ex) 블로그의 포스트나 뉴스 사이트의 기사처럼 독립된 웹 콘텐츠 항목

5) <section>

<section> 태그는 웹 문서에서 콘텐츠 영역을 나타낸다.

<article> 태그와 헷갈릴 수도 있는데 <section> 태그는 몇개의 콘텐츠를 묶는 역할이고, <article>태그는 블로그의 포스트처럼 독립된 콘텐츠이다.

6) <aside>

<aside> 태그는 본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바를 만드는 태그이다.

7) <footer>

<footer> 태그는 웹 문서에서 맨 아래쪽에 있는 푸터 영역을 만든다.

8) <div>

<div> 태그도 여러 소스를 묶는 태그로, 영역을 구별하여 스타일로 문서를 꾸밀 때 사용한다.

728x90

2-4. html 목록 태그 (0)	2021.10.07
2-3. html 텍스트 태그 소개 (0)	2021.10.07
2-1. HTML 개념과 기본적인 구조 (0)	2021.10.07
1-3. HTML + CSS + JS 개념 , JS 프레임워크와 라이브러리 소개 (0)	2021.10.06
1-2. 백엔드와 프론트엔드란? (0)	2021.10.06

💖💗