[HTML5] 11. 시멘틱 요소

11. 시멘틱 요소

​

1. 시멘틱 요소란?

HTML 요소에 대하여 정리하기에 앞서 웹페이지의 일반적인 구조를 살펴 보면 오른쪽 그림과 같다. 이전에 <div>요소나 <table>요소를 사용하던 것을 HTML5에서는 시멘틱(semantic, 의미있는, 의미의) 요소들을 추가하여 요소의 이름만으로도 문서의 영역과 내용을 쉽게 판단할 수 있도록 하였다.(header, hgroup, nav, section, article, aside, footer)

시멘틱 인라인 요소는 텍스트의 일부에 대하여 마크업하는 텍스트 요소이다.(mark, time, meter, progress, ruby, wbr)

시멘틱 블록 요소는 문서 body 영역의 블록에 사용하는 요소이다.(details)

사용자로부터 필요한 자료를 입력받아 서버로 전달하는 입력 양식을 웹폼이라 한다.(datalist, output)

 

[그림] 웹페이지의 시멘틱 요소

​

2. 시멘틱 요소

​

1) header

​

① 요소의 기능

​

<header>요소는 웹페이지의 이름, 로고 등을 표현하는데 주로 사용한다.

② 주요 속성(또는 하위 요소)의 기능

​

<header> 요소의 하위 요소에는 <h1>~<h6>, 로고나 아이콘 등이 있으며, 주로 문서의 상단에 위치하지만, 문서 어디에 위치해도 상관없다. <section>요소와 <article> 요소 내에서도 사용할 수 있고, 내용 중간에 사용될 때는 머리글의 역할을 한다.

<header>요소는 <section>, <header>, <footer> 요소를 포함할 수 없다.

③ 활용 예시

​

<header>

<h1>기루네집</h1>

<p>이길우 홈페이지에 온 것을 환영합니다.</p>

</header>

​

2) hgroup

​

① 요소의 기능

​

<hgroup> 요소는 제목과 부제목을 함께 나타내기 위하여 서로 다른 헤딩 요소를 사용하는 경우에 이들을 묶어 주는 역할을 한다.

② 주요 속성(또는 하위 요소)의 기능

​

<hgroup> 요소의 하위 요소에는 <h1>~<h6>이 있다.

③ 활용 예시

​

<hgroup>

<h1>인생철학</h1>

<h2>삶이란 무엇인가?</h2>

</hgroup>

​

3) nav

​

① 요소의 기능

​

<nav> 요소는 웹페이지에서 내비게이션 역할을 하는 링크들을 모아서 메뉴를 구성하기 위하여 주로 사용한다.

② 주요 속성(또는 하위 요소)의 기능

​

<nav> 요소의 하위 요소로는 하이퍼링크를 할 수 있는 <a> 태그를 주로 사용한다. 웹페이지의 모든 링크를 <nav> 태그로 감싸야 하는 것은 아니고 중요한 링크만을 감싼다.

③ 활용 예시

​

<nav>

<a href="/life/">삶</a> | <!-- "|"는 메뉴항목 구분선 -->

<a href="/health/">건강</a> |

<a href="/money/">돈</a> |

<a href="/honor/">명예</a>

</nav>

​

4) section

​

① 요소의 기능

​

<section> 요소는 하나의 주제로 구성된 각 면을 나타내는데 사용한다. 즉, 문서를 다른 주제로 구분하는데 주로 사용한다.

② 주요 속성(또는 하위 요소)의 기능

​

<section> 요소의 하위 요소로는 <h1>~<h6>을 사용하는데, 그중 오직 하나만을 사용해야 한다. 2개 이상이 사용되는 경우에는 헤딩 요소의 레벨에 따라 결정된다. 같은 레벨의 헤딩 요소가 있을 때에는 하나의 <section>요소가 2개의 <section>요소로 취급된다. 하나의 <section>요소에서 제목과 부제목을 나타낼 때에는 <hgroup>요소를 이용한다. 하나의 주제 안에 다른 세부 주제가 있을 때에는 <section> 태그를 중첩하여 사용할 수 있다. 또한, 여러 개의 <article>을 <section>으로 묶을 수 있고, 여러 개의 <section>을 <article>로 묶을 수 있다.

③ 활용 예시

​

<section>

<article>

<h3>Live is life</h3>

<p>Live is life라는 노래에서 처럼 살아가는 것이 삶이 아닐까?</p>

</article>

</section>

