[TIL-html] Semantic HTML-1

sgr2134·2021년 3월 10일
0

HTML

목록 보기
1/3
post-thumbnail

HTML은 왜 중요할까?

우리가 흔히 보는 웹페이지는 HTML(Hyper Text Markup Language)을 기반으로 만들어진다. HTML은 마치 집을 지을때 뼈대 같은 것이다. 페이지의 시각적인 효과를 더해주는 css나 동적인 효과를 주는 javascript처럼 눈에 보이는 것은 덜 하지만, 뼈대가 없으면 집이 지어질 수 없듯이 HTML이 없으면 문서를 만들 수 없다. 따라서 HTML은 document 자체라고도 할 수 있다.

우리가 집을 지을 때, 구조를 대충 짓고 만든다면 아무리 예쁜 외형을 가져도 무너지기 쉽상이듯 HTML을 허술하게 만든다면 겉으로는 문제가 없어보여도 결국 구조적인 문제가 발생해 페이지를 다시 작성하게 되는 개고생을 하게 될 수 있다.

Semantic HTML

그러므로 HTML을 작성할 때 무엇보다 중요한건 문서의 구조를 명확하게 보이고 정보의 위계를 잘 파악할 수 있도록 구성하는 것이다.

잘 만들어진 HTML 구조는 검색엔진의 최적화에 유용하고 무엇보다도 협업이 중요한 개발 일에서 사람들과의 원활한 의사소통을 돕는다.

그럼 어떻게 HTML을 구성해야 잘 만들었다고 할 것인가? 기본적으로 Semantic elements를 적절한 위치에 사용하여 구조화를 시킬 수 있다.

Semantic Elements

Semantic Elements는 말 그대로 의미를 가진 요소이다. 집을 지을 때 지붕, 기둥, 문 등 각각의 구조에 이름을 붙이는 것과 같은 것이라 할 수 있겠다.

대표적인 Semantic elements의 요소에는 위 그림과 같은 header, nav, section, article, aside, footer 등을 들 수 있겠다. 이외에도 details, figcaption, figure, main, mark, summary, time 등 다양한 태그가 있지만 굳이 다 사용할 필요는 없고 자신이 필요한 요소들만 사용하면 될 것이다.

(Semantic tag는 일반적으로 어떤 의미를 가지는지는 알 수 있지만 사실 사용자가 정의하는 대로 이름을 붙일 수 있다! 따라서 처음에 이름을 잘 붙이는게 중요할 것이다. )
(내가 예시로 나누어 본 Semantic elements)

오늘 배운 사실

  • HTML 코드작성 핵심은 명확한 문서, 정보의 구조
  • 구조를 잘 만들기 위해 필요한 것은 semantic 요소!

다음에 배울 내용

  • semantic elements의 구체적인 요소와 실제 적용한 페이지 만들어보기

출처

profile
못하는것도 지겨워서 공부한 걸 기록합니다.. 나아지겠죠 🙏

0개의 댓글