시맨틱 태그의 등장
- HTML에서 각 태그는 대부분 의미를 가지고 있지만, 그 양이 부족했다.
- 또한 문서 내에 목록, 강조 등 미시적인 부분에는 의미가 있었지만, 전체 레이아웃에서 메뉴, 메인컨텐츠, 서브컨텐츠 등을 분류할 수 없었다.
- 그 결과 레이아웃에서 각 영역을 지정하는 < div >태그를 수십개 사용하게 되었는데,
- 이는 시맨틱웹을 구현하기 어렵게 만들었고, 이를 보완하기 위해 시맨틱 태그가 HTML의 버전5에서 새롭게 추가되었다.
시맨틱 태그 종류: 레이아웃 태그, 멀티미디어 태그, 폼, 기타, 용도변경 등
- 레이아웃 태그
<header> 페이지 가장 윗부분. 사이트 제목, 상단바*검색창
<nav> 네이게이션. 주로 상단바. <ul>요소 사용하여 목록 형태로 사용.
<main> 메인 콘텐츠
<article> 웹페이지 내용에 사용
<section> 웹페이지 섹션에 사용
<aside> 사이드바, 광고창
<footer> 페이지 가장 아랫부분. 사이트 라이선스, 주소, 연락처 등
- 멀티미디어 태그
<audio>
<video>
<canvas> 그래픽 표현
- 폼 관련 태그
<output>
<input>
<datalist>
- 기타 태그
<menu> 툴바, 팝업 메뉴를 넣을 때 쓴다. 현재는 FireFox에서만
<menuitem> 툴바, 팝업 메뉴의 각 항목을 정의한다.
<details> 보이거나 숨기게 해주는 요약글 형식의 위젯에 사용
<embed> 외부 애플리케이션이나 플러그인을 삽입
<object> 외부 문서, 매체, 플러그인 등을 웹페이지에 삽입
<figure> 그림, 도표, 다이어그램 등
<figcaption> <figure> 태그 안에 사용. 내용의 설명
<iframe> 외부 문서를 해당 영역에 삽입
<time> 기계가 이해하기 쉽게 시간 표현
<mark> 형광펜 마킹기본구조 태그
<!DOCTYPE>
<html>
<head>
<body>
<title>
<meta>
<link>
텍스트 관련
<hgroup>
<h1>~<h6> 1단계가 가장 큼
<p>
<b> bold효과
<i> italic(기울임)효과
<strong> 강하게 강조
<em> 약하게 강조
<ins> insert 밑줄
<del> delete 취소선
<s> strikethough 취소선
<u> underline 밑줄
<sup>
<sub>
<small>
<br> line break 문단 내 줄바꿈
<hr> horizontal rule 가로줄 삽입
<abbr>
<wbr>
<blockquote>
<q>
<dfn>
<pre>
<var>,<code>
<ruby>
목록 관련
<ul>
<li> list item 각 항목
<ol>
링크, 이미지 관련
<a> anchor 하이퍼링크 생성, href속성과 함께 사용
<img>
<svg>
<progress>
<picture>
테이블 관련
<table>
<tr> table row 행
<td> table data 셀 // rowspan 속성: 행 병합, colspan 속성: 열병합
<th> table heading 행, 열의 머리말
<caption> 테이블의 제목
폼관련
<form>
<input> 입력값 요소 지정, type에 따라 다른 입력값
text: 한 줄 짜리 문자열 값. 기본값이다.
number: 숫자.
url: 도메인 주소.
email: 이메일.
tel: 전화번호.
search: 검색어.
range: 지정한 범위의 숫자.
color: 색.
date: 날짜.
time: 시각.
datetime: 날짜+시각.
checkbox: 선택/해제할 수 있는 항목.
radio: 선택/해제할 수 있는 항목이나 중복 선택은 불가능하다.
button: 누를 수 있는 버튼을 생성한다.
submit: 누를 경우 입력값을 전송시키는 버튼을 생성한다.
image: submit + <img> 태그.
reset: 누를 경우 입력값을 초기화시키는 버튼을 생성한다.
hidden: 투명라인(...). 입력값을 수정하지 않고 곧바로 보낼 때 쓰인다.
file: 파일 업로드에 쓰인다.
<textarea>
<button>
<output>
<datalist>
<select>
<fieldset>
<label>
멀티미디어
<video>
<audio>
<canvas>
기타
<style>
<script>
<div>: 박스 또는 레이어
<span>: <div>의 인라인 버전
<figure>
시맨틱 태그: 시맨틱 태그를 사용한 레이아웃은 컴퓨터가 읽어낼 수 있다.
<header>
<nav>
<main>
<article>
<section>
<aside>
<footer>
폼관련
<output>
<input> date, datetime, time, color, range
<datalist>
기타
<mark>
3개의 댓글
2022년 6월 30일
section태그와 article태그의 차이에 대한 글(어려움)
https://webactually.com/2020/03/03/%3Csection%3E%EC%9D%84-%EB%B2%84%EB%A6%AC%EA%B3%A0-HTML5-%3Carticle%3E%EC%9D%84-%EC%8D%A8%EC%95%BC-%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0/
위 필자에 따르면,
article태그는 독자적으로 완성된 내용을 담는다.
애플의 읽기모드(리더모드)는 알티클 태그를 통해서 페이지의 본문을 파악한다.
섹션태그는 애당초 문서의 목차를 정하고 인식할 수 있도록 만들어졌지만, 목차 인식 기능을 구현하는 웹브라우저가 전혀 없어서 섹션태그를 사용할 의미가 없다. 걍 구획 구분용 정도.
따라서 필자는 섹션태그의 용도를 각 글의 시작 전에 요약 서머리 부분 역할에 사용하는 것을 권유한다.
일반적인 경우는 < article >태그를 사용할 것을 강조한다.
답글 달기
2022년 6월 30일
최근의 추세는 HTML에는 표시하고자 하는 문서의 구조를 중심으로 기술하고, 구체적인 표시 방법은 CSS에서 정의하는 방향으로 나아가고 있다
답글 달기
일반 태그는 지도에서 건물이 있다는 것만 보여준다면,
시맨틱 태그는 지도에서 건물의 위치와 역할까지도 표시하는 것이다.
즉 코드만 보고도 그 역할까지도 알 수 있도록 하는 것