기본지식(HTML)

Doctype 이란?

👉 내가 작성하려는 HTML 문서가 어떤 문서 형식을 갖고 있는 지 선언해주는 것을 말한다.

웹 브라우저에서는 문서 형식 선언이 없으면 *쿼크모드로 렌더링을 해서 각 브라우저마다 다른 형태의 결과물을 보여주게 되는데 이것을 방지하기 위해 문서 형식 선언을 하고 그로인해 HTML 문서를 표준모드로 렌더링 할 수 있게된다.

*쿼크모드

오래된 웹 페이지의 하위 호환성 유지를 위해 사용되며, W3C나 IETF의 표준을 엄격하게 준수하지 않는다. 같은 코드라도 웹 브라우저마다 다르게 해석해서 다른 결과물을 보여준다.

시맨틱 태그란?

시맨틱 태그는 문서의 구조와 의미를 브라우저와 개발자 모두에게 명확하게 설명한다. 시맨틱 태그를 사용하면 유저가 웹에서 검색을 했을 때 웹페이지의 해당 코드를 찾아 그 정보를 기반으로 의미있는 내용이 출력되도록 도와준다. 이렇게 웹 문서를 구조화하여 시맨틱 태그를 사용한 웹을 시맨틱 웹이라고 한다.

시맨틱 태그들

<header> : 화면 상단에 위치하며 보통 로고, 로그인, 회원가입 등을 포함합니다.

<nav> : 보통 <header> 영역의 아래쪽에 위치하며 메뉴를 표현합니다.

<section> : 태그는 주제별 컨텐츠의 영역을 나타낸다. 문맥 흐름 중에서 컨텐츠를 주제로 묶을 때 사용하며, 그 안에는 섹션 제목을 나타내는 ~제목 태그가 함꼐 사용된다.

<main> : 문서의 주가 되는 컨텐츠를 정의

<article> : <article> 태그는 주로 <section> 태그 안에 들어가며, 글자가 많이 들어간 부분을 의미한다.컨텐츠 내용을 넣으며, 웹 상의 실제 내용을 넣고, 블로그의 포스트나 웹 사이트의 내용, 사용자가 등록한 코멘트, 독립적인 웹 컨텐츠 항목을 포함한다.

<aside> : 흔히 사이드바라고 불리는 곳으로 보통 광고, 검색 기능, 카테고리 등을 표현합니다.

<footer> : 화면 하단에 위치하며 보통 이메일, 저작권 표시 등을 표현합니다. 제<footer>태그 안에는 <section>, <article> 등 다른 레이아웃 태그들을 모두 사용할 수 있으며, 이런 태그를 이용해서 푸터 안에 다양한 정보를 넣는다.

<figcaption> : figure 에 대한 자막 정의

<figure> : 사진이나 다이어그램과 같은 부가적인 요소를 정의

<mark> : 문서의 주가 되는 컨텐츠를 정의

<summary> details에 대한 보이는 요소를 정의

<time> 날짜/ 시간 정의

시맨틱 마크업 작성의 장점

- 접근성이 좋아짐

-* SEO(Search Engine Optimization)

- 코드 가독성이 좋아짐

- 코드와 데이터의 재사용성이 높아짐

SEO를 고려한 시멘틱 태그

우리가 검색을 했을 때 컴퓨터는 어떠한 원리로 검색에 관련된 정보를 내놓는것일까? 정보를 접했을 때 눈으로 내용을 훑고나서 내용 분류를 할수있는 인간과 달리 👉 검색 엔진의 크롤링은 HTML 코드 만으로 그 의미를 인지하고 정보를 수집해야한다. 어떤 태그가 어떤 기능을 하는 지 크롤링은 분별할수 없기에 효율적으로 데이터를 추출하지 못한다. 따라서 이를 해결하고자 단순히 시각적인 형태로만 보는 것이 아닌 데이터의 구조를 ‘의미’와 ‘관련성’에 따라 개발자가 의도하여 요소의 의미를 담은 코드를 구축하였고 이를 시멘틱한 마크업이라고 한다. 특정한 태그에 의미를 부여해서 웹페이지를 만드는 것을 시멘틱 웹이라고 하고 시멘틱 태그가 의미를 가짐으로써 검색엔진의 크롤링에게 사이트에 대한 정보를 비교적 정확히 제공할 수 있게 된다.