TIL (2021.12.25) - [HTML] 시맨틱 태그
며칠 전에 찾아보았던 가장 많이 사용하는 HTML 태그를 보았을 때, <nav>, <footer>, <header> 이런 태그가 순위에 있었다. 이 태그들은 무엇을 의미하는 걸까?
시맨틱 태그
시맨틱 태그(semantic tag)는 태그를 보고 웹 페이지의 구조를 쉽게 이해할 수 있도록 정의된 태그를 말한다. 시맨틱 태그가 등장하기 전에는 <div id="header"></div> 이렇게 구분하였는데, 가독성도 떨어질 뿐더러, 화면낭독기를 이용했을 때도 웹 문서의 구조를 이해하기 힘들었다. 이러한 점들을 보완하기 위해서 시맨틱 태그가 생겼다.
<header> 태그
<header> 태그는 머리말에 해당. 주로 페이지 맨 위쪽이나 왼쪽에 삽입하고, 주로 검색창을 넣거나 사이드 메뉴를 넣는다.
<nav> 태그
동일한 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크 모음을 나타낸다. 사이트 링크 모음에 많이 사용되기 때문에 여러 <nav> 태그의 경우 id를 따로 지정해주면 된다.
<body>
<!--HEADER-->
<header>
<h1>Sejin's Homepage</h1>
<h2>Welcome to My home</h2>
</header>
<nav>
<ul>
<li><a href="">My data</a></li>
<li><a href="">Photo</a></li>
<li><a href="">interest</a></li>
</ul>
</nav>
</body><section> 태그
콘텐츠를 주제별로 묶을 때 사용하고, 섹션 제목을 나타내는 <h1>~<h6> 태그가 함께 사용된다. <section> 태그 안에 또 다른 <section> 태그를 사용할 수도 있다.
- 스타일 적용, 스크립트 사용 및 단순 영역을 나누기 위해 콘텐츠의 일부를 묶을 경우에는
<div>태그를 사용하면 된다.
<article> 태그
<section>태그와 비슷하지만, <article> 태그는 독립적으로 배포하거나 재사용하더라도 완전히 하나의 콘텐츠가 되는 구획을 나타낸다. 하나의 문서에 여러 개를 쓸 수 있고, 안에 <section> 태그를 넣을 수도 있다.
<aside> 태그
광고나 링크 모음 등 문서의 메인 내용에 영향을 미치지 않는 내용들을 왼쪽이나 오른쪽, 하단에 사이드바에 표시할 때 사용한다.
<iframe> 태그
<iframe> 태그는 다른 웹 문서를 가져와서 삽입하는 것을 인라인 프레임(inline frame)이다.
<iframe src="삽입할 문서 주소" [속성="속성 값]></iframe>
- Visual stuido code 프로그램을 이용해 iframe 태그를 사용하면 속성에
frameborder=""가 있다. 테두리 설정에 대한 속성이며, 0으로 하면 테두리가 없고 1로 설정하면 테두리가 표시된다.
<iframe src="https://velog.io/@sejinee" frameborder="0"></iframe><footer> 태그
사이트 제작자의 연락처 정보와 저작권 정보 등을 표시하는 태그이다. <footer> 태그 안에는 다양한 레이아웃 태그들을 모두 사용할 수 있고, 다양한 정보를 넣을 수 있다.
<address> 태그
<footer> 태그 안에 주로 사용되는 태그로 웹 페이지 제작자의 이름이나 제작자의 웹 페이지 또는 피드백을 위한 연락처 정보를 넣기 위해 사용한다.
<footer>
<address>
<p> 주소: 서울특별시 용산구 한강대로 40 </p>
<p> 연락처 : 02-1234-1234
</address>
<p> © Jin's Comapany. All Rights Reversed.
</footer>오... 시맨틱 태그를 공부하면서 여러 사이트에 들어가 보면서, 이 사이트는 이 태그를 썼을까 하면서 찾아보면서 이 태그를 사용하는 곳은 어떤 곳인지 하나씩 보았다. 아직 나에게 이 태그가 여기 쓰이고, 이 태그가 여기 쓰이고 세세하게 차이를 알아채리는 것은 좀 어려운 것 같다. 크게 <header>, <nav>, <section>, <footer>, <iframe>에 대해서는 알겠지만, 아직 <article>, <address> 부분은 잘 모르겠다. 사이트를 찾아보면서 제일 발견하기 어려웠던 태그들이어서 그런가보다. 더 많은 사이트에서 시맨틱 태그를 찾아보면 알 수 있겠지.
