Original article: What is HTML – Definition and Meaning of Hypertext Markup Language
HTML, 혹은 하이퍼텍스트 마크업 언어는 웹페이지의 구조를 정의하는 웹을 위한 마크업 언어입니다.
모든 웹사이트의 가장 기본적인 구성 요소이기 때문에 웹 개발자로서 경력을 쌓고 싶다면 반드시 배워야 할 언어이기도 합니다.
이 글에서는 HTML이 무엇인지 자세히 설명하고, HTML이 웹페이지에서 어떤 역할을 하는지와 HTML 중에서도 정말 멋진 시맨틱 HTML도 다룰 예정입니다.
HTML이 무엇인가요?
"HTML"을 처음부터 끝까지 이해하기 위해 이 약어를 구성하고 있는 각각의 단어를 하나씩 살펴보겠습니다.
하이퍼텍스트(Hypertext): 관련 항목을 연결하기 위해 구성된 텍스트(종종 이미지 등 삽입 포함)
마크업(Markup): 하드카피나 소프트카피로 출력될 모든 활자에 관한 스타일 가이드
언어(Language): 컴퓨터 시스템이 명령어를 이해하고 해석할 때 사용하는 언어
HTML은 웹페이지의 구조를 결정합니다. 이 구조만으로는 웹페이지를 보기 좋게 꾸미거나 상호작용이 가능하게 만들기는 어렵습니다. 그렇기 때문에 HTML을 예쁘게 꾸미거나 상호작용이 가능하게 하기 위해서는 각각 CSS와 자바스크립트라는 보조 기술을 사용하게 됩니다.
이 경우에 저는 이 HTML, CSS, 자바스크립트라는 세 가지 기술을 사람의 몸에 빗대어 설명하는 것을 좋아합니다.
- HTML은 뼈,
- CSS는 살,
- 그리고 자바스크립트는 뼈와 살에 생명을 불어넣는 순환계, 소화계, 호흡계라고 할 수 있습니다.
HTML, CSS, 자바스크립트를 이런 식으로도 볼 수 있습니다. HTML은 집을 이루는 뼈대, CSS는 집의 내부 및 외부 장식이며, 자바스크립트는 집을 거주 가능한 곳으로 만들어 주는 전기, 수도 시스템 및 그 밖의 여러 기능이라고 말입니다.
HTML 태그
HTML은 특정 웹페이지의 마크업을 정의하므로 텍스트, 이미지 등 삽입하는 내용을 특정한 방식으로 표시하는 것이 가능합니다.
예를 들어 어떤 텍스트는 크게, 다른 텍스트는 작게, 또 어떤 텍스트는 굵게, 혹은 이탤릭체나 글머리 기호 형식으로 하고 싶은 경우,
HTML의 "태그"를 사용하여 이런 일을 수행할 수 있습니다. 제목, 단락, 굵은 글씨 단어, 이탤릭체 단어 등을 표현하는 태그들이 있습니다.
아래의 이미지는 HTML 태그의 구조를 보여줍니다.
HTML 요소
한 HTML 요소는 시작 태그(opening tag), 글자, 내용, 종료 태그(closing tag)로 이루어져 있습니다. HTML 요소의 내용이 비어 있을 때도 있습니다. 종료 태그 대신 웹페이지에 삽입하려는 콘텐츠의 소스나 링크가 있는 경우입니다.
비어 있는 HTML 요소의 예로는 웹페이지에 이미지를 삽입할 때 쓰는 <img>가 있습니다.
HTML 요소는 종종 태그와 호환해서 사용되지만, 둘 사이에는 약간의 차이점이 있습니다. HTML 요소는 한 쌍의 시작 태그와 종료 태그, 그리고 그 사이에 콘텐츠가 포함된 조합을 말합니다.
HTML 요소의 구조를 시각화하는 데 도움이 될 만한 또 다른 이미지를 만들어 봤습니다.
HTML 속성
HTML 태그에도 속성이라 불리는 것이 있습니다. 이 속성들은 시작 태그 안에 위치하며, 스타일 및 id부터 class까지 다룹니다. 이들은 요소에 관한 추가 정보를 전달하고 스타일 지정 및 자바스크립트를 사용한 조작과 같은 작업의 수행을 돕는 속성값을 사용합니다.
아래의 인포 그래픽에서 시작 태그에는 "text"라는 값을 가진 class 속성이 있습니다. 이는 요소의 스타일을 지정하거나 상호작용을 위해 자바스크립트에서 선택하는 데 사용할 수 있습니다.
HTML 페이지의 기본적인 구조는 다음과 같습니다.
<!DOCTYPE html>
<html>
<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>Definition of HTML</title>
</head>
<body>
<!--Page content such as text and images goes in here-->
</body>
</html>
여기에서 중요한 코드를 짚어 봅시다.
<!Doctype html>: 이 코드에서 HTML5를 사용하고 있음을 명시합니다. HTML5가 도입되기 전까지는 <!Doctype> 태그 속에 코딩 중인 HTML 버전을 분명하게 명시해야 했습니다. 예를 들면 HTML4.0 혹은 3.2, 이런 식으로요. 하지만 더 이상 그럴 필요가 없어졌습니다. 코드에 "html"이라고 적혀 있으면 브라우저는 자동으로 HTML5로 코딩하는 것으로 받아들입니다.
<html></html>: 모든 HTML 문서의 루트, 혹은 최상위 요소입니다. 다른 모든 요소는 이 안에 래핑 되어야 합니다.
<head></head>: 웹 크롤러는 페이지에서 중요한 정보를 얻기 위해 head 태그 내부를 살펴봅니다. 여기에는 페이지 타이틀, 스타일시트, SEO용 메타 인포메이션 등과 같은 정보가 포함되어 있습니다.
<meta />: 페이지의 메타 인포메이션을 전달하는 빈 요소입니다. 이러한 정보에는 작성자, 사용 중인 인코딩 유형(거의 항상 UTF-8), 응답성, 호환성 등이 포함될 수 있습니다. 웹 크롤러는 SEO에서 중요한 역할을 하는 웹페이지에 관한 정보를 얻기 위해 언제나 메타 태그를 확인합니다.
<title></title>: 웹페이지의 타이틀을 정의하며, 항상 브라우저 탭에 표시됩니다.
<body></body>: HTML 문서의 모든 내용은 body 태그 안에 있습니다. 전체 페이지에는 단 하나의 <body> 태그만 존재할 수 있습니다.
시맨틱(Semantic, 의미론적) HTML이 무엇인가요?
시맨틱(Semantic) HTML이란, HTML 태그가 어떤 역할을 하는지 실제 의미가 부여되었다는 것을 의미합니다.
처음 도입된 90년대 초반부터 시맨틱 HTML은 HTML의 필수 요소였습니다. 하지만 CSS가 대부분의 브라우저에서 사용되기 시작한 90년대 후반까지는 특별한 관련이 없는 것으로 여겨졌습니다.
시맨틱 HTML을 사용하면 <div> and <span> 와 같이 의미론적으로 중립적인 태그들은 홀대받게 됩니다. 왜냐하면 <header>, <nav>, <main>, <section>, <footer>, <article>와 같이 의미론적으로 설명이 더 잘된 태그가 동일한 작업을 수행할 수 있기 때문입니다.
시맨틱 태그를 사용했을 때 뚜렷한 이점은 웹 크를러가 웹페이지나 웹사이트를 쉽게 인덱싱할 수 있어 SEO가 향상된다는 것입니다.
또한 시맨틱을 사용하는 웹사이트는 스크린 리더(화면 판독기, 시각장애인을 위한 웹 서핑 프로그램)를 이용하는 접속자에게 더 많은 정보를 제공하고 적응 및 접근이 용이해집니다.
주요 시맨틱 태그와 역할
가장 일반적으로 쓰이는 시맨틱 HTML 태그 중 일부를 살펴보겠습니다.
<header>: <header> 요소는 웹페이지의 소개 영역을 정의합니다. 여기에는 로고, 내비게이션, 테마 스위처, 검색창 등의 항목이 포함되어 있습니다.
<nav>: <nav> 요소는 홈, 연락처, 정보, FAQ 등과 같은 페이지의 내비게이션 항목을 지정합니다.
<main>: <main> 요소는 일반적으로 태그의 직계 자손으로 취급됩니다. 여기에는 HTML 문서에서 <header> 와 <footer> 를 제외한 HTML 문서의 메인 영역이 포함되어 있습니다. 전체 HTML 문서에는 이 태그들(<header>, <footer>, <main>) 중 하나만 있는 것이 좋습니다.
<section>: <section> 요소는 웹페이지의 특정 영역을 정의합니다. 쇼케이스 영역이 될 수도 있고, 소개 영역이나 연락처 영역 등이 될 수도 있습니다. 하나의 HTML 문서에서 수많은 영역을 사용할 수 있습니다.
<article>: <article> 요소는 웹페이지에서 특정한 정보를 전달하는 특정 부분을 나타냅니다. 이러한 정보는 텍스트, 이미지, 동영상, 삽입(임베드)의 조합이 될 수도 있습니다. 다른 블로그 포스트들을 인용한 페이지의 독립적인 블로그 포스트로 보시면 됩니다.
<aside>: 이름에서 알 수 있듯이 이 요소는 웹페이지의 사이드바를 나타냅니다. 보통 메인 콘텐츠와 직접적인 관련이 없는 웹페이지의 일부입니다.
<footer>: <footer> 요소는 바로가기 링크, 저작권 정보 또는 전체 웹사이트나 웹페이지와 관련된 기타 데이터 같은 항목을 포함합니다.
시맨틱 요소는 실제 의미와 일부 특정 콘텐츠가 실제로 수행하는 작업(예: 내비게이션에는 nav, 사이드바에는 aside)을 전달하므로, 이러한 요소는 해당 위치에 자동으로 배치되지는 않는다는 사실을 알아두십시오. CSS로 그 작업을 해야 합니다.
아주 단순한 시맨틱 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>Definition of HTML</title>
</head>
<body>
<header>
<h1 class="logo">LOGO</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>FAQs</li>
</ul>
</nav>
</header>
<main>
<section class="about-me">
<article>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio magni
est asperiores nemo, adipisci minus itaque quam, rem libero aliquam
nesciunt, nisi inventore assumenda earum repellat labore ratione
architecto eos quis. Soluta mollitia cupiditate dolorem. Consequatur a
soluta laudantium nihil. Molestias, officiis ut! Nobis adipisci
voluptatem quam at officia beatae!
</article>
</section>
<section class="contact-me">
You can find me on
<a href="https://twitter.com/koladechris">Twitter</a> You can find me on
<a href="https://Instagram.com/koladechris">Instagram</a>
</section>
<aside class="address">My Address</aside>
</main>
<footer>© 2020 All Rights Reserved</footer>
</body>
</html>
브라우저에서는 이렇게 보입니다.
<aside> 태그 내부의 콘텐츠는 사이드바에 없고 <nav> 태그 내부의 콘텐츠는 자동으로 내비게이션바(navigation bar)로 사용되지 않는 사실을 알 수 있을 겁니다. 의도한 대로 보이도록 하기 위해서는 CSS를 사용해야 하는 이유가 바로 이 때문입니다.
결론
이 글이 HTML의 기본과 기능을 이해하는 데 도움이 되었기를 바랍니다. 이제 CSS와 자바스크립트와 같은 고급 기술을 배우고, 웹 개발자로서 탄탄한 경력을 쌓으실 수 있을 겁니다.
읽어 주셔서 대단히 감사합니다. 즐거운 하루 보내세요.