html5 시맨틱 태그 정리

임재희·2021년 11월 30일

html

목록 보기

1/1

🤷‍♂️ 시맨틱 태그를 사용하는 이유?

SEO(Search Engine Optimization) - 검색엔진최적화
검색엔진이 웹페이지의 자료를 수집하거나 순위를 방식에 맞게 웹페이지를 구성하여,
검색 결과의 상위에 나올 수 있게하는 행위를 말한다.
의미부여를 통한 코드의 가독성 및 유지보수가 쉬워짐
사실 필자가 시맨틱이 필요하다고 느낀 최대 이유이다.
<div>로만 이뤄진 아래의 코드를 봐보자

    <div class="wrap">
      <div class="header"></div>
      <div class="main"></div>
      <div class="footer"></div>
    </div>

class로만 구분된 방식은 코더의 성향에 따라 언제든지 클래스명이 바뀔 수 있다.
따라서, 다음과 같이 시맨틱 코드를 활용하여 가독성을 좋게 유지해줘야 한다.

    <div class="wrap">
      <header></header>
      <main></main>
      <footer></footer>
    </div>

🔍 시맨틱 태그 종류를 알아보자

`<header>`

<header>
    <h1>로고</h1>
    ...
</header>

🌱 머리말 영역으로 문서 또는 섹션의 헤더를 나타낸다.
🌱 따라서, 하나의 문서 안에 여러 개 <header>태그가 올 수 있다.
🌱 <header>는 하나의 <hn> 제목을 가지고 있어야 한다.
🌱 보통 로고를 <h1>태그에 담는다.
🌱 <header> 내부에는 또다른 <header>나 <footer>,<address>등을 담을 수 없다.

`<nav>`

<nav>
  <ul>
    <li><a href="#">link</a></li>
    ...
  </ul>
</nav>

🌱 네비게이션을 뜻하며 다른 영역, 사이트, 문서 사이를 탐색할 수 있는 링크의 집합이다.
🌱 위치는 자유롭게 정할 수 있다.

`<main>`

<div class="wrap">
    <header></header>
    <main> ... </main>
    <footer></footer>
</div>

🌱 문서의 주요 콘텐츠를 나타낸다.
🌱 <header>,<nav>,<aside>,<footer> 등 문서에 반복되는 콘텐츠를 포함시키면 안된다.
🌱 한 페이지에 한 번만 사용이 가능하다.

`<footer>`

<footer>
    <nav>
    	...
    </nav>
    <address>
    	...
    </address>
</footer>

🌱 문서의 바닥글을 나타낼 수 있고 섹션의 꼬릿말을 나타낼 수 있다.
🌱 한 페이지에 여러번 작성할 수 있으나, 권장하지는 않는다.

`<aside>`

<aside>
    <h4>사이드 메뉴</h4>
    ...
</aside>

🌱 중요 내부 콘텐츠를 제외한 외곽의 콘텐츠를 표시할 때 사용하는 요소
🌱 퀵메뉴나 스크롤탑 버튼 같은 곳에 사용하면 좋다.
🌱 배치는 아래에 올 수 있고 사이드에 배치되는 경우가 많다.
🌱 필수 요소가 아니므로 광고나 링크 모음 등 문서의 메인 내용에 영향을 미치지 않는 내용을 넣을 때 사용한다. ex) <footer>태그 안에 본문과 관련없는 <aside> 추가

`<section>`

<section>
    <h3>타이틀</h3>
    ...
</section>

🌱 제목을 가지고 있으면서 문서 전체와 관련이 있는 콘텐츠의 집합
🌱 <hn>태그 중 한개를 반드시 가져야 한다.

📍 <article>과의 차이점

<section> : 문서에서 독립적인 특정 영역
<article> : 영역 속에서 독립적인 콘텐츠, 다른 페이지나 영역에 가져다 쓸 수 있다.

`<article>`

<article>
    <h3>타이틀</h3>
    ...
</article>

🌱 주로 <section> 태그 안에 들어가며, 글자가 많이 들어간 부분을 의미한다.
🌱 예시로 포럼게시물, 블로그포스트, 신문기사 등이 있다.

`<details>`

<details>
  <summary>타이틀</summary>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
</details>

🌱 사용자가 열고 닫을 수 있는 정보(위젯), 별도 제목을 정할 수도 있다.
🌱 <summary>가 들어가야 한다.
🌱 IE는 지원하지 않는 태그다.

`<mark>`

<p>Lorem ipsum <mark>dolor</mark> sit amet consectetur....</p>

🌱 형광펜으로 칠한 것처럼 하이라이트된(highlighted) 텍스트를 정의할 때 사용한다.

`<time>`

<p>이번 콘서트는 <time datetime="2019-04-19T20:00:00">4월 19일 저녁 8시</time>부터 시작합니다.</p>

