HTML의 기본이 되는 시맨틱한 코드를 짜는 법

먼저 시맨틱(semantic)한 코드란 무엇인가? semantic에는 '의미론의'라는 뜻이 담겨있다.

시맨틱한 코드를 짠다는 건 코드에 의미를 부여한다 쯤으로 이해하면 될 듯하다.

더 쉽게 말하면 <div> 태그를 남발하지 말자는 것이다.

 

시맨틱하지 않은 코드의 예

 

<div class="footer">
	<p>This is not semantic!</p>
</div>

 

위 코드를 시맨틱하게 고쳐보자

 

<footer>
	<p>This is a footer</p>
</footer>

 

그렇다 우리에겐 footer가 있는데 저기서 왜 div를 쓰는가?

즉 적재적소에 알맞는 태그들을 알고 있는 게 중요하다.

 

위치에 따른 태그 구분

 

 

• <header> - 페이지 상단
• <nav> - 네비게이션 바
• <main> - 주 콘텐츠. 본문이라고 생각하면 될 듯
• <footer> - 페이지 하단

 

여기서 <header> 태그는 주로 로고나 네비게이션 바를 포함한다.

 

 

미디어를 삽입하는 태그

 

 

• <video src="">video not supported</video>
• <auido src=""></auido>
• <embed src=""/>

 

src에는 미디어 링크를 걸거나 폴더 내 미디어를 첨부할 경우 상대경로를 적는다.

video 태그 사이에 적은 텍스트는 해당 영상이 표시되지 않을 때 대신 나타난다. 

 

embed 태그는 어느 종류의 미디어라도 다 넣을 수 있다.

self-closing 태그로써 단독으로 쓰이며 태그를 닫아주는 것 까지 잊지 말자.

 

figure와 figcaption

 

 

• <figure> - 이미지나 다이어그램, 코드 조각 같은 걸 담을 때 쓴다
• <figcatpion> - 미디어에 대한 설명을 적을 때 쓴다

보통 위와 같이 <figure> 태그 안에 다른 미디어와 <figcatpion>을 같이 넣어 쓴다.

이렇게 하면 위치를 수정해도 미디어와 설명이 따로 떨어지지 않게 할 수 있다.

 

Section과 article

 

 

• section : 같은 테마를 가진 것들
• article :  독립적인 콘텐츠 (article, blog, 코멘트 등)

보통은 section으로 본문 콘텐츠를 구분하는 편이다.

참고로 늘 section과 article이 같이 쓰여야 하는 것은 아니다.

 

Aside의 사용법

 

 

aside 태그는 읽지 않아도 문제가 되지 않는 부가적인 정보를 더할 때 쓴다.

사이드바나 흐름상 방해가 되지 않는 곳에 위치한다.

---

 

사실 html은 태그를 잘 아는 것 보단 어떻게 논리적으로 잘 짜느냐의 문제라고 느낀다.

처음 html을 배웠을 때 참 감이 안왔는데 다른 공부하는 분들께도 도움이 됐으면 해서 정리해둔 걸 올려본다.

혹시 수정할 부분이 있다면 덧글로 알려주길 바란다.

 

📚 Reference

- Codecademy Semantic HTML