티스토리 뷰

FRONT-END/HTML

[HTML] SEMANTIC TAG

진심스테이크 2019. 1. 21. 17:18

 

 

 

<header> : 머리말

- 주로 페이지 맨 위쪽이나 위쪽에 삽입

- 내용으로는 <form> 태그를 사용해 검색 창을 넣거나 <nav> 태그를 사용해 사이트 메뉴를 넣음

- 본문 해당 부분의 머리말로 사용

 

<nav> : 문서를 연결하는 내비게이션 링크

- 동일한 사이트 안의 문서나 다른 사이트 문서로 연결하는 링크 모음

- 어느 부분이 내비게이션인지 쉽게 알 수 있음

- 위치에 영향을 받지 않음

 

<section> : 주제별 콘텐츠 영역 나타냄

- 문맥 흐름 중에서 콘텐츠를 주제별로 묶을 때 사용

 

<article> : 콘텐츠 내용 넣기

- 웹 상의 실제 내용을 넣음

- 대부분 블로그의 포스트, 웹 사이트의 내용, 사용자가 등록한 코멘트, 독립적인 웹 콘텐츠 항목이 해당됨

- 태그을 적용한 부분을 떼어 내 독립적으로 배포하거나 재사용하더라도 완전히 하나의 콘텐츠가 될 때 사용

 

<aside> : 본문 이외의 내용 표시

- 광고나 링크 모음 등 문서의 메인 내용에 영향을 미치지 않은 내용들을 넣을 때 사용

 

<iframe> : 외부 문서 삽입

속성 

설명 

width 

인라인 프레임의 너비

픽셀이나 백분율 값으로 표시 

height 

인라인 프레임의 높이

픽셀이나 백분율 값으로 표시 

name 

인라인 프레임의 이름 

src 

프레임에 표시할 문서의 주소를 지정 

seamless 

프레임의 테두리를 없애 마치 본문의 일부처럼 보이도록 만들며 속성 값 없이 사용

(크롬과 사파리에서만 지원) 

 

<footer> : 제작 정보와 저작권 정보 표시

 

<address> : 사이트 제작 정보, 연락처 정보 등

- 주로 <footer>안에 사용

 

<div>

- 주로 콘텐츠를 묶어 시각적 효과를 적용할 때 사용 -> CSS를 적용할 때 사용

'FRONT-END > HTML' 카테고리의 다른 글

[HTML] MULTIMEDIA  (0) 2019.01.21
[HTML] FORM  (0) 2019.01.16
[HTML] TAGS  (0) 2019.01.16
[HTML] 회원가입 양식 만들기  (0) 2018.04.04
[HTML] 테이블 만들기  (0) 2018.04.03
댓글