웹페이지의 구조를 지정하는 기술적인 언어로 프로그래밍 언어가 아니고,
컨텐츠의 구조를 정의하는 마크업 언어이다.
웹을 이루는 가장 기초적인 구성요소로, 웹 컨텐츠의 의미와 구조를 정의할 때 쓰인다.
Hyper Text
란 웹페이지를 다른페이지로 연결하는 링크를 말한다.
일반적인 텍스트의 순차적 접근법을 뛰어넘는 비순차적 접근법을 표현한다.
다른페이지로 이동하는 것, 같은 페이지 내의 다른데이터로 이동하는 것이 하이퍼 텍스트의 개념이다.
Markup
은 웹 브라우저에 표시되는 글과 이미지 등 다양한 컨텐츠를 표시한다.
마크업은 다양한 elements(요소)를 사용한다.
문서를 구조적으로 표시하기 위한 것이 마크업의 개념이다.
Language
는 언어라는 의미로, 컴퓨터와 의사소통을 하기 위한 언어 중 한개이다.
HTML의 Markup Language를 통해 컴퓨터에게 명령해 무언가 일을 시킨다.
Hyper Text를 가능하게하는 Hyper Link기능도 마크업 언어로 <a></a>
태그를 통해 구현할 수 있다.
Tag
는 꼬리표를 뜻하며, 태그를 통해 구조를 표현한다.
태그는 요소를 만들때 사용하고, 요소이름을 부등호 사이에 넣어 태그를 구성할 수 있다.
주로 요소는 여는태그, 컨텐츠 닫는태그로 이루어져 있다.
빈 요소(자식 노드를 가질 수 없는 요소)의 경우 닫는태그가 필요하지 않다.
특성(속성/attribute)가 없는 경우 기본값을 사용한다.
<i>
)<address>
,<cite>
)Semantic [sɪˈmæntɪk]
형용사
[주로 명사 앞에 씀][언어]의미의, 의미론적인
w3schools.com에선 아래와 같이 시맨틱요소를 정의한다.
semantic 요소는 브라우저와 개발자 모두에게 의미를 명확하게 설명한다.
non-semantic 요소 :
<div>
및<span>
- 내용에 대해 아무 것도 알려주지 않습니다.
semantic 요소 :<form>
,<table>
및<article>
- 내용을 명확하게 정의합니다.
SEO(Search Engine Optimization): 검색 최적화
검색 결과 상위에 문서를 노출하려면 SEO 최적화는 필수다. 구글 같은 검색 사이트는 주기적으로 전 세계에 공개된 웹을 수집(crawling)하고 분석(indexing)한다.
<div>
와 <span>
만 사용한 문서는 중요한 영역 구분이 어려우나, 문서제목에 해당하는 <title>
, 본문영역 표시<main>
, 글 제목 <h1>
등 주요 항목을 별도의 태그로 구분한 문서가 검색결과 상위에 노출된다.
Accessibility: 웹 접근성(스크린리더 이용 / 키보드만을 이용하여 웹 사용 경우)
For Developers(Maintainability): 코드파악 용이, 유지보수성에 좋다.
시맨틱 요소는 웹을 의미 있게 만드는 역할을 한다.
HTML4에서 HTML5로 넘어 오면서 시맨틱 요소가 많이 추가 되었다.
네비게이션은 <nav>
를 사용하고, 글의 제목은 <h1>
~<h6>
, 헤더는 <header>
를 사용한다.
본문은 <article>
과 <section>
으로 적절히 구분하고,
각 문단은 <p>
를, 버튼은 <button>
, 사진에 대한 설명은 <figure>
와 <figcaption>
을 사용한다.
<header>
와<footer>
둘 모두 문서의 부가정보를 표기하는데 사용하고,
본문 내 부가정보를 표기할 때도 사용할 수 있다.
중첩해서 사용할 수 없다.
<header>
- 웹사이트 브랜드를 나타내주는 로고 혹은 메뉴아이템들이 들어있는 경우 사용
- 문서의 제목, 로고, 작성자, 작성일과 같은 메타 정보 배치<footer>
- 필수는 아니나 웹사이트 제일 아래 부가적인 정보 혹은 링크가 있는 경우
- 회사 정보, 소유자의 소셜미디어 정보, 약관 등 문서와 관련이 적은 부가정보 배치
<nav>
네비게이터(navigator)를 의미한다.
사이트 전체 흐름을 제어하는 기능을 담당하기 때문에
문서 변화와 상관없이 항상 노출하는 경우가 많다.
주로 헤더안에 여러 메뉴들이 모여있는 경우 사용한다.
<main>
과<article>
과<section>
<main>
- 웹사이트 페이지에 중요한 컨텐츠를 가지고 있는 경우
- 본문을 뜻하며, 컨텐츠 내용 전체를 감싸고, 문서에서 한 번만 사용한다.
<article>
,<section>
-main안에서 필요에 따라 사용하고, 좀 더 자유롭게 사용할 수 있다.
<aside>
본문 옆에 구성한다. main안에서 부가적인 내용이 배치된다.(광고, 페이지와 연관된 다른 링크)
본문 내에서도 사용가능하다. 본문내용과 관련된 부가정보를 노출한다.(주석, 각주 등)
<details>
와<summary>
대부분 같이 사용된다. 클릭했을 시, 상세 내용이 확장되는 UI에서 흔히 볼 수 있다.
<figure>
와<figcaption>
<figure>
는 독립적인 컨텐츠를 의미한다.
<figcaption>
을 사용해 부가설명을 붙일 수 있다.(인용문, 이미지, 소스코드에 설명을 쓸 때 사용)
<article>
vs <section>
<article>
<section>
예시
article내 여러개의 section 사용
글 본문 페이지에서 사용 가능. 글 전체를 <article>
, 각 단락을 <section>
으로 구분
section내 여러개의 article 사용
글 목록 페이지에서 사용 가능. 글 목록 전체를 <section>
, 목록 중 하나를 <article>
로 구분
<i>
vs <em>
시각적으로 보기에는 똑같이 이탤릭체로 보이나 스크린리더로 읽을 시 달라진다.
<i>
시각적으로만 이탤릭체(별다른 의미가 없다)
책 제목, 인용구, 시각적으로 나타내고 싶은 경우에만 사용
<em>
강조하는 이탤릭체(문장에서 강조하고 싶은 이탤릭체가 있는경우 사용 )
<b>
vs <strong>
<b>
시각적으로만 볼드체
<strong>
정말 중요한 볼드체
<ol>
vs <ul>
vs <dl>
목록을 나타내는 태그들
<ul>
unordered list로 순서가 없는 목록을 나타낼때 쓰인다.
<ol>
ordered list로 순서가 중요한 경우 사용
<dl>
description list로 어떠한 단어에 대한 설명이 묶여있을때 그 목록을 나타낼때 사용
<dt>
: description term로 원하는 단어<dd>
: description detail로 그에 해당하는 설명<img>
vs background-image<img>
<button>
vs <a>
<button>
<a>
<table>
vs CSS
문서내에서 자체적으로 테이블이 필요한지의 유무에 따라 사용
<table>
CSS
참조