본문 바로가기
Web/HTML&CSS

HyperText Markup Language (HTML)

by JuHy_ 2020. 7. 20.

HTML이란?

HTML은 웹 페이지를 작성하기 위한 언어이다. 따라서, 웹 페이지란 결국 HTML 문서라고 말할 수 있다.

 

HTML 문서는 태그(Tag)라는 것들로 구성되는데, 기본적으로 태그 안의 것들을 설명하기 위한 꼬리표라고 볼 수 있다.

따라서 태그의 이름을 통해 어떤 용도인지를 알 수 있다.

 

또한, HTML 태그는 기본적으로 시작 태그 종료 태그의 한 쌍으로 구성된다.

하지만 특수한 몇몇 태그의 경우 시작 태그만 사용하는 경우도 있다.

 

기본 구조

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>제목</title>
</head>
<body>
  내용
</body>
</html>

첫번째 줄의 <!DOCTYPE html>은 이 문서가 html 문서임을 나타낸다.

 

첫 줄을 제외하고 html 문서는 기본적으로 head 부분과 body 부분으로 구성된다.

head 부분에는 인코딩 방식이나 문서 제목과 같은 문서에 관한 추가적인 정보를 작성하며,

body 부분에는 웹 페이지에 실제로 나타낼 내용을 작성한다.

 

기본 문법

그렇다면 간단한 예시를 통해 태그들을 어떻게 사용해야 하는지 알아보자.

 

이 블로그는 개발자들을 위한 블로그입니다.
이 블로그는 <strong>개발자</strong>들을 위한 블로그입니다.<br>

위와 같이 글을 작성하면서 '개발자' 부분이 중요하다면, <strong> 태그로 감싸주어 강조할 수 있다.

그리고 HTML 문서에서는 개행을 하더라도 실제 보여지는 부분에서 개행이 되지 않으므로,

<br> 태그를 통해서 해당 부분에서 개행되어야 함을 나타낼 수 있다.

 

이 때, <br> 태그는 종료 태그 없이 시작 태그만 사용한 것을 볼 수 있는데,

이처럼 특정한 내용을 감쌀 필요가 없는 몇몇 태그들은 시작 태그만 사용하기도 한다.

 

<img src="html.jpg" width="100%">

또한, 위와 같이 시작 태그 안에는 속성(attribute) 값을 추가하여 더 많은 정보를 설정할 수 있다.

 

 

 

그렇다면 우리는 모든 태그의 의미와 사용법을 모두 외워야 할까?

 

현재 HTML에서 사용 가능한 태그는 150개가 넘기 때문에, 이를 모두 외우기란 너무 어렵다.

따라서 자주 사용하는 중요한 태그의 의미와 사용법은 익혀두고, 나머지 태그들은 필요할 때마다 사용법을 검색하여 사용하는 것이 현명하다.

 

 

The average web page from top twenty Google results

Apparently, an average web page uses twenty-eight different element types: The twenty-eight elements used on most pages, ordered by appearance frequency:

www.advancedwebranking.com

위 사이트에서는 실제 웹 페이지에서 어떤 태그들이 가장 많이 사용되고 있는지 알 수 있다.

 

 

7,000,000개가 넘는 페이지의 통계를 내보았을 때, 평균적으로 28개의 HTML 태그를 사용하고 있다고 한다.

 

 

그리고 통계적으로 가장 많이 사용되는 태그 28개는 위와 같다고 한다.

 

따라서 우리는 위 28개 정도의 태그의 사용법을 익혀둔다면, 좀 더 효율적으로 웹 페이지 개발이 가능할 것이다.

 

HTML 태그들의 의미와 기본적인 사용법은 아래 W3Schools의 HTML Reference를 참고하자.

 

HTML Reference

 

www.w3schools.com

 

 

Reference

[생활코딩] WEB

https://opentutorials.org/course/3083

'Web > HTML&CSS' 카테고리의 다른 글

HTML Semantic Elements  (0) 2021.07.16
자주 사용되는 HTML 태그 정리  (0) 2021.07.15
Media Query를 이용하여 반응형 웹 구현하기  (0) 2020.08.02
CSS Box Model이란?  (0) 2020.07.23
Cascading Style Sheets (CSS)  (0) 2020.07.21