​

​

5) article

​

① 요소의 기능

​

<article>요소는 기사, 블로그 포스트, 포럼 포스트와 같은 개별 콘텐츠를 나타낼 때 주로 사용한다.

② 주요 속성(또는 하위 요소)의 기능

​

하위 요소로 <h1>~<h6>을 사용한다. 여러 개의 <article>을 <section>으로 묶을 수 있고, 여러 개의 <section>을 <article>로 묶을 수 있다.

③ 활용 예시

​

<article>

<h3>공부</h3>

<p>공부는 평생동안 해야 하는 것이다.</p>

</article>

​

​

6) aside

​

① 요소의 기능

​

<aside>요소는 주요 주제가 아닌 주제나 참고가 되는 내용을 나타날 때 주로 사용한다. 웹페이지의 왼쪽이나 오른쪽에 배치한다.

② 주요 속성(또는 하위 요소)의 기능

​

<aside>요소를 적용하면서 웹페이지의 왼쪽이나 오른쪽으로 배치하기 위해서는 id 속성을 이용하여, <style> 요소에 float 속성을 지정하여야 한다.

③ 활용 예시

​

aside#aside { width:30%; float:right; }

...

<aside id="aside">

<h3>aside</h3>

</aside>

 

​

7) footer

​

① 요소의 기능

​

<footer>요소는 제작자 정보나 저작권 정보등을 담기 위해 주로 사용한다.

② 주요 속성(또는 하위 요소)의 기능

​

하위 요소로 <h1>~<h6>을 사용한다.

③ 활용 예시

​

<footer>

<h3>footer</h3>

COPYRIGHT(c)이길우 All Rights Reserved.

</footer>

​

​

8) mark

​

① 요소의 기능

​

기존 HTML의 <strong> 태그처럼 텍스트의 특정 부분을 강조하기 위해 HTML5에서는 <mark> 요소를 사용한다. <mark> 태그를 사용하면 노랑색 형광펜으로 표시된다.

② 주요 속성(또는 하위 요소)의 기능

​

mark의 색상이나 폰트를 변경하기 위해서는 CSS를 사용한다.

③ 활용 예시

​

mark { background-color: red; color: black; font-weight: bold; }

...

<p><mark>article</mark> 기사 내용 1</p>

​

​

9) time

​

① 요소의 기능

​

<time> 요소는 시간이나 날짜 표현에 의미를 부여할 때 사용한다. 문서에 ‘2022-04-01’이라고 표기하면, 시스템적으로는 이것이 문자열인지 시간/날짜인지 구분하지 못한다. 즉, <time> 요소는 시간/날짜를 시스템에서 인식할 수 있도록 하는 요소이다.

② 주요 속성(또는 하위 요소)의 기능

​

datetime 속성 값을 지정해서 적절한 검색 결과나 알림 같은 특정 기능을 구현할 때 사용할 수 있다.

③ 활용 예시

​

<time datetime=“2022-04-01 14:54:39”>2022-04-01 14:54:39</time>

​

10) meter

​

① 요소의 기능

​

<meter> 요소는 일정 범위 안의 값에서 특정 스칼라(scalar, 방향의 구별은 없고 하나의 수치만으로 완전히 표시되는) 값이 어느 정도인지 나타낼 때 사용한다. 게이지 바처럼 표시된다.

② 주요 속성(또는 하위 요소)의 기능

​

- form: <meter> 요소가 포함될 하나 이상의 <form> 요소 id 명시

- value: 실제 측정 값(필수)

- min, max: 최소값, 최대값, min ≤ value ≤ max

- low, high: 허용되는 최소값, 최대값, min ≤ low ≤ high ≤ max

- optimum: 최적의 기대치, min ≤ optimum ≤ max

③ 활용 예시

​

<p>살아온 인생 : <meter min="0" max="100" value="55"></meter>55세/100세</p>

​

11) progress

​

① 요소의 기능

​

<progress> 요소는 어떠한 작업의 진행 상태를 동적으로 보여줄 때 사용한다. <meter> 요소는 정적인 상태, <progress> 요소는 동적인 상태를 나타낸다. <progress> 요소는 동적인 값을 나타내야 하기 때문에 자바스크립트와 함께 사용하여 값을 업데이트 해 주어야 한다.

② 주요 속성(또는 하위 요소)의 기능

​

- value: 현재 진행중인 상태의 값. 0.0 또는 1.0 ~ max

- max: 최대값

