코드노트

HTML 구조를 나타내는 요소 본문

Code note/HTML

HTML 구조를 나타내는 요소

코드노트 2022. 8. 6. 15:07

<div>

- 블럭 컨테이너

- 플로우 콘텐츠를 위한 통용 컨테이너

- css로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 여향을 주지 않음

- 콘텐츠 분할을 위한 요소.

- 순수 컨테이너로 아무의미가 따로 없다.

 

<span>

- 인라인 컨테이너

- css로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 여향을 주지 않음

- 순수 컨테이너로 아무의미가 따로 없다.

 

● Semantic Web 시맨틱 웹

- 검색 엔진은 의미론적 마크업으로 분석하여 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주

- 의미가 없는 div를 탐색하는거보다 의미있는 코드 블록을 찾는것이 훨씬 쉬움

- 개발자에게 태그 안에 채워질 데이터 유형을 제안

- 시각장애인을 위한 스크린리더로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있음.

 

<header>

- 소개 및 탐색에 도움을 주는 콘텐츠를 나타낸다.

- 제목, 로고, 검색 폼, 작성자 이름 등의 요소를 포함할 수 있음.

- 상단에 위치

 

<footer>

- 작성자, 저작권 정보, 관련 문서등의 내용을 담는다.

- 하단에 위치

 

<nav>

- 현재 페이지 또는 다른페이지의 링크를 보여주는 구획을 나타낸다.

- 자주 쓰이는 예제는 메뉴, 목차 등

 

<aside>

- 문서의 주요 내용과 간접적으로만 연관된 부분을 나타낸다.

- 주로 사이드바 혹은 콜아웃박스로 표현.(ex) 광고)

- 본문 페이지의 내용에 있어서 없어도 되는 콘텐츠

 

<main>

- <body> 내에서 주요 콘텐츠를 나타낸다.

- 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어진다.

- main 요소는 문서에 하나만 존재한다.

- 다른 자식 요소로 있을 수 없다.

 

<article>

- 문서, 페이지, 애플리케이션 또는 사이트 안에서 독립적으로 구분하여 배포하거나 재사용할 수 있다.

- 사용 예제로는 게시판과 블로그 글, 매거진, 뉴스 기사, 댓글 등이 있다.

 

<section>

- html문서의 독립적인 구획을 나타내며, 적합한 의미를 가진 요소가 없을 때 사용

- 재사용할 수 있는 콘텐츠면 article, 

- 논리적으로 사용할 수 있는 구분이라면 div보다는 section

'Code note > HTML' 카테고리의 다른 글

input, button / submit 제출 여부  (0) 2022.11.03
form 태그 get, post 차이 정리  (0) 2022.11.03
HTML role 속성 정리, 사용방법은?  (0) 2022.10.21
HTML 목록 및 표  (0) 2022.08.08
HTML text 텍스트 요소  (0) 2022.08.05
'Code note/HTML' Related Articles more