Web : semantic 하게 웹을 짠다는 것.

Semanitc?

semantic이란 의미론적 이라는 뜻이다. 즉, 웹을 semantic하게 짠다는 것은 HTML이 의미를 담고 있다는 것이다.

따라서 HTML을 보고 이게 어떤 의미인지 알기 위해서는 각 element에 의미에 맞게 HTML을 작성해줘야한다.

 

Example

<div>와 <p> 태그를 보면 어떤 것이 paragraph를 의미하는 것인가? 자세히 보지 않더라도 p 태그가 paragraph를 나타내는 것을 우리는 알 수 있다. 

하지만 OOCSS를 사용하려면, div 태그로 감싸주는 것이 좋다. 그렇다면 여기에 어떻게 의미를 부여할 것인가??

이것에 대한 해답이 바로 semantci 하게 웹을 짜는 것이다.

 

1. main : <main>---</main>

• 페이지의 main content를 나타낸다.
• 한 번만 쓴다.

2. header : <header>---</header>

• 페이지의 header를 나타낸다. 머리부분을 나타낸다.

3. section : <section>---</section >

• 관심사 그룹, 주제에 따라 구획을 구분하기 위해 사용하는 element.
• 이 section의 관심사가 무엇인지 검색 robot에 알려준다.
• h1~h6 태그가 무조건 있어야한다.

4. article : <article>---</article>

• 관심사에 따라 구획을 구분하기 위해 사용하는 element.
• 이 article의 관심사가 무엇인지 검색 robot에 알려준다.
• h1~h6 태그가 무조건 있어야한다.
• article 태그로 감싼 부분이 독립적으로 존재해도 되는 경우이다.

article vs section

<main>
    <h1>바나나</h1>
    <p>바나나는 바나나는 파초과 바나나 속에 속하는 숙근성 영년생 열대과수를 총칭한다.</p>
    <section>
      <article>
          <h2>다이어트 식품</h2>
          <p>바나나는 탄수화물이 약 27%이고 비타민 A와 C가 풍부하며, 100g당 87kcal의 열량을 갖는다.</p>
      </article>
      <article>
          <h2>다양한 섭취법</h2>
          <p>바나나는 열매를 주식으로 이용할 뿐 아니라 미성숙한 열매는 채소로 다양한 요리에 응용된다.</p>
      </article>
    </section>
</main>

이 부분이 제일 힘들었다. 도대체 뭐가 다른거야 article이랑 section이랑???

 

article은 내용이 독립적이고 스스로 설 수 있는 내용이라면 article 을 사용한다.

section은 내용이 서로 관계가 있다면 section을 사용한다.

 

예를 들면 코딩관련된 content을 묶을 때 section으로 묶고 python, javascript, HTML, CSS 등등 독립적인 article 태그로 나누는 것이다.

또 하나의 예를 들면, HTML에 대한 article 태그를 걸었다면, Tag, Position, Border, Font 등등 여러가지의 주제로 나뉘는 section 태그로 나눌 수 있다.

 

이처럼 article로 section을 묶어도 되고, section을 article로 묶어도 된다.

 

즉, main, header, article, section 태그를 쓰면서, 이 태그가 어떤 부분을 말하는지 추가로 적어줄 수 있어, HTML 태그만을 보고 이 부분이 어떤 것을 의미하는지 알려주는 것이 semantic하게 web을 짠다는 것이다.

 

출처 : 

 

https://medium.com/@soeunlee/%EC%8B%9C%EB%A7%A8%ED%8B%B1%ED%95%98%EA%B2%8C-html%EC%9D%84-%EC%A7%A0%EB%8B%A4%EB%8A%94-%EA%B2%83-90612ffc988e

시맨틱하게 HTML을 짠다는 것.