[HTML] 시맨틱 태그

5079 단어 htmlhtml

시맨틱 태그

웹페이지의 구조를 쉽게 이해할 수 있도록 정의된 태그

<header> - 머리말 지정

  • 일반적으로 로고, 제목 태그 및 nav 태그를 포함
  • <form>태그를 사용해 검색 창 넣기

<nav> - 네비게이션 링크

  • 동일 사이트 내 다른 사이트의 문서로 연결하는 링크의 모음으로 구성되며 주로 메뉴에 자주 사용됨
  • <footer>에 있는 링크 모음 부분에도 사용

<section> - 주제별 콘텐츠 영역

  • 제목으로 시작하는 컨텐츠를 그룹핑하기 위해 사용

<article> - 콘텐츠 내용

  • 콘텐츠에 실제 내용을 포함하는 영역

<section>: 주제별 콘텐츠 영역을 묶음
<article>: 하나의 콘텐츠를 묶음

<aside> - 본문 이외의 내용

  • 본문 이외의 내용을 표시하는 사이드바 영역
  • 광고나 링크 등으로 구성되며 메인 내용에 영향을 미치지 않는 내용으로 구성

<iframe> - 외부 문서 삽입

iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입할 수 있다

<iframe src="삽입할 문서주소" [속성="값"]></iframe>
  • seamless: 프레임 테두리 제거
  • width,height,name

프레임셋(frameset)
iframe 요소와는 달리 하나 이상의 페이지를 동시에 가질 수 있다. 프레임셋에서 각각의 페이지는 frame 요소로 표현된다.

<frameset cols="25%,*,25%">
<frame name="left" src="/html/intro"/>
<frame name="center" src="/css/intro"/>
<frame name="right" src="/php/intro"/>
<noframes>
    <body> 이 브라우저는 frame태그를 지원하지 않습니다! </body>
</noframes>
</frameset>

<footer>

  • 주로 하단에 위치하여 제작 정보, 회사소개, 약관, 저작권 정보를 포함하는 영역

<address>

  • 사이트 제작자의 이름이나 연락처 정보
코딩테스트 | (JavaScript) 프로그래머스 : N개의 최소공배수
Go 프로그래밍 - 슬라이스

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage