nika-blog

HTML 태그 분류 본문

FE/HTML

HTML 태그 분류

nika0 2021. 8. 30. 10:14

 

안녕하세요.

오늘은 HTML 태그가 어떻게 분류될 수 있는지에 대한 포스팅이에요. 

box vs item

html 태그는 크게 box 와 item으로 나눌 수 있을 것 같은데요,

예시는 다음과 같습니다. 

  • box
    대표 예시 : div, span, header, nav, form, section, article, aside, main, footer...
  • item
    대표 예시 : a, button, input, label, img, video, audio, map, canvas, table...

줄바꿈 특성

또 가장 큰 줄바꿈 특성에 따라 

  • block
  • inline

속성으로도 나눌 수 있습니다. 

CSS 의 display 속성으로 변경할 수 있다는 것도 기억해 주세요. 

inline인 경우, margin과 padding 이 적용되지 않고 않에 내용이 없으면 자리를 차지하지 않으므로 주의할 필요가 있습니다. 

 

tag & element

tag와 element 구분도 중요한데요, 다음과 같이 구분됩니다. 

  • tag
    : HTML 태그

  • element
    : content(예 : text)와 태그를 포함한 전체

* attirbute : img 의 src=""처럼 태그의 속성을 의미합니다. 

 

TIP

input 태그를 사용할 때는 label태그를 함께 사용해주는 것이 좋은데요, 

코드 가독성도 높이고 사용자에게 편리한 웹을 만들 수 있습니다. 

 

아래 코드와 같이 각각 id 와 for 을 지정해줌으로써 이용해 주면 좋을 것 같아요.

input.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>practice-inputTag</title>
</head>
<body>
    <label for="input_name">Name: </label>
    <input type="text" id="input_name" type="text">
</body>
</html>

'FE > HTML' 카테고리의 다른 글

HTML 최단시간으로 작성하기  (0) 2021.09.02
HTML 시멘틱 태그 제대로 사용하기  (0) 2021.08.17
'FE/HTML' Related Articles more