🌱 날짜와 시간을 담는다.
🌱 IE는 지원하지 않는 태그다.
🌱 특별한 형태로 렌더링되진 않지만, 검색 엔진의 검색 결과 향상이나 알림 및 스케줄과 같은 사용자 기능을 위해 날짜와 시간 데이터를 기계가 읽을 수 있는(machine-readable) 형태로 변환해주는 datetime 속성을 포함할 수 있다.

`<address>`

<address>      
    주식회사(주)<br>
    서울시 어쩌구 홍길동<br>
    Tel: (02)123-4567 | Fax: (02)234-5678
</address>

🌱 문서나 저자 또는 회사와 연락할 수 있는 정보를 명시할 때 사용한다.
🌱 <article>안의 <address>요소는 해당 글에 대한 연락정보를 나타낸다.

`<b>`

<p>Lorem ipsum <b>dolor</b> sit amet consectetur....</p>

🌱 다른 부가적인 목적 없이 단순히 굵게 표현되는 텍스트를 정의할 때 사용한다.
🌱 <strong>, <hn>, <em>, <mark> 태그 중에서 적절한 태그를 찾을 수 없을 때만 사용한다.

`<strong>`

<p>다음주 <strong>목요일</strong>에 <strong>1고사장</strong>에서 시험을 10문제를 보러 간다.</p>

🌱 객관적으로 해당 콘텐츠의 중요성이나 심각함, 긴급함 등을 강조할 때 사용한다.

`<em>`

<p>다음주 목요일에 1고사장에서 시험을 <em>10문제</em>를 보러 간다.</p>

🌱 주관적으로 해당 내용을 강조한다.

`<i>`

<p><i>타이타닉호</i>는 영국의 화이트 스타 라인이 운영한 북대서양 횡단 여객선이다.</p>

🌱 기본 텍스트와는 다른 분위기나 음성을 위한 텍스트 영역을 정의할 때 사용한다.
🌱 전문용어나 다른 언어의 관용구, 문어체, 서양 문헌에 나오는 배 이름 등을 나타낼 때 사용
🌱 <strong>, <em>, <dfn>, <mark>, cite 태그 중에서 적절한 태그를 찾을 수 없을 때만 사용한다.

`<small>`

<p>Lorem ipsum <small>dolor</small> sit amet consectetur....</p>

🌱 크기가 작은 텍스트를 정의할 때 사용한다.

`<del>`

<p>Lorem ipsum <del datetime="2021-10-10">dolor</del> sit amet consectetur....</p>

🌱 문서에서 제거된 텍스트의 범위를 나타낸다.
🌱 datetime 속성값을 이용하여 내용의 제거가 언제 이루어졌는지를 의미적으로 지정할 수 있다.

`<s>`

<p>Lorem ipsum <s>dolor</s> sit amet consectetur....</p>

🌱 글자에 취소선, 즉 글자를 가로지르는 선을 그린다.

`<ins>`

<p>Lorem ipsum <ins datetime="2021-10-11">dolor</ins> sit amet consectetur....</p>

🌱 insert라는 영어단어의 앞글자 3개에서 따온 태그
🌱 문서에서 추가된 텍스트의 범위를 나타낸다.
🌱 datetime 속성값을 이용하여 내용의 추가가 언제 이루어졌는지를 의미적으로 지정할 수 있다.

`<u>`

<p>Lorem ipsum <u>dolor</u> sit amet consectetur....</p>

🌱 underline라는 영어단어의 앞글자 3개에서 따온 태그
🌱 단순히 밑줄을 표시하는 경우 사용한다.

`<blockquote>`

<h3>메타버스</h3>
<blockquote>
  <p>현실세계와 같은 사회·경제·문화 활동이 이뤄지는 3차원 가상세계를 일컫는 말로, 1992년 미국 SF 작가 닐 스티븐슨의 소설 《스노 크래시》에 처음 등장한 개념이다. 메타버스는 5G 상용화에 따른 정보통신기술 발달과 코로나19 팬더믹에 따른 비대면 추세 가속화로 점차 주목받고 있다.</p>
  <cite>[네이버 지식백과] 메타버스 (시사상식사전, pmg 지식엔진연구소)</cite>
</blockquote>

🌱 다른 출처로부터 인용된 블록을 정의할 때 사용하며, 보통 들여쓰기를 사용하여 표현한다.
🌱 긴 인용문에 적합하다.

`<q>`

🌱 다른 출처로부터 인용된 블록을 정의할 때 사용한다.
🌱 짧은 인라인 인용문에 적합하다.

`<cite>`

🌱 문단 내에 영화나 책의 제목이나, 인용, 주석이 필요할 때 사용한다.

`<dfn>`

<p><dfn>메타버스</dfn>는 현실세계와 같은 사회·경제·문화 활동이 이뤄지는 3차원 가상세계를 일컫는 말로, 1992년 미국 SF 작가 닐 스티븐슨의 소설 《스노 크래시》에 처음 등장한 개념이다.</p>

🌱 용어(term)의 정의를 나타낼 때 사용한다.
🌱 부모 요소에는 해당 용어에 대한 정의나 설명이 반드시 포함되어야 한다.

