- Published on
HTML
- Authors
- Name
- Na Hyunwoo
웹 개발자로써 HTML를 항상 가까이에 두고 있지만, HTML이 무엇인지 묻는다면 명확하게 답하기 힘든 것 같습니다.
뿐만 아니라, 개발을 하기 위해 여러 태그들을 쓸 때면 때때로 태그별 의미를 명확히 판단하고 올바른 쓰임으로 사용하고 있는지 의문이 들 때가 있습니다.
그래서 이번 기회에 태그의 쓰임을 명확히 공부해서 앞으로 태그를 전부 올바로 쓸 수 있도록 하고 웹의 뼈대인 HTML을 더 깊이있게 이해해보도록 합시다 🎉
HTML이란 ?
개발자는 코드를 통해서 새로운 결과물을 만들어 냅니다. 그 결과물에는 애플리케이션, 응용 프로그램, 프로그램 등이 있습니다.
그럼 웹에서의 결과를 무엇이라고 할까요 ? 바로 웹 페이지 입니다. 이 웹 페이지가 모이면 웹 사이트가 되고, 기능이 많아지면 웹 애플리케이션이 됩니다.
그 중에서 웹 페이지를 만드는 코드를 우리는 HTML이라고 합니다.
HTML은 HyperText Markup Language의 줄임말입니다. HyperText(웹 페이지에서 다른 페이지로 이동할 수 있게 하는 것) 기능을 가진 문서를 만드는 언어입니다.
HTML은 프로그래밍 언어가 아닙니다. 컨텐츠의 구조를 정의하는 마크업 언어입니다.
태그의 종류
오늘날의 HTML에는 150개가 넘는 태그가 존재합니다. 그러나 150개의 모든 태그를 알고 있는 것은 비효율적이고 그럴 필요도 없습니다.(우리에게는 구글신이 있어요)
그러나, 많이 쓰이는 태그는 기본적으로 알고 있어야 코딩 시 효율을 높여줍니다.
그렇다면, 많이 쓰이는 태그를 어떻게 판단할 수 있을까요 ?
구글에서는 전 세계에 수많은 웹페이지를 분석한 결과를 공개했고(감사합니다), 그 결과를 보기 좋게 잘 정리 정돈한 사이트가 있습니다.
아래의 사진은 가장 많이 쓰이는 상위 30개의 태그입니다. 그러면 우리는 다음의 태그들에 대해서만 명확히 알고있으면 충분하다고 할 수 있습니다.
이렇게 통계를 기반으로 중요도를 파악하면, 세상의 흐름을 어느정도 파악할 수 있고 중요도를 파악할 수 있습니다 !(꿀팁)
그러면 태그들의 쓰임을 알아보도록 합시다.
태그의 쓰임
대부분의 html문서는 다음의 기본 형식을 가지고 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>나현우 개인 블로그</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="fire fox logo">
</body>
</html>
<!DOCTYPE html>
이 웹페이지가 HTML로서 만들어졌다는 것을 뜻합니다.
<html></html>
페이지 전체를 감싸는 요소입니다.
<head></head>
본문이 아닌 본문을 설명하는 내용이 이 태그에 담깁니다. 예를 들어, title, meta와 같은 태그들은 본문을 설명하는 정보이기 때문에, 이 두 개의 태그는 head태그에 담깁니다.
<meta></meta>
UTF-8이란 녀석은 visual studio 에디터 하단에서 발견되는 녀석입니다.
이는 이 웹페이지가 UTF-8 방식으로 저장 되었다는 뜻입니다.
이 웹페이지를 UTF-8 저장 했다면, 웹 페이지를 열 때도 당연히 UTF-8 방식으로 해석해서 열어야 합니다 !
<title></title>
title 태그는 웹 페이지의 탭에 나오는 제목을 설정할 수 있게 해줍니다.
이 title 태그는 검색엔진이 웹페이지를 분석할 때 가장 중요하게 생각하는 태그이기 때문에 title 태그를 쓰지 않으면 정말 큰 손해입니다.
<body></body>
페이지에 담으려 하는 모든 컨텐츠들을 이곳에 입력합니다.
<img>
src(source) 속성에는 파일의 경로가 담깁니다.
alt(alternative) 속성에는 descriptive text를 지정할 수 있습니다. 이 메세지가 출력되는 경우는 다음과 같습니다.
- 시각 장애인이 alt 텍스트를 읽어주는 스크린 리더를 사용할 경우.
- 무언가 잘못되어 이미지가 표시가 안 될 경우.
<h1>-</h6>
heading - 제목
<p></p>
paragraph - 일반적인 문자 내용을 나타낼 때 많이 사용합니다.
<ul></ul>
unordered list - 순서가 없는 리스트
<ul>
<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JavaScript</li>
</ul>
<ol></ol>
ordered list - 순서가 있는 리스트
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<a></a>
anchor - 웹을 웹으로 만들어 줍니다.
HTML의 약자 HyperText Markup Language의 HyperText가 바로 이 태그를 의미합니다.
<a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
참고: href는 hypertext reference의 약자입니다.
접근성
웹의 핵심적인 철학은 접근성입니다. 웹은 모든 운영체제에서 동작하고, 웹페이지의 소스코드는 누구나 볼 수 있고, 웹은 저작권이 없는 순수한 공공재입니다.
웹의 이런 특징이 웹을 다른 기술들과 구별되는 특별한 것으로 만듭니다.
거기에 더해, 누구나 차별없이 정보에 접근할 수 있어야 한다는 철학을 접근성 이라고 합니다.
특히 웹이 중요하게 생각하는 접근성은 신체적인 장애가 있는 사람도 웹을 통해서 정보에 접근할 수 있어야 합니다.
이러한 접근성을 높이기 위해선 어떻게 해야 할까요 ?
그것은 semantic HTML을 작성하는 것입니다. 즉, 의미론적 HTML을 작성하는 것입니다.
예를 들어, 사이트에서 동영상을 제어하기 위한 버튼을 다음과 같이 쓸 수 있습니다.
<div>Play video</div>
그러나 이러한 코드는 다른 많은 div 중 하나일 뿐입니다. 그러나 이것을
<button>Play video</button>
과 같이 쓴다면, button 이라는 의미를 담고 있습니다.
이와 같은 방식이 semantic한 HTML입니다.
또한, 마우스 없이 키보드 만을 사용해 웹 페이지를 동작할 수 있게 만드는 것은 웹의 접근성을 높이는 방법 중 하나입니다.
더 자세한 접근성을 높이는 방법에 대한 내용은 다음의 링크에서 확인할 수 있습니다.
해소된 나의 의문점들
span이나 p로 문자들 속성값을 통일된 태그로 관리할 수 있는데 왜 굳이 h1, h2, h3와 같은 태그를 분리해서 사용해야 하지 ?
<h3>coding</h3>
<strong>
<span style="font-size: 22px;">coding</span>
</strong>
위 두 개의 코드는 어떤 것이 다를까요 ?
위의 코드는 coding이 제목이라는 의미를 나타내고 있습니다.
반면에, 아래의 코드는 coding이 22px의 크기를 가졌고, 진하게 표시되어야 한다는 시각적인 장식만 가지고 있습니다. 제목이라는 정보는 어디에도 없습니다.
검색엔진은 전세계의 웹페이지를 분석합니다. 그리고 사용자가 검색을 했을 때 검색결과를 보여줍니다.
만약 사용자가 검색엔진에게 coding이라는 정보를 검색했다면 검색엔진은
위의 코드로 감싸진 페이지와
아래 코드로 감싸진 페이지 중에 어떤 페이지를 먼저 보여줄까요?
h3로 감싸진 페이지를 더 먼저 보여줄 것입니다.
h3는 제목을 의미하지만
strong으로 감싸진 코드는 시각적인 장식이기 때문입니다.
오늘날 정보의 세계에서 검색엔진의 검색결과에서 노출되느냐는 실제로 존재하느냐, 존재하지 않느냐의 문제라고 할 수 있습니다. 100페이지 밖에 있는 검색 결과를 볼 사람을 없을 것입니다.
따라서 이는 매우 중요한 차이점입니다.
p태그 안에 div를 사용하면 왜 warning이 발생하지 ?
간혹 p 태그 안에 div를 넣어서 사용한 적이 있습니다. 그럴 때마다 warning이 떠서 코드를 수정한 적이 있는데, 이는 왜 그런지 궁금했습니다. 분명히 둘다 블록 요소인데 말이지요.
그건 바로 p 태그는 문자 정보를 입력하는 단락을 구성하기 때문입니다. 따라서 p 태그 안에는 다른 블록 요소가 포함되어서는 안되고, span, a, strong과 같은 인라인 요소만 올 수 있다.
Reference
HTML Study | Advanced Web Ranking