의미론적(Semantic) 태그

What are Semantic Elements?

의미론적 태그들은 웹 브라우저나 개발자들에게 명확하게 의미를 묘사하는걸 뜻합니다. <header>, <footer>, <article> 같은 요소들은 의미론적인 태그들로 여겨지게 됩니다. 왜냐하면 이 태그들 안에 있는 컨텐츠들을 정확하게 묘사하는 것 자체가 목적이기 때문이죠. 사실 Semantic tag가 없어도 코드가 돌아가기는 합니다. 하지만 브라우저나 개발자가 그 코드를 읽고 해석할 때 Semantic tag가 있냐 없냐에 따라서 그 코드의 의미가 다르게 다가 올 수도 있죠. 그래서 코드를 짤 때 정확하게 의미를 부여하는게 중요합니다.

 

Semantic Elements in HTML

출처: W3School.com

HTML <section> Element

<section> 태그는 문서 안에 section을 정의하는데 사용됩니다. 다시 말해서 본문을 넣는다고 생각하시면 편합니다. 재미있는건 <secion>안에 <section>을 또 만드는게 가능하다는 점 입니다.

 

HTML <article> Element

<article>은 독립적인 컨텐츠들을 명시할 때 사용됩니다. 예를들어 블로그 글, 뉴스 기사 같은 내용이 들어갑니다. 여기서 중요한건 <article>을 작성할 때는 항상 <h1> 같은 headings가 꼭 들어가야합니다.

 

여기서 재미있는건 <article> 안에 <section>이 들어갈 수 있고 <section> 안에 <article>이 들어갈 수 있다는 점 입니다. 예를들어 뉴스기사를 봤을 때 연예<article>안에 연예 <section>이 들어갈  수 있는겁니다.

 

HTML <header> Element

<header>의 요소는 문서나 section에서 header부분을 명시해줍니다. <header>는 컨텐츠들을 소개할 때 보통 쓰입니다.

여기서 보시다시피 header는 한 곳에서만 쓰이는게 아니라 여러 곳에서 쓰일 수 있습니다.

 

HTML <footer> Element

<footer>는 문서나 section에 footer를 명시할 때 쓰입니다. 주로 문서 작성자, 저작권 정보, 연락처 등에 사용됩니다.

 

여기까지 의미론적인 태그와 어떻게 사용하는지 기본적인 것에 대해서 알아보았습니다. 가독성을 높이기 위해서라도 Semantics tag를 습관화해서 코드를 짜게 되면 훨씬 좋을 것 같네요.