HTML
Hypertext Markup Language의 약자로 웹페이지의 구조를 결정하며 텍스트, 이미지 등 삽입하는 내용을 특정한 방식으로 표시하는 것이 가능하다.
HTML의 구조
!DOCTYPE html
HTML5를 사용하고 있음을 명시.
html
HTML 문서의 루트, 혹은 최상위 요소.
head
웹 크롤러가 페이지에서 중요한 정보를 얻기 위해 살펴보는 태그.
페이지 타이틀, 스타일시트, SEO용 메타 인포메이션 등과 같은 정보가 포함.
meta
페이지의 메타 인포메이션을 전달하는 빈 요소.
작성자, 사용 중인 인코딩 유형(거의 항상 UTF-8), 응답성, 호환성 등이 포함될 수 있음.
body
브라우저에서 읽을 수 있는 모든 문서의 내용을 담는 태그이며, 단 하나의 body만이 허용됨.
예시
<!DOCTYPE html>
<html>
<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" />
<title>Definition of HTML</title>
</head>
<body>
<!--Page content such as text and images goes in here-->
</body>
</html>시맨틱(Semantic, 의미론적) HTML?
HTML 태그가 어떤 역할을 하는지 실제 의미가 부여되었다는 것을 의미.
웹 크를러가 웹페이지나 웹사이트를 쉽게 인덱싱할 수 있어 SEO가 향상된다는 이점이 있으며, 스크린 리더(화면 판독기, 시각장애인을 위한 웹 서핑 프로그램)를 이용하는 접속자에게 더 많은 정보를 제공하고 적응 및 접근이 용이해진다.
웹 크롤러 ?
로봇' 또는 '스파이더'라고도 하며 한 웹페이지에서 다른 웹페이지로 연결되는 링크를 따라가며 웹사이트를 자동으로 검색하는 데 사용되는 프로그램을 지칭함.
주요 시멘틱 태그
header
웹페이지의 소개 영역을 정의.
일반적으로 로고, 내비게이션, 테마 스위처, 검색창 등의 항목이 포함.
nav
사이트 메뉴와 같은 페이지의 내비게이션 항목을 지정.
main
header와 footer를 제외한 모든 코드를 담는 HTML의 직계자손으로 1개 페이지에 1개의 main만이 존재할 수 있음. body의 주요 콘텐츠.
section
주요 내용의 한 단위 절.
article
독립적으로 구분해 배포하거나 재사용 할 수 있는 구획. 게시판, 기사 등.
aside
본문 외 좌우 배치되는 부가정보들. 보통 사이드메뉴, 위젯 등에 사용됨.
figure
독립적 콘텐츠 표현. 이미지와 설명을 그룹화.
address
연락처를 담는 태그. 기술 담당자, 담당자 이름, 홈페이지 링크, 주소, 전화번호 등을 기재.
footer
바로가기 링크,
저작권 정보 또는 전체 웹사이트나 웹페이지와 관련된 기타 데이터 같은 항목을 포함.
예시
<!DOCTYPE html>
<html lang="en">
<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" />
<title>Definition of HTML</title>
</head>
<body>
<header>
<h1 class="logo">LOGO</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>FAQs</li>
</ul>
</nav>
</header>
<main>
<section class="about-me">
<article>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio magni
est asperiores nemo, adipisci minus itaque quam, rem libero aliquam
nesciunt, nisi inventore assumenda earum repellat labore ratione
architecto eos quis. Soluta mollitia cupiditate dolorem. Consequatur a
soluta laudantium nihil. Molestias, officiis ut! Nobis adipisci
voluptatem quam at officia beatae!
</article>
</section>
<section class="contact-me">
You can find me on
<a href="https://twitter.com/koladechris">Twitter</a> You can find me on
<a href="https://Instagram.com/koladechris">Instagram</a>
</section>
<aside class="address">My Address</aside>
</main>
<footer>© 2020 All Rights Reserved</footer>
</body>
</html>