웹 표준
웹?
WEB(World Wide Web). 인터넷 상에서 정보를 고유하고 검색할 수 있는 전 세계적인 시스템이다. 웹은 인터넷을 통해 웹 페이지, 이미지, 동영상, 문서 등의 다양한 형태의 콘텐츠를 제공하며, 이러한 콘텐츠는 웹 브라우저라고 하는 소프트웨어를 통해 열람 할 수 있다.
브라우저?
사용자가 웹 페이지를 열람하고 탐색할 수 있는 소프트웨어가 브라우저다. 일반적으로 웹 브라우저는 사용자 인터페이스를 제공하며, 웹 페이지의 텍스트, 이미지, 링크 등을 표시하고 상호작용할 수 있도록 한다.
웹 표준이 왜 생겼나?
하나의 브라우저만 있는 것이 아니라 여러 개의 브라우저들이 생겨났다.
개발자 입장에서는 각 브라우저마다 따로 개발을 해주었다.
이런 상황때문에 웹 개발의 형식을 통일 시킨 것이 웹 표준이다.
Semantic HTML
웹 표준에서는 HTML을 시멘틱하게 작성하는 것의 중요성을 강조한다.
원래는 <div>와 <span> 요소로만 충분히 화면 구조를 만들 수 있다.
하지만 한눈에 보기에는 알아보기 힘들다.
<header>, <nav>, <main>, <article>, <section>, <aside> 같이 요소가 어떤 내용을 담게 될지 어떤 기능을 하게 될지 확실하게 의미를 가지고 있는 요소를 시멘틱 요소라고 한다.
Semantic MTML의 필요성
- 개발자 간 소통
<div>,<span>으로만 만들어진 HTML 코드보다는 시멘틱 요소를 사용하면 보기에 한눈에 이해가 갈 수 있다. - 검색 효율성
검색 엔진은<div>,<span>만 사용한 문서에서는 모든 요소가 비슷한 중요도 내용을 담고 있다고 판단한다. 시멘틱 요소를 사용하면 검색 엔진이 더 잘 읽는다. - 웹 접근성
나이, 성별, 장애 여부, 사용 환경을 떠나서 항상 동일한 수준의 정보를 제공할 수 있어야 한다는 것은 웹 접근성이다. 요소에 대한 추가 정보를 전달하는 것이기 때문에 시멘틱 요소 사용은 웹 접근성을 향상할 수 있다는 의미다.
SEO
SEO(Search Engine Optimazation). 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화 해주는 작업을 SEO라고 한다.
SEO에 영향을 미치는 요소
<title> 요소
<head>의 자식 요소로 작성한다. 이 부분에 핵심 키워드가 포함되면 상위에 노출될 확률이 높아진다.
<meta> 요소
메타 데이터를 담는 요소. 메타 데이터는 해당 웹 사이트에서 다루는 있는 데이터가 무엇인지에 대한 데이터다. <head>의 자식 요소로 작성한다.
<meta> 요소를 사용해도 속성 name, property에 따라 목적이 다르다.
<meta name="속성값" content="내용" />
<meta property="속성값" content="내용" />property 속성을 사용하는 경우를 Open Graph라고 하며, 페이스북에서 게시물을 공유하기 위한 목적으로 만들었으며, 각 속상값 앞에는 오픈 그래프를 뜻하는 "og"가 붙는다.
