1. HTML이란
우리가 보는 웹 페이지가 어떻게 구조화되어있는지 브라우저를 통해 알 수 있게 하는 마크업 언어를 말한다.
1.1. HTML의 두 가지 요소(Element)
블록 레벨 요소
웹 페이지 상에 블록을 만드는 요소. 앞뒤 요소 사이에 새로운 줄(줄바꿈)을 만든다.
단락, 목록, 내비게이션 메뉴, 꼬리말 등을 표현할 수 있다.
자식 요소로 인라인 요소를 가질 수 있다.
<p> 등이 해당된다.
인라인 요소
항상 블록 레벨 요소 내에 포함되어 작은 부분(문장, 단어)에 적용된다.
줄바꿈이 일어나지 않는다.
<a>, <em>, <strong> 등이 해당된다.
*CSS에서 사용되는 단어와 혼동하면 안 된다. 표시 유형을 변경해도 요소의 범주는 그대로이다.
포함 가능한 요소(ex strong)에는 영향을 받지 않는다.
요소는 여는 태그, 닫는 태그, 내용의 3가지로 이루어진다.
<img>와 같은 무언가를 첨부하기 위해 단일 태그를 쓰는 요소도 있다.
2. 속성
요소는 속성을 가질 수 있다. <p class="...">에서 class가 속성이다. href, title, target도 모두 속성이다.
2.1. 속성의 규칙
속성은 다음 규칙을 따른다.
요소와 속성, 속성과 속성 사이에는 공백이 있어야 한다.
속성 이름 뒤에 등호(=)가 붙는다.
속성값은 따옴표로 감싸야 한다.
2.2. 참, 거짓 속성
불(bool) 속성이라 부르기도 한다. 하나의 값만 가질 수 있다.
disabled 속성이 여기에 포함된다.
3. HTML 문서의 구조
html 문서의 기본적인 태그는 다음과 같다.
<!DOCTYPE html>: 문서 형식을 의미한다. 지금은 흔적기관에 가깝고 큰 의미를 가지진 않는다.
<html>: 전체 문서의 컨텐츠를 포함한다.
<head>: 검색 결과에 노출될 키워드, 페이지 설명, CSS 스타일 등 문서에 직접 노출되지 않는 내용을 담는다.
<meta>: 문서의 메타데이터를 담는다.
<title>: 문서의 제목이다. 브라우저 탭에 표시되는 제목으로 사용된다.
<body>: 텍스트, 이미지, 비디오, 게임 등 문서에 표시되는 모든 컨텐츠를 포함한다.
3.1. html 문서에 특수문자를 포함하는 방법
특수문자 | 문법 |
|---|---|
< | < |
> | > |
" | " |
' | ' |
& | & |
3.2. 메타데이터
메타데이터란 데이터를 설명하는 데이터를 말한다. html 문서에서는 <meta> 태그에 주요 메타데이터를 담는다.
<title>, <link>, <style>, <base> 등 다른 태그들도 각 태그에 맞는 메타데이터 역할을 수행한다.
charset으로 인코딩을 설정하거나 name으로 메타요소의 정보 형태를 설명할 때 사용한다.
keywords같은 경우는 SEO 악용사례가 잦아 메타데이터를 설정해도 SEO가 무시하는 경우가 많아졌지만,
<title>, <description> 태그는 여전히 가장 중요한 SEO 요소 중 하나이다.
또 <viewport> 같은 메타데이터는 모바일 사용자 경험에 필수적이다.
4. HTML에 CSS와 JavaScript 적용하기
css는 <link> 태그를 사용해 적용한다.
<link rel="stylesheet" href="..." />와 같은 형식으로 사용하고, <head> 요소 내부에 위치시킨다.
js는 <script> 태그를 사용해 적용한다.
<script src="...">와 같은 형식으로 사용하거나 태그 내부에 직접 코드를 작성할 수 있다.
html dom이 형성되기 이전에 js가 실행되어 아직 없는 태그를 찾는 상황을 방지하기 위해 <script>는 문서의 마지막에 위치한다.
5. HTML Semantic이 필요한 이유
간단히 말해 올바른 요소에 올바른 의미, 기능, 모습을 담기 위해서 필요하다.
검색 효율성, 웹 접근성, 사용자 경험을 향상시키고, 컴퓨터가 정보를 더 잘 이해하고 처리하게 만들기 위해 시맨틱이 필요하다.
예를 들어 대제목에 쓰이는 태그인 <h1>로만 모든 텍스트를 표현한다고 가정해보자.
<h1> 요소를 css로 스타일링하여 <p>와 동일하게 보이도록 조정할 수 있다.
사람의 눈에는 정상적으로 보일 수 있으나 컴퓨터는 모든 텍스트가 대제목으로 보이기 때문에 정보를 제대로 이해하지 못한다.
이는 SEO에도 나쁜 영향을 미친다.