HTML의 semantic tag에 대해 공부한 점들과 제 생각을 기록합니다. 이 글은 MDN을 토대로 작성됐습니다.

semantic tag

semantic?

HTML에는 다양한 태그가 있다.
그리고 각각의 HTML요소들은 스타일 및 기능에서 세부적인 차이가 있다.

그러나 태그들을 쓰다보면 '이거나 그거나'라고 생각할 때가 생긴다.

HTML요소를 구분하는 가장 큼지막한 기준중의 하나는 '블록 요소냐 인라인 요소냐'이다.
그래서 블록 요소는 div, 인라인 요소는 span, 총 2가지 태그로 전체 HTML페이지 구조를 짜고 있는 자신을 발견할 수 있다.

이 코드는 '나 지금 귀찮다'라는 의사를 전달하는 데 성공적이다.

HTML 태그는 의미를 가져야 한다.

내가 짠 HTML코드가 다른 사람에게도 이해될 수 있게 하려면, 보편적으로 약속된 의미를 가진 태그를 써야 한다.

이미지를 넣는 두 가지 방법

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. <img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

우선 img태그는 명시적으로 해당 요소가 이미지라는 것을 표현할 수 있다. (semantic)
그래서 코드를 다른 사람들과 공유하는 입장에선 img태그가 훨씬 좋다고 생각한다.

background-image 속성의 경우엔 배경 이미지로 쓰기에 편하다는 장점이 있다. img태그는 처음부터 배경이미지가 아닌 하나의 요소로 취급되기 때문에, 같은 부모 요소 안의 다른 요소들과 겹치게 된다. 그래서 position : absolute 속성을 따로 줘야만 요소의 배경 이미지가 된다. 게다가 같은 레이어에 겹치게 될 경우엔 z-index까지 설정해줘야 하므로 참 귀찮은 일이다.

그러나 나는 img 태그를 쓸 것이다. 명시적이니까!

코드를 쓰는 사람은 당장 편하겠지만, 해당 사이트를 볼 미래의 다른 사람들은 계속해서 고통받을 것이다. 이미지 하나를 찾는데 HTML문서의 모든 div태그들을 뒤져보길 원하는 사람은 없다고 생각한다.

다른 여러가지 요소들

위의 요점은 img외에도 다른 많은 태그들에 적용된다. html, body 외에 모든 요소가 div인 것보다, 요소의 위치에 따라 semantic한 태그를 쓴다면 보는 사람이 요소의 역할과 위치를 파악하는 데 유용할 것이다.

가령 최상단에 있는 요소는 header, 네비게이션 바는 nav, 사이드에 있는 요소는 aside, 여러개의 큰 요소는 section, 그 자식 요소들은 article로 이름을 지어주면 된다.

내 생각

semantic 스타일을 유지하는 것은 실력보다는 기본기인 것 같다. 그리고 꾸준한 노력이 필요한 일이라고 생각한다.

생각일 뿐이다. 지금은 이론적으로 알고 넘어가지만, 실무 경험이 쌓여야 왜 semantic태그를 쓰는지 제대로 감이 올 것 같다.