Semantic HTML 작성하기

1. Semantic(시맨틱) 이란?

 시맨틱이란 단어의 뜻을 전반적으로 우리 말로 나타내자면 코드 조각에 내포된 의미라고 볼 수 있습니다.

 

  예를 들어 Javascript의 경우, 특정 라인의 JS가 실행됐을 때 어떤 효과가 일어나는지의 의미합니다. 코드를 작성할 때 함수 이름 등을 Semantic을 고려해서 지으면 가독성이 좋고 코드를 이해하기가 훨씬 쉬워집니다. 예를 들어, '복숭아'라는 항목을 가진 HTML 요소를 생성하는 함수를 상상해봅시다. 단순히 build('Peach')라고 함수 이름을 지을 수 있을테지만 createLiWithContent(‘Peach') 라고 작성하면 동작 자체는 똑같을지 몰라도, 코드 실행 효과가 함수 이름에 그대로 나타나게 되어 훨씬 코드를 이해하기 쉽고 보기 좋을 것입니다.

 

  CSS의 경우, 선택자의 형태에 따라 Semantic을 담아낼 수 있는가의 차이가 생깁니다. 예를 들어, div > ul > li 라는 선택자를 통해 특정 HTML 요소에 접근할 수 있지만  .fruits__item 이라는 선택자를 통해서도 같은 요소에 접근할 수 있을 것입니다. 역시나 원하는 동작을 해내는 코드라는 점에서는 같아도, 선택자만 보고 이 것이 어떤 요소를 가리키는 지를 한 눈에 알 수 있습니다.

 

  HTML의 경우, Semantic은 특히 해당 요소가 어떤 목적이나 역할을 갖고 있는지의 의미를 나타냅니다. 화면에 나타나는 형태, 즉 HTML 코드를 바탕으로 브라우저가 우리에게 보여주는 웹페이지의 겉모습은 같아보여도, 태그를 어떻게 사용했느냐에 따라 HTML코드가 Semantic에 있어서 차이가 날 수 있습니다. 예를들어서 <span>태그를 이용해 한 문장을 화면에 나타낼 수 있지만, 그 내용이 제목에 해당한다면 <h1> 등의 태그를 사용하는 것이 적절합니다. 그래야 태그 이름만 보고도 이 태그가 어떤 내용을 담고 있을지 한 눈에 알아볼 수 있을 것입니다.

 

 

  HTML 태그는 눈에 보여지는 스타일이 아닌, 담는 데이터를 대표해야합니다. 눈에 보여지는 스타일은 물론 태그 자체보단 CSS를 통해서 조정해야합니다. 그렇기에 웹페이지를 잘 만들고 싶은 프론트엔드 개발자라면, HTML 코드를 작성할 때 내가 어떤 태그를 사용해야 내가 그 안에 담을 데이터를 가장 잘 표현할 수 있을지 고민해야합니다. HTML에는 <article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time> 등 100여개가 넘는 Semantic 태그가 존재하기에 각 태그의 의미와 용도를 알아두는 것이 중요하겠습니다.

 

2. Semantic HTML의 장점

  검색엔진에게 웹페이지의 검색 랭킹을 결정할 때 필요한 ‘웹페이지가 담고 있는 내용에서 중요한 키워드들’을 알려줄 수 있습니다. 즉, 검색엔진최적화(SEO)에 유리합니다.

  또한 시각장애인이 스크린리더를 사용할 때, 스크린리더가 웹페이지 구조를 더욱 잘 이해하고 사용자에게 올바르게 전달할 수 있게 해줍니다.

  그리고, Semantic 태그나 이름이 붙여진 클래스들 없이, 의미 없는 div 태그들로만 이루어진 HTML 코드보다, 원하는 코드나 태그를 찾기 쉬워지는 등 코드 가독성이 높아집니다. 즉 코드 자체로 개발자에게 데이터의 유형 등을 알려줄 수 있는 것입니다.

 

3. Semantic HTML을 작성하는 구체적인 팁

1. 수 많은 <div> 태그의 중첩 대신 <main> 태그와 그를 더 작게 그룹화할 수 있는 <section> 태그를 사용합니다. 단, <main>은 한 문서에 하나만 존재할 수 있습니다.
2. <div> 태그 사용 대신 목적에 맞게 <header> 와 <footer> 태그를 통해 헤더와 푸터를 구성하며, 필요시 그 안에 중첩을 사용합니다.
3. 그 내용 자체로 하나의 정보가 되며 문서 구조의 다른 부분에 영향을 미치지 않고 대체될 수 있을 만한 섹션은 <article> 태그를 사용합니다. 예를들어 게시글, 뉴스글과 같은 것들은 <article> 태그에 나타내는 것이 좋습니다.
4. HTML 문서 사이를 이동하기 위한 요소로는 <nav> 태그를 사용합니다.
5. 메인에 속하지 않는 부분은 <aside> 태그를 사용합니다. 예를들어 뉴스 피드, 상업 광고, 뉴스레터 form 등이 여기에 올 수 있습니다.
6. 일러스트레이션, 차트, 사진 등의 컨텐츠는 <figure> 태그를 사용합니다.  <figure> 태그는 <article> 태그의 내용처럼 문서 구조와 독립적인 컨텐츠에 사용합니다. <figcaption> 태그와 함께 사용하는 것을 권장합니다.
7. 한 문서에는 하나의 <h1> 태그만 존재하도록 합니다.
8. <h1>~<h2> 태그를 쓸 때에 중간의 것을 건너뛰지 않도록 합니다. 예를들어 <h1> 태그 없이 바로 <h2> 태그를 사용한다거나, <h2> 태그 없이 <h1>, <h3> 태그를 사용하는 등 순서를 건너뛰지 않아야 합니다.
9. 특수 텍스트를 표현하고자 할 때에는 <b>, <i> 태그 대신 CSS 속성을 이용하도록 하며, 텍스트의 강조(중요함 표시)를 위해선 <strong>과 <em> 태그를 사용합니다.
10. 반드시 inline 요소는 block 요소 안에서 표현합니다. 반대로는 절대 금지!
11. Semantic 태그라고 한들 남용하거나 오용해서는 안됩니다.
12. https://validator.w3.org/ 를 통해 코드를 더블체킹하면 더욱 좋습니다.