HTML tag 너무 많아,, 언제쓰지?

태그는 너무나도 많아서 언제 무엇을 써야할지, 모르겠다 이말이에요.
그리고 똑같은 기능을 하는 것도 태그를 달리해서 구현할 수 있으니 말이에요.

<h4>tag</h4>
<span style="font-size:16px; font-weight:bold">tag</span>

예를 들어, 이런식으로 사실 비슷하게 시각적으로 구현할 수 있으나,
받아들이는 입장에서 h4 태그의 의미가 훨씬 더 와닿게 되니까요!!
( 가독성이 높고 정보를 담게 된답니다. )

심지어, 검색엔진에서는 똑같은 tag를 검색한다면 h4 태그로 이루어진 웹페이지를 보여준다고 하니, 적재적소에 태그를 쓰는게 얼마나 중요한지..!

HTML이 중요한 이유
https://opentutorials.org/course/3084/18488

그렇기에, 지금껏 생각없이 span과 div를 주구장창 써오던 과거의 저를 반성하며, 구현하면서 언제쓰는지, 무슨 의미를 내포하는지 정리 겸 써내려 가겠어요,,

이 글은 항상 추가 된답니다. 열심히 개발하는 증거가 될거에요. 화이팅!

기본 뼈대,,

사실 react나 next로 프로젝트를 처음 세팅하게 되면 알아서 만들어주기 때문에 볼 일이 잘 없었지만 정리 겸 써보겠습니다.

DOCTYPE

html 태그 선언전 가장 먼저 선언되어야 하는 마크업 언어용 DTD 태그
HTML의 버전을 웹 브라우저에게 알려주는 역할을 하며, html5 이후로는 아래와 같이 선언하면 된다.

<!DOCTYPE html>

html

브라우저에게 이놈은 html문서야! 임을 알려주는 태그
DOCTYPE을 제외하고 모든 태그를 감싸게 된다.

head

해당 문서의 정보인 메타데이터를 정의할 때 사용하는 태그
title, meta 등의 태그가 이용된다

<head>
  <!-- 제목 표시줄 : 연습용 -->
  <title>연습용</title>
  <!-- 모바일 웹 작업시, 기기에 맞게 뷰포트를 1배로 맞추겠다. -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

body

모든 컨텐츠를 포함하는 브라우저에 실제 표시되는 영역

자주 이용했던,,

머릿속에서 생각나는 것들 위주로 정리해볼게요,,
위에 위치할수록 자주 이용했던 것들이겠죠?

div

제일 만만하게 아무곳에 막 갖다 붙였던 태그
별 의미는 없고 특정 구역, 컨텐츠들을 묶어 하나의 컨테이너 역할을 하게 된다.

span

div와 비슷한 성격의 태그로서 보통 텍스트에 css를 줄때 사용했던 태그
인라인 요소들을 하나로 묶을 때 사용하게 된다.

div는 block, span은 inline
(block: 줄바꿈 o, inline: 줄바꿈 x)

h1 ~ h6

제목을 정의할 때 사용하는 태그
h1일수록 중요도가 큰 제목, 굵기와 크기가 크다.

header

한 구역이나 특정 섹션의 헤더를 담당할 때 사용하는 태그
보통 상단 네비게이션이나 반복되는 헤더에 많이 사용했던 것 같다.

main

문서의 중심 컨텐츠들을 담는 태그

<>
  <!-- 기본 뼈대 -->
  <header>{header}</header>
  <main>{main}</main>
  <section>{bottom}</section>
</>

footer

문서의 푸터를 정의할 때 사용하는 태그
하단 네비게이션을 이용할 때 주로 사용했으나, 저자, 연락처 등을 담는다고 한다.

nav

다른 페이지로 이동하는 네비게이션을 포함하는 태그
상단,하단 네비게이션

img

이미지를 보여주기 위한 태그
src, width, height, alt 등의 속성을 갖는다.
src: 경로, width: 가로 크기, height: 세로 크기, alt: 이미지가 없을 시 대체 텍스트

a

한 페이지에서 다른 페이지 링크를 걸 때 이용하는 태그
anchor의 약자로 웹 페이지와 외부 링크 모두 가능
링크(link)의 목적지를 가리키는 href 속성이 매우 중요
target: _blank의 속성을 주게 되면, 새로운 창이 열리게 됨

<a href="https://www.naver.com">
  네이버
</a>

input

입력을 받을 수 있는 필드로 자주 이용하게 되는 태그
type에 따라 여러 형태로 이용된다.
type
text: 한 줄짜리 텍스트 상자
url: url를 입력하는 필드
number: 숫자를 입력하는 필드
range: 범위를 지정하는 필드
button: 버튼으로 이용

button

클릭하는 버튼을 만들 때 사용하는 태그
type="button"을 명시하고, input은 내부적으로 추가적 태그를 못쓰는 닫힌 태그지만 버튼은 그렇지 않기에 이미지 등을 버튼으로 활용 가능하다.
<시각적 효과>

section

주제별로 컨텐츠를 묶을 때 사용하는 태그

textarea

텍스트를 여러줄 입력 가능하게 하는 태그
css 처리를 해주지 않으면 상자 크기도 조절하고, 엔터를 쳤을 때 전송이 아닌 줄내림이 되기 때문에 잘 이용해야 된다.

br

줄 바꿈을 이용할 때 사용하는 태그
텍스트 내에서 엔터를 칠 경우, 적용되지 않아 사용하지만 br 태그를 이용하는 것보다 css를 이용해서 처리하는 것이 더 좋다고 한다.

p

문단을 정의하는 태그
앞 뒤로 여백이 생기게 되므로 css로 조정이 필요하다

canvas

그래픽을 그릴 때 사용하는 태그
자바스크립트를 통한 코딩이 필요. 프로젝트 내에서 이미지를 resize하거나, 크롭, 누끼 따는 경우에 이용했다.

참 많고도 많다. 어질어질하다 그죠?

Author And Source

이 문제에 관하여(HTML tag 너무 많아,, 언제쓰지?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@blacksooooo/Html-tag-너무-많아-언제쓰지

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)