HTML에 대해 알아보자

HTML은 무엇이고 어떻게 사용해야 하는가

2025-01-22html · web5 min

컴공에 다니고 있거나 졸업한 사람은 HTML에 대해 알고 있을 것이다. HTML은 HyperText Markup Language의 약자로 웹사이트의 구조를 정의할 때 사용된다. HyperText는 단순한 Text를 넘어서(Hyper) 문서(웹페이지)를 연결한다는 의미이고 Markup은 이를 코드나 태그로 나타낸다는 뜻이다. HTML-meme 유명한 HTML 밈을 아는가? HTML은 프로그래밍 언어인가? 는 예전부터 다뤄진 주제이다. 그럼 HTML은 프로그래밍 언어일까? 결론부터 말하자면 HTML은 프로그래밍 언어가 아니다. C, Python과는 다르게 HTML은 조건문, 반복문 등의 논리 연산을 수행할 수 없고 변수를 정의할 수 없어 데이터 처리 능력이 부족하다. 앞으로 강도가 HTML은 프로그래밍 언어인가? 라고 질문하면 HTML은 Markup 언어라고 답할 수 있어야한다.

HTML Context

only-div 그렇다면 HTML은 어떻게 사용해야할까? 처음 HTML을 배울 때 <div> 태그 만을 사용해본적이 있을 것이다. 하지만 HTML에는 <header>, <atricle>, <p> 등 다양한 태그들이 존재한다. 그럼 이 태그들은 필요 없는걸까? <header>와 <div> 두 태그를 비교해보자. 두 태그 모두 다른 css속성을 주지 않으면 display: block의 속성을 가지고 있으며 기능상으로는 완전히 동일하다. 하지만 이를 사용하는 문맥적 차이가 존재한다.

<header>: HTML5에서 도입된 시맨틱 태그로, 문서나 섹션의 헤더(머리말) 역할을 한다. 웹 페이지의 상단 영역이나 섹션의 제목, 로고, 탐색 메뉴 등을 포함하는 데 사용된다. <header>를 사용하면 브라우저, 검색 엔진, 보조 기술(스크린 리더 등)이 해당 부분이 “헤더”임을 이해할 수 있다.

<div>: 비시맨틱 태그로, 단순히 콘텐츠를 묶는 용도로 사용된다. 의미가 없기 때문에 구조적으로 구분만 할 뿐, 해당 영역의 역할에 대한 정보를 제공하지 않는다.

띠리서 헤더를 묶는 block이 필요한 경우 <header> 태그, 일반적인 element들을 묶을 때는 <div> 태그를 사용해야한다. 이것으로 얻을 수 있는 장점이 있는데 검색엔진이 페이지 구조를 더 잘 이해할 수 있고(SEO 최적화), 구현된 코드의 가독성이 향상된다.

모든 태그가 기능상으로 동일한 것은 아닌데 <a> 태그와 <div> 태그를 보면 <a> 태그는 하이퍼링크를 생성할 수 있고 css 속성을 보면 <a> 태그는 기본적으로 display:inline 값을 가진다. 이런 경우 당연하게 사용 목적에 맞는 태그를 사용해야된다.

HTML 태그의 종류

  1. <html>: HTML 문서의 루트 요소
  2. <head>: 문서의 메타데이터 컨테이너
  3. <body>: 문서의 본문 내용
  4. <div>: 콘텐츠의 일반적인 컨테이너
  5. <p>: 단락
  6. <a>: 하이퍼링크
  7. <img>: 이미지
  8. <ul>: 순서 없는 목록
  9. <ol>: 순서 있는 목록
  10. <li>: 목록 항목
  11. <h1> ~ <h6>: 제목 (중요도 순)
  12. <table>: 표
  13. <tr>: 표의 행
  14. <td>: 표의 데이터 셀
  15. <th>: 표의 헤더 셀
  16. <form>: 사용자 입력 폼
  17. <input>: 입력 필드
  18. <button>: 클릭 가능한 버튼
  19. <script>: 클라이언트 사이드 스크립트
  20. <style>: 내부 CSS 스타일
  21. <span>: 인라인 요소 그룹화
  22. <br>: 줄 바꿈
  23. <hr>: 수평선
  24. <textarea>: 여러 줄 텍스트 입력 영역
  25. <select>: 드롭다운 목록
  26. <option>: 드롭다운 목록의 옵션
  27. <label>: 입력 요소의 레이블
  28. <header>: 문서나 섹션의 헤더
  29. <footer>: 문서나 섹션의 푸터
  30. <nav>: 네비게이션 링크 섹션
  31. <article>: 독립적인 콘텐츠 섹션
  32. <section>: 문서의 일반적인 섹션
  33. <aside>: 페이지 콘텐츠와 간접적으로 관련된 콘텐츠
  34. <main>: 문서의 주요 콘텐츠
  35. <figure>: 독립적인 콘텐츠 (이미지, 다이어그램 등)
  36. <figcaption>: <figure> 요소의 캡션
  37. <audio>: 소리 콘텐츠
  38. <video>: 비디오 콘텐츠
  39. <source>: 미디어 요소의 소스 지정
  40. <canvas>: 그래픽 그리기를 위한 컨테이너

결론

내가 모든 HTML 태그를 인지하고 있는 것은 아니기 때문에 분명 문맥적으로 더 나은 태그를 사용할 수 있는 부분을 <div>로 대충 사용하는 경우가 있을 것이다. 또한 HTML의 기본동작되는 css 방식 대신 구현이 편리한 속성을 마음대로 추가하는 경우도 있을 것이다. 하지만 이를 인지하고 가능한 기본동작 방식대로 사용하는 습관을 가지는 것이 코딩 컨벤션을 지켜 오래 유지될 수 있는 서비스를 개발할 수 있는 방법일 것이다.