- position: 값의 현재 위치를 비율로 표시

③ 활용 예시

​

<p>다운로드 진행상황 : <progress value="20" max="100"></progress></p>

​

​

12) ruby

​

① 요소의 기능

​

<ruby> 요소는 일본어나 한자의 기본 문자열에 발음법이나 의미를 기입한 텍스트를 말한다.

② 주요 속성(또는 하위 요소)의 기능

​

- rt 요소: <ruby> 주석 텍스트를 표시

- rp 요소: <ruby> 텍스트 주변에 괄호를 두어 <ruby>를 지원하지 않는 웹브라우저를 위해 사용

③ 활용 예시

​

<p>

<ruby>

漢 <rp>(</rp><rt>한</rt><rp>)</rp>

字 <rp>(</rp><rt>자</rt><rp>)</rp>

</ruby>

</p>

​

​

13) wbr

​

① 요소의 기능

​

<wbr>(word break opportunity) 요소는 텍스트에서 줄바꿈을 할 위치를 지정할 때 사용한다.

② 주요 속성(또는 하위 요소)의 기능

​

줄바꿈을 지정해도 실제로 줄바꿈을 수행하는 것은 아니고, 웹브라우저의 크기에 맞추어 줄바꿈하여 보여줄 지점을 지정하는 것이다.

③ 활용 예시

​

<p>http://this<wbr>.is<wbr>.a<wbr>.really<wbr>.long<wbr>.example<wbr>.com/With<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages</p>

​

14) details

​

① 요소의 기능

​

<details>요소는 사용자의 요구에 세부적인 정보를 보여주거나 숨기기 위해 사용한다.

② 주요 속성(또는 하위 요소)의 기능

​

<summary>요소는 <datails>요소의 하위요소로 세부정보의 캡션 역할을 하며, 캡션을 클릭하면 세부정보가 나타난다. <summary>요소가 없으면 “세부정보”라는 제목이 기본으로 표시된다.

③ 활용 예시

​

<details>

<summary>인생이란?</summary>

어떻게든 살아나아가는 것이 인생이다.

</details>

​

15) datalist

​

① 요소의 기능

​

<datalist>요소는 <input>요소의 텍스트 타입에 대한 옵션 목록을 지정하는데 사용한다. 지정한 텍스트 타입이 포커스를 받으면 옵션 목록이 드롭 다운 모양으로 나타난다.

② 주요 속성(또는 하위 요소)의 기능

​

<datalist>요소와 <input>요소를 연결하기 위해서는 <datalist>요소의 id속성과 <input>요소의 list속성을 동일 값으로 지정해야 한다. <datalist>요소의 각 옵션은 <option> 하위 요소를 사용해서 지정한다.

③ 활용 예시

​

<input list="hobby" name="취미" />

<datalist id="hobby">

<option value="바둑">

<option value="마라톤">

</datalist>

​

16) output

​

① 요소의 기능

​

<output>요소는 특정 <input>요소의 입력 값에 따라 계산된 값을 화면에 출력할 때 사용한다.

② 주요 속성(또는 하위 요소)의 기능

​

<output>요소의 name은 <form>요소의 id로부터 값을 받아 오는 것을 의미하고, for=“a b”는 출력값에 영향을 미친 요소를 나타내며, parseInt는 입력값을 정수값으로 변환하는 함수이다. <input>요소의 value는 초기값을 나타내고, <output>과 </output>사이의 값은 초기값이며, <input>요소의 입력 값에 따라 변한다.

③ 활용 예시

​

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">

<input type="range" id="b" name="b" value="2" /> +

<input type="number" id="a" name="a" value="1" /> =

<output name="result" for="a b">3</output>

</form>

​

3. 기타

​

- <data>: 기계가 읽을 수 있도록

- <figure>: 독립요소 표시

- <figcaption>: figure 하위요소, 캡션

- <main>: 메인

​

#HTML5 #HTML #태그 #tag #시멘틱요소 #시멘틱 #semantic

 

참고:

- 시멕틱 웹: https://poiemaweb.com/html5-semantic-web

- 위키피디아: https://ko.wikipedia.org/wiki/시맨틱_웹

시맨틱 웹 - 위키백과, 우리 모두의 백과사전

 

세상을 링크하라!!! 모든 링크를 한 자리에...
링크닷컴: https://linkdotcom.mycafe24.com/

유용한 링크, 링크닷컴 #무료 #링크사이트 #링크사이트