📚 과연 나는 지금까지 HTML 태그에 대해 완벽하게 이해하고 있었는가 ?
HTML 태그를 모두 외우고 사용하는 사람은 없을 것이다. 나 역시도 자주 사용하는 태그를 제외하고는 모르는 태그가 많다. 모르는 태그에 대해서 구글링을 통해 그때그때 맞춰서 사용하는 것도 능력이고 중요하다. 하지만 중요 태그들에 대해서 태그의 의미, 그리고 해당 태그를 왜, 언제 사용하는지에 대해서는 명확하게 알 필요가 있다.
태그에 대한 이해는 HTML을 명확히 작성하기 위해서 반드시 갖추고 있어야하는 내장 기술이라고 생각된다. 또한 더 나아가, 태그에 대한 명확한 이해가 있어야만이 다른 사람의 코드를 더욱 명확히 읽고, 이를 나의 것으로 수용할 수 있을 것이다.
다시 되돌아보니, 나조차 HTML 태그를 사용하면서도 정확히 어떤 의미를 가지고 있는지, 어떤 역할을 하는지에 대해 명확하게 이해하지 못하고 놓치는 부분들이 그동안 있었던 것 같다. 이에 이번기회에, 자주 사용되는 HTML 태그의 약자에 대해 정리해보며 각 태그의 명확한 역할과 의미에 대해 스스로 정리해 보고자 한다.
HTML 태그 / 약자 정리
📌 약자를 통해 알아보는 HTML 정의 및 역할
HTML은 Hypertext Markup Language의 약자이다.
HTML은 서로 링크로 연결된 문서(Hypertext)를 만들 때 사용하며, 내용 뿐만 아니라 구조와 의미도 표시(Markup)한다.
📌 태그 구성
HTML은 머리(head)와 몸(body)로 이루어져 있다.
-
head: HTML의 전반적인 특성을 설정하는 곳이다. (페이지에 대한 정보 설정)
-
body: 화면에 그려질(render) 내용들을 넣는 곳이다.
📌 HTML 주요 태그의 약자
-
h1, h2, ... h6: heading (제목)
-
p: paragraph (문단 구분 / 주로 본문을 작성할 때 사용)
-
br: break line (줄바꿈)
-
s: strike (취소선)
-
q: quote (짧은 문장 인용)
-
hr: horizontal rule (수평선)
-
a: anchor (링크)
-
link: link (외부 파일 연결)
-
img: image (이미지)
-
script: script (자바스크립트 / 사이트에서 인터랙션을 위해 사용)
-
ol: ordered list (순서 O 리스트)
-
ul: unorder list (순서 x 리스트)
-
li : list item (리스트 아이템)
cf>
<ol>, <ul>, <li>에 대해서는 다음 글 HTML에서 리스트의 유용성 을 통해서 더욱 자세히 알아볼 수 있다. -
div: division (구역)
-
span: span (구역)
div vs span
- div : block level element (박스 형태로 영역 설정)
- span : inline level element (줄 단위로 영역 설정)
📌 HTML에서 자주 사용되는 속성 약자
-
href: hypertext reference (하이퍼링크 삽입 / 전체 주소나 경로 삽입)
-
src: source (출처 / 이미지, 동영상 등의 경로 지정)
-
rel: relationship (불러올 파일과의 관계를 나타냄)
-
target: target (링크된 문서가 어떤 위치에 열릴지를 정의)
형태: <태그 속성="값"> hello world </태그>
📌 HTML 표준 문서 사이트
MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
whatwg: https://html.spec.whatwg.org/multipage/
Outro
중요한 태그, 혹은 명확한 이해가 필요한 태그들에 대해서는 생길 때 마다 본 페이지에 계속해서 추가해 나갈 예정이다.