`<code>`

<p><code>new Date()</code>는 시간과 날짜를 표현하는 객체입니다.</p>

🌱 짧은 코드 조각의 일부분을 나타낼 때 사용한다.

`<code>`

<p><code>new Date()</code>는 시간과 날짜를 표현하는 객체입니다.</p>

🌱 짧은 코드 조각의 일부분을 나타낼 때 사용한다.

`<kbd>`

<p><kbd>Ctrl</kbd>키와 <kbd>/</kbd>키로 주석을 달 수 있습니다.</p>

🌱 키보드 입력을 나타낼 때 사용한다.

`<sup>`

<p><var>a<sup>2</sup></var> + <var>b<sup>2</sup></var> = <var>c<sup>2</sup></var></p>

🌱 위 첨자 요소
🌱 보통 더 작은 글씨 크기를 가지고, 기준선이 위로 올라가있다.

`<sub>`

<p>2H<sub>2</sub> + O<sub>2</sub> → 2H<sub>2</sub>O</p>

🌱 아래 첨자 요소
🌱 보통 더 작은 글씨 크기를 가지고, 기준선이 아래로 내려기있다.

`<wbr>`

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
<p>Lorem ipsum dolor sit amet conse<wbr>ctetur adipisicing elit...</p>

🌱 현재 요소의 줄 바꿈 규칙을 무시하고 브라우저가 줄을 바꿀 수 있는 위치를 나타낸다.
🌱 여는 태그는 필수이며 닫는 태그는 존재하지 않는다.

`<figure>`

<figure>
    <img src="http://placeimg.com/200/100">
    <figcaption>가상이미지</figcaption>
</figure>

🌱 독립적인 콘텐츠를 표현한다.
🌱 해당 콘텐츠의 위치가 주요 흐름과는 독립적이어서 제거해도 문서의 흐름에 영향을 주어서는 안된다.

`<figcaption>`

🌱 <figure> 요소의 캡션을 정의할 때 사용한다.

`<a>`

🌱 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용한다.

download

<a href="http://placeimg.com/200/100" download>이미지 다운로드</a>

🌱 링크로 이동하는 대신 사용자에게 URL을 저장할지 물어봅니다. 값을 지정할 수도 있고, 지정하지 않을 수도 있다.
🌱 IE는 지원하지 않는 속성이다.
href

<a href="./index.html">상대 URL로 연결</a>
<a href="https://www.naver.com">절대 URL로 연결</a>
<a href="mailto:abc@naver.com">이메일 주소로 연결</a>
<a href="tel:+49.157.0156">전화번호로 연결</a>
<a href="#scetion">같은 페이지의 요소로 연결</a>
<a href="#">현재 페이지의 최상단으로 이동</a>
<a href="#top">현재 페이지의 최상단으로 이동</a>

🌱 브라우저가 지원하는 모든 URL 스킴을 사용할 수 있다.
🌱 tel링크는 휴대전화에서는 번호를 자동으로 입력한다.
target

<a target="_blank" href="https://www.naver.com">새로운 탭/창을 여는 링크</a>

🌱 문서를 클릭했을 때 문서가 열릴 위치를 명시한다.
💡_blank : 링크된 문서를 새로운 윈도우나 탭(tab)에서 오픈한다.
💡_self : 링크된 문서를 링크가 위치한 현재 프레임에서 오픈한다. 기본값으로 생략이 가능하다.
💡_parent : 링크된 문서를 현재 프레임의 부모 프레임에서 오픈한다.
💡_top : 링크된 문서를 현재 윈도우 전체에서 오픈한다.

임재희

하루하루는 성실하게 인생 전체는 되는대로✏️

0개의 댓글

html5 시맨틱 태그 정리

html

🤷‍♂️ 시맨틱 태그를 사용하는 이유?

🔍 시맨틱 태그 종류를 알아보자

<header>

<nav>

<main>

<footer>

<aside>

<section>

📍 <article>과의 차이점

<article>

<details>

<mark>

<time>

<address>

<b>

<strong>

<em>

<i>

<small>

<del>

<s>

<ins>

<u>

<blockquote>

<q>

<cite>

<dfn>

<code>

<code>

<kbd>

<sup>

<sub>

<wbr>

<figure>

<figcaption>

<a>

0개의 댓글

`<header>`

`<nav>`

`<main>`

`<footer>`

`<aside>`

`<section>`

📍 `<article>`과의 차이점

`<article>`

`<details>`

`<mark>`

`<time>`

`<address>`

`<b>`

`<strong>`

`<em>`

`<i>`

`<small>`

`<del>`

`<s>`

`<ins>`

`<u>`

`<blockquote>`

`<q>`

`<cite>`

`<dfn>`

`<code>`

`<code>`

`<kbd>`

`<sup>`

`<sub>`

`<wbr>`

`<figure>`

`<figcaption>`

`<a>`