[220905] HTML태그별 사용 용도 / 마크업 시 알아둘 것

✏️ 오늘 배운 내용

• 시멘틱 마크업이란?
• HTML 태그별 사용 용도
• HTML 마크업 작업을 할 때 알아둘 것
• 다음에 배울 내용

---

 

 

📖 시멘틱 마크업(Semantic Markup)이란?

- Semantic: 의미론적인

- Markup : HTML 태그로 문서를 작성하는 것

- 시멘틱 마크업이란, HTML 태그들을 문서 내용에 맞게 선택하여 작성하는 것을 말한다.

 

• 시멘틱 마크업을 사용해야 하는 이유
  1. SEO : 검색엔진 최적화에 유리하다.
  2. 웹접근성 : 시각장애인들도 웹을 편리하게 접할 수있도록 도와준다.
  3. 유지보수 : 정리된 마크업은 코드 식별이 용이하다.

• 웹 에이전트란?

• 서치 엔진의 데이터베이스를 구축하기 위해 인간(사용자)를 대신하여 정보 자원을
  수집, 검색하고 추론하여 다른 에이전트와 상호 정보 교환 등의 일을 수행하는 지능형 에이전트이다.
• 지능형 에이전트는 시맨틱 웹 기반 응용의 핵심 요소라 할 수 있다.
• <a>태그는 구글 검색 엔진의 정확도를 높여준다.

 

 

 

📖 HTML 태그별 사용 용도

<section>

- 구역을 나누는 태그로, 구역의 이름을 의미하는 heading 요소 사용을 권장한다.

- <section>을 사용할 땐, 형제로 쓸만한 요소들이 있을 때 사용한다(남용하지 말 것)

<header></header>
<main>
  <section></section>
  <section></section>
</main>
<footer></footer>

 

<article>

- 상품, 위젯, 마이페이지나 + 버튼과 같은, 사이트의 어느 곳에서 사용해도 흐름이 깨지지 않는 곳에 사용

- <article> 요소의 사용이 헷갈리는 경우엔, 해당 요소가 페이지 내용에 의존성이 있는가를 따져봐라.

 

<aside>

- 광고이거나, 페이지 내용과 직접적이 아닌, 간접적으로 연관이 있을 때 사용

<!-- 링크 걸린 광고를 표현할 때 -->
<a href="#">
  <aside></aside>
</a>

 

<h1~6>

- <section>에 사용되는 heading 요소는 그 구역의 내용 전체를 포괄해야한다.

- heading 태그를 사용한다는 것은 페이지를 구조화 한다는 의미이다.

- 사용자 화면에 제목이 보이지 안아도 해딩 마크업을 해야한다.

- <h1>은 섹션 당 1개가 아니라, 페이지 당 1개이다.

- headings map 으로 사이트 구조화를 보면서 공부하면 더 좋을 것이다.

 

<a>

- 다른 페이지로 이동한다

- 페이지 내부의 이동(마우스 scroll top btn)

 

<button>

- 버튼 클릭 시, 모달창 구현할 때 사용

 

<ol>

- 날짜가 있는 게시판의 리스트

 

<small>

- 저작권 관련에 사용  예) copyright...

 

<time>

- 시간 정보를 나타낼 때 사용

 

 

 

📖 HTML 마크업 작업을 할 때 알아둘 것

• HTML 구조를 작성할 때, 최대한 태그의 성질을 살려라.
• 코드를 작성할 때 명확한 의도와 생각을 가지고 작성해야한다.
• 객체 지향적으로 HTML 구조를 작업해야 한다.
• 하나하나를 사물로 바라보는 마인드를 가져야 한다
  → 모듈화(재사용성을 감안한 방법론)
• 구조와 체계가 제대로 잡히지 않은 마크업은 검색 엔진 입장에서도 페이지 분석이 힘들다.

 

 

 

📖 다음에 배울 내용

• CSS 방법론, OOCSS

 

 

 

📚 Reference

• [웹의 아버지 팀 버너스리] (https://www.youtube.com/watch?v=OM6XIICm_qo&t=332s)
• [SEO 기본 가이드] (https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=ko&visit_id=637979483710948537-736098899&rd=1)