HTML이란 단어가 요즘 들어서는 생소하지 않게 들으셨을 텐데요. 요즘은 웹 개발자만의 분야가 아닌 일반 사용자들도 많이 알고 있는 언어인데요. 특히 블로그 하시는 분들께서는 꼭 알아야 되지 않을까 개인적으로 생각됩니다. 프로그램 개발자로 일하고 있지만, 웹 분야는 아직 많이 부족하기 때문에 간혹 틀린 부분이 있더라도 너그럽게 봐주시기 바랍니다.
역사
HTML(Hyper Text Markup Language)는 인터넷의 등장과 함께 발전해온 언어이고, 팀 버너스리에 의해 제안되고 개발된 걸로 많이 알려져 있습니다. 간단하게는 웹문서상에서 다른 웹문서로 이동이 필요할 경우, 마크업 해둔 텍스트에 링크를 달아 웹문서를 이동하는 개념에서 출발했습니다. 초창기 정적인 웹 페이지에서 계속 발전하여, HTML5가 표준이 된 현재 텍스트 이외의 이미지 및 동영상 등 동적인 웹페이지로 발전했습니다.
웹 개발의 기본 소양인 HTML/CSS/JAVASCRIPT에서 HTML은 웹문서의 뼈대를 담당하는 역할을 하고 있습니다.
기본 구성
기본적으로 HTML은 웹문서에서 기능을 담당하는 요소라고 불리는 태그들과 태그 안의 속성으로 이루어져 있습니다. 태그의 종류는 그 기능에 따라 구분되고, 해당 태그의 속성으로 태그를 세부적으로 컨트롤할 수 있습니다.
다음은 기본적인 HTML 문서 골격입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hellow World!</h1>
</body>
</html>HTML 기본골격은 위와 같습니다. 여기에 <body> 태그 안에 작성한 내용이 웹페이지에 보이게 되는 부분입니다. 몇몇 태그를 제외하고는 <h1>가 시작 태그라면, </h1>과 같이 닫아주는 태그도 있어야 합니다.
HTML 공부방향
HTML 없이는 웹페이지를 구현할 수 없을 정도로, 웹의 필수요소입니다. HTML은 기능보다는 태그의 의미를 더 중요하게 생각해야 된다고 보는데요. 레이아웃을 나누기 위해, DIV태그를 사용하기보다는 각 레이아웃에 맞는 시맨틱 태그를 사용하도록 하고, H1 태그는 웹페이지에서 한 번만 사용하도록 주의하고, 페이지 흐름상 H2 태그보다 H3태그를 사용하고 있는지는 않는지 고민해야 된다고 생각합니다. HTML의 문법을 익히는 것도 중요하지만, 각 태그들의 진정한 의미와 쓰임새를 알아야 될 것 같습니다.
※ H태그의 경우 H1이 대분류, H2 중분류, H3 소분류라고 가정했을 때, 대분류를 사용하기 전에 중분류 소분류를 먼저 사용하는 것은 지양해야 합니다.
'HTML, CSS' 카테고리의 다른 글
| HTML 테이블 태그로 표 만들고 사용법 정리 (0) | 2022.06.03 |
|---|---|
| HTML 리스트 태그 목록 만들기 <ol>, <ul>, <li> 정리 (0) | 2022.05.08 |
| HTML 텍스트 관련 태그-2 (굵기, 기울임, 기타 태그들) (0) | 2022.05.04 |
| HTML 텍스트 관련 태그-1 (제목, 문단, 줄바꿈, 인용문) (0) | 2022.04.18 |
| HTML 웹사이트 레이아웃을 구성하는 시맨틱 태그 (0) | 2022.04.08 |
댓글