본문 바로가기
IT관련/HTML

[HTML] 태그 정리(4) - 시맨틱 요소 (<p> / <div> / <hgroup> / <header> / <nav> / <section> / <article> / <aside> / <footer>)

by 확고 2022. 1. 11.
728x90
반응형

 

시맨틱 요소 종류
(단락 구분 태그)
설명 화면 출력
<p> 앞/뒤로 빈 줄 1개가 생김
(연달아서 쓸 경우 빈 줄 2개 아닌 1개만 표시)


 

<div> HTML5 전에 사용하던 단락 구분 태그
현재에도 많이 사용하고 있음
<hgroup> HTML5 표준에서 제외된 항목으로 사용하지 않음
(header 요소에 포함 여러 개의 제목을 그룹화시킨 영역)
<header> <header>(문서의 제목 영역) 확고의 블로그</header>
<nav> <nav>(주 메뉴 영역) Java, HTML, JavaScript...</nav>
<section> <section>(본문 영역 - 포괄적) 용어 정리</section>
<article> <article>(본문 영역 - 개별적/세부사항) Java란?</article>
<article>(본문 영역 - 개별적/세부사항) HTML이란?</article>
<article>(본문 영역 - 개별적/세부사항) JavaScript란?</article>
<aside> <aside>(머리글/본문/하단과 상관없이 별도 분리 영역)
배너광고나 사이드바 위치</aside>
<footer> <footer>(문서 하단 영역) 저작권, 연락처 등 위치</footer>

 

▼ (전 게시물) 태그 정리(3) - 아래 링크 이동

 

[HTML] 태그 정리(3) - HR태그 (속성 size / width / align / noshade / color

구분 설명 사용 예시 태그 정의 ※ 가로 수평선으로 내용을 분리시킬 때 사용 - 종료 태그 없는 홀 태그 형식(종료 태그를 사용해도 문제없음) - 구역을 나타내는 블록 레벨 요소 width=100 align=right

j-growthdiary.tistory.com

 

▼ (후 게시물) 태그 정리(5) - 아래 링크 이동

 

[HTML] 태그 정리(5) - <pre> / <address> / <b> / <i> / <small> / <big> / <center> / <tt> / <u>

태그 설명/예시 화면 출력 pre 태그는 스페이스, 공백을 인식하는 태그로 이렇게 줄 바꾸기를 하더라도 화면 그대로 웹 페이지에 출력함 address 태그는 메일 주소, 연락처 등 기록하는 

j-growthdiary.tistory.com

 

▼ (첫 번째 게시물) 기본 용어 정리 - 아래 링크 이동

 

[HTML] 기본 용어 정리 (HTML 정의 / 요소 / 태그 / 속성 / 속성값)

HTML 의의 Hyper Text Markup Language의 약자로 웹 페이지를 만드는데 필요한 프로그래밍 언어 태그, 속성, 속성 값 등의 요소로 구성됨  - Hyper Text : 텍스트에 하이퍼링크 설정이 가능하고 텍스트들이

j-growthdiary.tistory.com

 

728x90
반응형

댓글