HTML(Hyper Text Markup Language)
웹페이지의 구조를 지정하는 기술적인 언어로 프로그래밍 언어가 아니고,
컨텐츠의 구조를 정의하는 마크업 언어이다.
웹을 이루는 가장 기초적인 구성요소로, 웹 컨텐츠의 의미와 구조를 정의할 때 쓰인다.
Hyper Text란 웹페이지를 다른페이지로 연결하는 링크를 말한다.
일반적인 텍스트의 순차적 접근법을 뛰어넘는 비순차적 접근법을 표현한다.
다른페이지로 이동하는 것, 같은 페이지 내의 다른데이터로 이동하는 것이 하이퍼 텍스트의 개념이다.
Markup은 웹 브라우저에 표시되는 글과 이미지 등 다양한 컨텐츠를 표시한다.
마크업은 다양한 elements(요소)를 사용한다.
문서를 구조적으로 표시하기 위한 것이 마크업의 개념이다.
Language는 언어라는 의미로, 컴퓨터와 의사소통을 하기 위한 언어 중 한개이다.
HTML의 Markup Language를 통해 컴퓨터에게 명령해 무언가 일을 시킨다.
Hyper Text를 가능하게하는 Hyper Link기능도 마크업 언어로 <a></a>태그를 통해 구현할 수 있다.
Tag는 꼬리표를 뜻하며, 태그를 통해 구조를 표현한다.
태그는 요소를 만들때 사용하고, 요소이름을 부등호 사이에 넣어 태그를 구성할 수 있다.
주로 요소는 여는태그, 컨텐츠 닫는태그로 이루어져 있다.
빈 요소(자식 노드를 가질 수 없는 요소)의 경우 닫는태그가 필요하지 않다.
특성(속성/attribute)가 없는 경우 기본값을 사용한다.
- 물리적 스타일 태그: 웹페이지에서 어떤 모습으로 보여줄지 Text의 겉모양을 바꿔주는 태그(예_
<i>) - 논리적 스타일 태그: 웹페이지에서 어떤 모습으로 보여주는 것보다는
태그자체에 의미가 부여되어있는 태그(예_<address>,<cite>)
Semantic Tags (Semantic Markup)
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>을 사용한다.
주요 Semantic Tags
<header>와<footer>
둘 모두 문서의 부가정보를 표기하는데 사용하고,
본문 내 부가정보를 표기할 때도 사용할 수 있다.
중첩해서 사용할 수 없다.
<header>
- 웹사이트 브랜드를 나타내주는 로고 혹은 메뉴아이템들이 들어있는 경우 사용
- 문서의 제목, 로고, 작성자, 작성일과 같은 메타 정보 배치<footer>
- 필수는 아니나 웹사이트 제일 아래 부가적인 정보 혹은 링크가 있는 경우
- 회사 정보, 소유자의 소셜미디어 정보, 약관 등 문서와 관련이 적은 부가정보 배치
<nav>
네비게이터(navigator)를 의미한다.
사이트 전체 흐름을 제어하는 기능을 담당하기 때문에
문서 변화와 상관없이 항상 노출하는 경우가 많다.
주로 헤더안에 여러 메뉴들이 모여있는 경우 사용한다.
<main>과<article>과<section>
<main>
- 웹사이트 페이지에 중요한 컨텐츠를 가지고 있는 경우
- 본문을 뜻하며, 컨텐츠 내용 전체를 감싸고, 문서에서 한 번만 사용한다.
<article>,<section>
-main안에서 필요에 따라 사용하고, 좀 더 자유롭게 사용할 수 있다.
<aside>
본문 옆에 구성한다. main안에서 부가적인 내용이 배치된다.(광고, 페이지와 연관된 다른 링크)
본문 내에서도 사용가능하다. 본문내용과 관련된 부가정보를 노출한다.(주석, 각주 등)
<details>와<summary>
대부분 같이 사용된다. 클릭했을 시, 상세 내용이 확장되는 UI에서 흔히 볼 수 있다.
<figure>와<figcaption>
<figure>는 독립적인 컨텐츠를 의미한다.
<figcaption>을 사용해 부가설명을 붙일 수 있다.(인용문, 이미지, 소스코드에 설명을 쓸 때 사용)
1. <article> vs <section>
-
<article>- 내용으로 나눈다.
- 하나 그 자체를 묶어 줄때 사용(예_블로그 같은 경우 포스트 하나, 신문기사에서 기사 하나)
- article은 독립적으로 다른 페이지에 보여줬을 때, 전혀 문제가 없을 때 사용
→ 메인 안에 있는 다른 내용들과 상관 없이 독립적으로 고유한 정보를 나타낼때 사용한다.
-
<section>- 형식으로 나눈다.
- article안에 많은 내용이 있을때, 연관있는 내용을 묶어주고 싶을때 사용
- article안, main안이나 아무곳에서나 연관있는 내용을 하나로 묶어줄때 사용한다.
-
예시
-
article내 여러개의 section 사용
글 본문 페이지에서 사용 가능. 글 전체를<article>, 각 단락을<section>으로 구분 -
section내 여러개의 article 사용
글 목록 페이지에서 사용 가능. 글 목록 전체를<section>, 목록 중 하나를<article>로 구분
-
2. <i> vs <em>
시각적으로 보기에는 똑같이 이탤릭체로 보이나 스크린리더로 읽을 시 달라진다.
-
<i>
시각적으로만 이탤릭체(별다른 의미가 없다)
책 제목, 인용구, 시각적으로 나타내고 싶은 경우에만 사용 -
<em>
강조하는 이탤릭체(문장에서 강조하고 싶은 이탤릭체가 있는경우 사용 )
3. <b> vs <strong>
-
<b>
시각적으로만 볼드체 -
<strong>
정말 중요한 볼드체
4. <ol> vs <ul> vs <dl>
목록을 나타내는 태그들
-
<ul>
unordered list로 순서가 없는 목록을 나타낼때 쓰인다. -
<ol>
ordered list로 순서가 중요한 경우 사용 -
<dl>
description list로 어떠한 단어에 대한 설명이 묶여있을때 그 목록을 나타낼때 사용<dt>: description term로 원하는 단어<dd>: description detail로 그에 해당하는 설명
5. <img> vs background-image
<img>
이미지가 웹페이지 안에서 하나의 중요한 요소로 자리를 잡고 있을때- background-image
문서의 내용과는 별개로 스타일링 목적을 위해(ex. 배경이미지로 사용),
즉 문서의 일부분이 아니라면(이미지가 없어도 문서를 읽는데 지장이 없다면)
CSS background-image를 이용해 이미지 표기
6. <button> vs <a>
<button>
특정한 액션을 위한 것<a>
어디론가 이동할 때(링크가 걸려있을 시)
7. <table> vs CSS
문서내에서 자체적으로 테이블이 필요한지의 유무에 따라 사용
<table>
(행 + 열) 데이터CSS
flex, grid등이 있다.
참조
