HTML
(HyperText Markup Language)
- 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용하는 마크업 언어.
- Hypertext(하이퍼텍스트): 웹 페이지를 다른 페이지로 연결하는 링크.
- 마크업 : HTML 태그와 속성을 사용하여 문서의 구조와 내용을 정의하는 것.
- Tag : HTML 문서를 구성하는 기본 단위, 태그는 요소(element)를 생성하며, 이들 요소들이 계층적으로 구성되어 HTML 문서의 구조를 형성.
- Attribute : 요소의 추가 정보를 제공하는 이름과 값의 쌍.
- 콘텐츠 : 태그 사이에 위치하며, 실제로 웹 페이지에 표시되는 텍스트, 이미지, 링크 등의 정보.
meta 태그 살펴보기
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="author" content="jin">
<meta name="description" content="웹표준을 준수한 메가박스 사이트">
<meta name="keyword" content="메가박스, 영화, 영화관, 영화예매">
<meta property="og:title" content="페이지 제목">
<meta property="og:image" content="대표 이미지 URL">
<meta property="og:description" content="페이지 설명">
<title>HELLO</title>
</head>
<body>
<p>HELLO</p>
</body>
</html><!DOCTYPE html>: 현재 문서가 어떤 버전의 HTML을 따르는지 웹 브라우저에게 알려주는 선언 태그.<html lang='ko'>: 브라우저에 언어의 관련된 설정을 적용, 검색엔진에 반영, 스크린리더기가 해당 언어를 인식하고 읽을 수 있도록 한다.(웹접근성)<meta charset='utf-8'>: 문서의 문자 인코딩 방식을 설정, 'utf-8'은 전 세계 대부분의 언어를 지원하는 문자 인코딩 방식.<meta http-equiv='X-UA-Compatible' content='IE=edge' />: Internet Explorer에서 호환성을 보장하기 위해 사용되는 태그.<meta name='viewport' content='width=device-width, intial-scale=1.0'>: 뷰포트 설정을 지정하여 웹 페이지가 올바르게 표시되도록 하는 태그.- author, description, keywords : 검색 엔진이 해당 문서를 색인할 때 더 정확하게 분류하고 인식. 그러나!! 검색 엔진이 직접 페이지의 내용과 요소들을 분석하여 추출할 수 있게 되었기 때문에 이와 같은 meta 태그의 중요도는 감소하게 되었다.
- og : 소셜 미디어에 공유할 때 해당 내용을 제공.
Semantic tag
- HTML5에서 추가된 의미론적 태그로, 웹 페이지의 구조와 의미를 더 잘 나타내기 위한 태그를 의미한다.
<header>, <footer>, <nav>, <section>, <article>, <aside>, <main>등. - 검색 엔진이 웹 페이지의 구조와 내용을 더 잘 파악할 수 있도록 한다.
- 웹접근성 측면에서도 스크린 리더 사용자들이 웹 페이지를 보다 쉽게 이해할 수 있도록 한다.
👀 article vs section
<article>: 독립적인 콘텐츠를 나타내는 데 사용한다. 예를 들어, 블로그 게시물, 뉴스 기사, 포럼 글 등과 같이 웹 페이지의 다른 부분과 관련없이 독립적으로 읽을 수 있는 콘텐츠를 그룹화하는 데 쓰인다.<section>: 문서의 구획을 나타내는 데 사용한다.<section>은 문서에서 주제와 관련된 내용을 그룹화하며, 보통 제목 요소(<h1>~<h6>)를 포함한다. 웹 페이지에서는 일반적으로<section>요소로 본문의 일부를 그룹화하는 데 사용한다.
