HTML은 HyperText Markup Language의 약자로, 모든 웹 콘텐츠는 HTML로 이루어져 있다. 크롬과 같은 웹 브라우저는 서버로부터 전달받은 HTML 문서의 구조를 해석해 화면을 구성한다. HTML은 단순한 파일 형태로 서버에 존재할 수도 있고 서버 프로그램을 통해 생성된 형태일 수도 있다. 어떤 형태이든 클라이언트인 웹 브라우저가 서버로부터 수신하는 데이터의 구조는 HTML이다.
하이퍼텍스트
하이퍼텍스트(HyperText)란 다른 정보와 연결된 텍스트를 의미하며 사용자가 관련 문서를 링크를 통해 이동하며 정보를 얻을 수 있다. 예를 들어 구글에 '고양이'를 검색하면 검색 결과 페이지에서 위키백과에 들어갈 수 있다. 위키백과 화면에서 특정 단어를 클릭하면 다시 해당 단어에 대한 설명 페이지로 이동이 가능한데 이것이 하이퍼텍스트다.
이와 같이 하이퍼텍스트는 월드 와이드 웹(www)이 처음 만들어지던 시기에 정보가 서로 연결되어 있다는 점에서 매우 혁신적인 개념이었으며, 초기 월드 와이드 웹은 바로 이러한 정보의 연결에 중점을 두고 설계되었다.
정보를 따라 계속 이동하다 보면 처음 시작한 페이지에서 전혀 다른 사이트로 이동할 수 있기 때문에 정보가 거미줄처럼 연결되어 있다고 해서 월드 와이드 웹(WWW)이라는 용어가 탄생하게 되었다.
마크언 언어
마크언 업어(Markup Language)란 텍스트에 의미를 부여하기 위해 문서에 주석을 다는 표현 시스템을 말하며, 그 자체로는 매우 오래된 개념으로 표현하고자 하는 정보가 있을 때 정보의 앞뒤에 태그(Tag)라는 표기를 달아 정보에 의미를 부여하는 형식이다. 예를 들어 HTML에서 "안녕하세요?"라는 텍스트를 커다란 제목으로 표현하고자 한다면<h1>안녕하세요?</h1>과 같이 작성할 수 있다.
XML(eXtensible Markup Language)은 HTML보다 범용적으로 사용할 수 있는 마크업 언어다. HTML은 사용할 수 있는 태그의 종류가 정해져 있는 반면 XML은 자신만의 규격을 정의할 수 있다.
예를 들어 다음과 같은 정보가 있다고 가정해본다.
홍길동, 010-1234-5678, 서울시 성동구
단순한 텍스트로 나열된 이와 같은 정보는 보는 사람마다 다르게 받아들일 수 있지만 대부분은 이름, 전화번호, 주소로 이루어진 개인 정보라고 연결 지어 생각할 수 있다.
하지만 컴퓨터는 스스로 의미를 파악하지 못하기 때문에 컴퓨터가 처리할 수 있도록 프로그래머가 규칙을 만들어 입력해야 한다. 만약 '처음 3자리는 이름이고, 다음 11자리는 전화번호다.'처럼 자릿수로 처리하는 규칙을 세우면 정보의 구조가 달라졌을 때 사용할 수 없게 된다.
XML을 사용한다면 정보를 각 의미에 따라 별도로 처리할 수 있다. 다음은 정보를 의미에 따라 XML로 표현한 것이다.
<name>홍길동</name>
<tel>010-1234-5678</tel>
<addr>서울시 성동구</addr>
간단한 구조이지만 읽는 사람 누구나 정보가 이름, 전화번호, 주소를 나타낸다고 이해할 수 있다. 사람뿐만 아니라 컴퓨터도 태그를 통해 정보를 분리해낼 수 있기 때문에 정보처리가 쉬워진다. 이처럼 마크업 언어는 사람과 프로그램 모두에게 편리한 정보 표현 수단이다.
XML 태그는 정의가 가능하며 HTML 역시 XML로 정의할 수 있다. 이렇게 정의된 HTML을 XHTML이라 한다.
HTML의 기본 용어
태그
HTML의 기본 구성요소인 태그(Tag)는 < > 를 사용하여 나타낸다. 태그는 일반적으로 시작과 끝을 표시하는 2개의 쌍으로 이루어져 있으며, 종료 태그 앞에는 /를 붙여야 한다. 사용할 수 있는 태그는 표준으로 정해져 있으며 태그마다 역할이 다르다.
< 시작 태그 속성="값" 속성="값" ...> 내용 </ 종료 태그>
태그의 특징
- 모든 태그가 종료 태그를 가지는 것은 아니다.
- 태그 이름은 대소문자를 구분하지 않는다.
- 태그에 추가적인 정보 부여는 속성을 사용한다.
속성
속성(Attribute)은 태그에 추가 정보를 제공하기 위해 사용한다. 사용할 수 있는 속성 역시 정해져 있으며 디자인과 관련된 속성은 거의 사용하지 않고 CSS를 사용한다.
<img src="photo.jpg" alt="사진">
- img → 태그
- src → 속성
- ="photo.jpg" → photo.jpg 이미지 파일을 찾아 화면에 표시
- alt → 속성
- ="사진" → photo.jpg 파일을 찾을 수 없을 때 출력할 대체 텍스트
태그 바디
태그 바디(Tag Body)란 시작 태그와 종료 태그 사이에 위치하는 내용(콘텐츠)를 의미한다. 대체로 텍스트가 위치하며, 다른 태그를 태그 바디에 둘 수도 있다. 즉 태그 사이에 다른 태그를 위치시키는 것이 가능하다. 단, 태그 사이에 부모-자식 관계가 정해져 있는 경우 규칙을 따라야 원하는 결과물을 보여준다.
<h2>Hello World</h2> <!-- 태그 바디가 텍스트인 경우 -->
<ul>
<li>아이템 1</li> <!-- 태그 바디가 다른 태그인 경우 -->
</ul>
시맨틱 태그
시맨틱 태그(Semantic Tag)란 HTML5에서 도입된 개념으로, 특별한 의미를 가지는 태그를 말한다. 시멘틱 태그 그 자체로는 별다른 역할을 수행하지 않고 화면 디자인에도 영향을 미치지 않지만 코드의 가독성을 높이는 데 도움을 준다. 또한 부모-자식 관계 없이 다른 태그를 자유롭게 사용할 수 있다. 이러한 태그는 문서의 구조를 정의하는 데 주로 사용되며 다음과 같은 태그가 대표적이다.
<header>, <footer>, <article>, <section>, <aside>, <nav>
예를 들어 <header> 태그는 문서의 헤더 부분이라는 의미로 영역을 지정할 때 사용하지만 실제 디자인은 CSS를 통해 정의한다.
이처럼 문서의 구조를 정의하기 위하여 다른 태그를 묶는 용도로 사용하는 태그를 '컨테이너'라고도 한다. 따라서 시맨틱 태그는 컨테이너의 역할을 하며 태그 자체에 의미가 부여되어 있다.공간을 구분하는 <div> 태그는 단순히 영역을 구분하는 태그일 뿐 별다른 의미를 포함하지 않기 때문에 시맨틱 태그와는 구분된다.
HTML 문서의 구조
<!DOCTYPE html>
<html>
<head>
</head>
<body>
... 콘텐츠 ...
</body>
</html>
- <!DOCTYPE html>: HTML5 문서를 선언하는 구문으로 웹 브라우저에 문서가 HTML5로 작성됨을 알린다.
- <html>...</html>: HTML 문서의 시작과 끝을 의미한다.
- <head>...</head>: CSS, 자바스크립트, 메타 태그 등이 위치한다. 문서의 상단 제목을 표시하는 <title> 태그, 문서의 정보를 설정하는 <meta> 태그 등도 포함된다.
- <body></body>: 문서 본문에 해당하는 부분으로 실제 화면에 나타나는 메인 부분이다.
대부분의 에디터에서는 HTML 문서 생성 시 자동으로 템플릿을 이용해 기본 구조를 생성한다.
다음은 자동 생성된 HTML 기본 템플릿의 예다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Page Title</title>
</head>
<body>
...
</body>
</html>
<head> 태그는 화면에 보이지는 않지만 여러 정보를 표현할 수 있는 <meta> 태그를 포함한다. <meta> 태그란 문서의 기본적인 정보를 설정하는 태그로, 기본으로 생성되는 <meta> 태그는 다음과 같다.
- <charset>: 캐릭터 세트로 정상적인 한글 처리를 위해서는 반드시 'UTF-8'로 설정한다.
- <viewport>: PC, 모바일 등의 서로 다른 크기의 단말기에서 화면 최적화를 위한 설정이다.
- <http-equiv>: HTTP 헤더 정보를 설정하는 속성이다.
- <X-UA-Compatible>: 브라우저의 호환성 보기 설정이다. 그중 'ie=edge' 설정은 항상 최신 렌더링 엔진을 사용한다는 의미다.
이 외에도 검색 엔진에 문서에 대한 정보를 제공하는 description, SNS로 콘텐츠를 공유할 때 생성되는 요약 화면을 위한 og(open graph) 메타 태그 등이 있다.
HTML의 기본 태그
HTML 태그는 크게 제목, 문단, 형식, 목록, 하이퍼링크, 이미지, 테이블, 폼, 시맨틱 등으로 구분할 수 있다.
제목 태그
제목 태그는 <h1>~<h6>까지 있으며 숫자가 작을수록 큰 글자로 출력된다. 제목 태그는 단순히 텍스트의 크기를 지정하는 용도가 아니라 문서에서 제목으로 사용될 텍스트에 사용하는 태그를 의미한다. 예를 들어 대제목, 중제목, 소제목과 같이 전체적인 문서의 제목 레벨을 정의할 때 사용하므로 어떤 의미에서는 시맨틱 태그로도 볼 수 있다. 즉 <h1>~<h6>을 단순히 크기에 의한 구분으로 이해하기보다는 제목에서의 상-하위 개념으로 이해하는 것이 좋다.
<h1>제목 태그 1</h1>
<h2>제목 태그 2</h2>
<h3>제목 태그 3</h3>
<h4>제목 태그 4</h4>
<h5>제목 태그 5</h5>
<h6>제목 태그 6</h6>
제목 태그가 중요한 이유는 특히 SEO(Search Engine Optimization) 때문이다. SEO란 구글과 같은 검색 엔진에서 우리가 만든 HTML 문서의 내용이 잘 검색될 수 있도록 최적화하는 작업을 의미한다. 따라서 제목 태그를 잘 사용하면 구글 검색 엔진에 문서의 구조를 좀 더 정확하게 제공해 잘 검색될 수 있도록 한다.
문단 태그
<p> 태그는 문단(Paragraph)을 구분하기 위해 사용한다. HTML에서는 연속된 공백이나 줄 바꿈은 단순한 공백으로 처리하기 때문에 문단 구분을 할 때는 <p> 태그를, 줄을 바꿀 때는 <br> 태그를 이용한다. 줄을 바꾸고 싶을 때 아무리 문서에서 엔터를 입력해도 <br> 태그가 없으면 같은 줄에 출력된다.
<p> 태그와 유사한 태그로 <div>가 있는데 의미상으로 <p>는 문단 영역, <div>는 단순한 영역 지정으로 이해하면 된다.
HTML에서는 줄 바꿈뿐만 아니라 공백도 별도 처리가 필요하다. 아무리 글자 사이에 공백을 두어도 실제 출력은 한 칸만 떨어진 것으로 표현되기 때문이다. 여러 공백을 포함하려면 '&npsp;'를 필요한 만큼 입력하거나 CSS로 여백 설정을 해야 한다.
<hr> 태그는 horizontal rule을 의미하며 가로 구분선을 만든다.
목록 태그
목록 태그는 최신 HTML 문서 작성법에서 매우 중요한 부분이다. 모든 디자인 요소가 CSS로 정의되기 때문에 HTML 문서는 주로 제목 태그와 하이퍼링크, 이미지, 목록 태그로만 구성한다. 또한 영역을 지정하기 위한 용도로 <div>와 같은 컨테이나 성격의 태그나 시맨틱 태그를 사용한다.
따라서 대다수의 콘텐츠가 목록 형태로 정의될 정도로 많이 사용된다. 예를 들어 신문기사 목록을 보면 하나의 신문기사는 <div>로 묶이고 이 안에 제목, 작성일, 신문사, 기사 이름 등이 목록으로 들어가는 구조가 될 수 있다. 쇼핑몰의 상품 목록도 이와 유사한 구조로 구현할 수 있다.
<!-- 목록 태그 사용법 -->
<ul>
<li>아이템 1</li>
<li>아이템 2</li>
</ul>
- <ul>: 순서가 없는 목록이다.
- <ol>: 순서가 있는 목록을 나타낸다. <ol>보다는 <ul>을 주로 사용한다.
- <li>: 리스트의 아이템을 나타낸다.
<ul>과 <ol>은 화면의 점/원 형식의 불릿을 사용하는지, '1', '2'와 같은 숫자를 사용하는지에 따른 차이만 있다. 그런데 자동으로 출력되는 숫자의 경우 보기에 좋지 않고 구조가 복잡해지면 숫자가 연결되지 못하는 등의 문제가 있어 주로<ul>을 사용한다.
블록 태그와 인라인 태그
HTML 태그는 배치 방식에 따라 블록 태그와 인라인 태그로 구분된다. 블록과 인라인 개념은 CSS에서도 중요한 개념이다.
블록 태그는 라인 전체를 사용하는 태그를 의미한다. 즉 다른 태그 요소와 같은 라인에 배치할 수 없다는 의미다.
대표적인 블록 태그
<p>, <div>, <h>, <ul>, <ol>, <form>
인라인 태그는 다른 태그 요소와 같은 라인에서 나란히 배치될 수 있는 태그를 의미한다.
대표적인 인라인 태그
<span>, <img>, <a>
이처럼 태그의 배치 속성을 알고 있어야 원하는 대로 화면을 구성할 수 있다. 물론 CSS를 활용하면 태그가 원래 가지고 있는 속성을 변경하는 것도 가능하며, 경우에 따라서는 두 가지 형식을 혼합한 'inline-block' 속성을 사용하기도 한다.
HTML 참고 자료
https://developer.mozilla.org/ko/docs/Web/HTML
→모질라 재단 HTML 공식 문서
'Programming > Web' 카테고리의 다른 글
[Web] 웹 프로그래밍의 기초(JavaScript) (0) | 2022.10.19 |
---|---|
[Web] 웹 프로그래밍의 기초(CSS) (0) | 2022.10.19 |
[Web] 웹(DevOps) (0) | 2022.10.18 |
[Web] 웹(Java, JVM, JDK, IDE, Servlet Container) (0) | 2022.10.18 |
[Web] 웹(요약) (0) | 2022.10.18 |