< Code diaries />

우리가 공부할 HTML tag list 본문

Html

우리가 공부할 HTML tag list

ejey 2024. 6. 6. 17:45

 

 

HTML(Hyper Text Markup Language)

 

 

  • HTML 웹문서는 브라우저에서 읽을 수 있는 텍스트로 이루어진 마크업 언어입니다.
  • 일반 문서를 만들듯이 큰제목, 두번째 제목... 내용, 이미지, 섹션, 머릿말, 꼬릿말등 계층구조에 맞춰서 시각적인 요소와 상관없이도 계층구조가 맞게 마크업을 하는 것이 중요하고, 이것을 우리는 웹표준이라고 합니다.

  • 100% 웹표준이라는 말은 없습니다. 최대한 웹표준에 맞게 문법의 계층구조를 지키고, HTML요소 중 필수속성의 사용을 지키며, 위계를 지켜 마크업하는 것이 중요합니다.

 

 

기본 사용법과 접근방식 등 HTML의 기본적인 내용을 살펴봅시다.

 

자, 커피한잔 하고.. 시작합시다~!

 

01. 영역의 의미를 정의하는 태그(Semantic Tag)

Tag Description Meaning
<header> 머릿말 태그로,
<body>태그의 child element일때에는 문서의 머릿말 역할로써,
로고, 메뉴등을 넣어 문서의 헤더영역을 나타낸다.

하지만, <section> 태그에 넣으면, 그영역의 머릿말로 해석될 수 있으며,
<footer> 태그에 넣을 수 없다.

적어도 하나의 헤딩요소 사용을 권장한다.		  
<main> 문서의 메인영역을 나타내는 태그로써, 한 문서에 한번만 사용할 수 있다.
구 브라우저대응을 위해 role = "main" 속성을같이 사용하는 것이 좋다.		  
<footer> 꼬릿말 태그로, 
<body> 태그의 child element일때에는 문서의 꼬릿말 역할로써,
copyright정보 address등을 넣어 저작권자의 정보를 넣어준다.

또한, <nav>태그도 내부에 들어올 수 있다.
<section>태그에 넣을경우, 그 영역의 꼬릿말로 해석될 수있으며,
<header> 태그에 넣을 수 없다.		  
<section> 의미론적으로 영역을 구분할 때 사용한다.
적어도 하나의 헤딩요소 사용을 권장한다.		  
<article> 제목과 내용이 있는 하나의 기사영역과 같은 의미로 사용되고,
보통 <section>보다 작은 개념이지만, 
상황에 따라 내부에 <section>이 들어와도 상관없다.
적어도 하나의 헤딩요소 사용을 권장한다.		  
<nav> 문서의 주요메뉴 링크를 넣는 영역이며,
내부에 보통 목록태그와 같이 사용한다.		 Navigation
<aside> 작성하고 있는 문서의 내용과 상관없는 영역을 묶는다.
(배너, 퀵메뉴 등)		  
<figure> 그래프, 표, 이미지등을 묶는 용도로 사용한다.  
<figcaption> <figure>태그의 첫번째, 또는 마지막 child element로만 사용되며,
단독으로 사용할 수 없다.		  
<template> javascript 에서 사용하기위한 태그이다.  

 

시멘틱 태그란 내용에 의미를 부여할 수 있는 태그들이며, 그중 HTML5에서 새로 정의된 태그들에 대하여 시멘틱 태그라고 합니다. 하지만, 새로 나온 태그가 아니어도 의미가 담겨있는 <h1>태그 등 100여가지를 모두 시멘틱 태그로 분류하고 있습니다.

https://developer.mozilla.org/ko/docs/Glossary/Semantics

 

Semantics - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

프로그래밍에서, 시맨틱은 코드 조각의 '의미'를 나타냅니다. 예를 들어, ("이게 어떻게 시각적으로 보여질까?" 보다는), 이 Javascript 라인을 실행하는 것은 어떤 효과가 있나요?", 혹은 "이 HTML 엘

developer.mozilla.org

 

 

* 시멘틱 요소로 마크업을 했을 때의 이점을 알아보자.

1. 검색엔진이 시멘틱요소의 마크업을 페이지의 검색순위에 영향을 줄 수 있는 중요한 키워드로 간주하게 된다.

2. 시각장애가 있는 사용자가 Screen Reader 기로 접근할 때에 접근성을 높여 안내해 준다.

3. 시멘틱요소로 코드블럭을 찾는 것이 훨씬 수월하다.

 

02. 제목과 글자를 다루는 태그

Tag Description Meaning
<h1>~<h6> 헤딩요소.
문서의 내용중 제목을 나타낼 때에 사용하며,
보통 문서의 가장 큰제목은 '로고 - 사이트 제목' 로 분류되어
<h1>태그는 로고를 묶거나, 사이트명을 적을때에 한번만 사용하는 것이 대부분 입니다.		 Heading
<br> 이 요소가 있는 부분에서 강제 줄바꿈 처리되며 빈요소 이다. Line break
<wbr> 긴 단어인 경우에 브라우저에서 공간이 부족할 때에 우리가 원치않는 곳에서 줄바꿈을 해버리는 경우가 종종 있다. 그걸 원하는 곳에서 단어의 줄바꿈 위치를 잡는 역할을 하는데 한글에서는 지원되지 않는다.

예를 들어 : 단어내의 줄바뀜 부분을 처리하는 방법은 아래와 같다.

1. templates 단어 중간에 줄바꿈을 하고싶으면 templates 이렇게 하면 총 3가지의 단어처럼 나누어져서 필요시 줄바꿈을 한다.

2. tem­plates 이렇게 처리할 경우에는 tem-이렇게 줄 바꿈이 된다.		 Word Break Opportunity
<p> 문단, 문장을 표현 Paragraph
<strong> 주의, 또는 강한 강조 Strong
<em> <strong>태그보다는 약하지만 강조의 의미 Emphasis
<b> 문맥상의 살짝 강조하는 느낌에 사용
HTML5이전에는 시각적인 역할을 담당하는 태그였지만, 웹표준이 중요시 되면서 시각적인 분류태그들이 많이 없어졌는데, 그때 살아남은 태그 ^^ 큰 의미를 두지는 않습니다.		 Bold
<i> <b>와 동일 Italic
<sup>,<sub> 위첨자, 아래첨자 superscript, subscript
<del>,<ins> 정보를 지우고 다시 넣는 의미
예를 들면 59,900 -> 9,900 으로 정정할때,
또는 일정변경시 변경전, 후를 나타낼 때에 적절		 delete, insert
<time> 날짜, 시간정보
<time datetime="2024-03-04T11:20:00">3월 4일 11:20</time>
<time datetime="2024-03-04">3월 4일</time>		 datetime 속성과 같이 쓴다.
<mark> 텍스트에 형광펜 효과 - 시각적인 요소로 생겨남  
<dfn> 현재 맥락이나 문장에서 정의하고 있는 용어를 나타내며, 본 요소에서 가장 가까운 
<p>, <dt>/<dd>세트, <section> 조상요소를 용어정의로 간주한다.

말머리에 시작이 되었을 경우 <abbr>과 같이 사용하는 것도 좋다.

<p>		 defining
<abbr> 축약어를 나타내는 태그로써 이전에 <acronym>과 의미상으로 나누어서 썼던 부분들이 HTML5부터 <abbr>하나로 사용하기로 통합되었다.
title 전역속성으로 준말 또는 말머리에 대한 설명을 넣을 수 있으며, <dfn> 태그와 함께 사용하여 접근성을 더 높일 수도 있다.

<abbr title="world wide web">WWW</abbr>		 abbreviation

 

 

<dfn> tag - MDN 예제

<p>
  <dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr> </dfn> is a
  markup language used to create the semantics and structure of a web page.
</p>

<p>
  A <dfn id="spec">Specification</dfn> (<abbr title="Specification">spec</abbr>)
  is a document that outlines in detail how a technology or API is intended to
  function and how it is accessed.
</p>

 

 

 

03. 목록을 만드는 태그 - 목록 태그는 글 목록에도 사용하지만, 주로 메뉴구조에도 사용됩니다.

Tag Description Meaning
<ul> 목록그룹태그, 순번이 없는 목록에 사용
Child element는 <li>만 허용됨(중요)
Bullet 기호로 목록을 표시하며 종류는 3가지 또는 이미지로도 가능하나 잘 사용하지 않습니다. 		 Unordered List
<ol> 목록 그룹태그, 순번이 있는 목록에 사용
Child element는 <li>만 허용됨(중요)
순번을 나타낼수 있는 숫자, 로마자, 알파벳 대소문자등으로 변경이 가능합니다.		 Ordered List
<li> <ul>,<ol> 태그의 child element로 사용되며, 다른태그의 child element가 절대로 될 수 없습니다. 또한 목록그룹태그없이 혼자 사용이 불가합니다. List Item
<dl> 정의형 목록 그룹 태그
키워드와 설명으로 이루어진 구조에 적합한 태그입니다.		 Definition List
<dt> 키워드를 나타내며, 하나의 <dt>태그뒤에는 반드시 적어도 이 키워드를 설명하는 하나의 <dd>태그가 있어야합니다. 
또한, Child element로 어떠한 블럭요소도 올 수 없습니다.		  
<dd> <dt>태그의 바로뒤에 형제요소로 올 수 있으며,
연달아 여러개의 <dd> 태그를 작성할 수 있습니다.
주의할 점은 <dt>태그의 child요소로 마크업되지 않도록 합시다.		  

 

 

04. 표를 만드는 태그

Tag Description Meaning
<table> 표를 만들때에 제일먼저 적어주는 그룹태그이다.  
<thead> 행 그룹 중 제목행에 속한다. 하나의 <table>태그내에 한개만 존재할 수 있다.  
<tbody> 행 그룹 중 내용을 묶을때 사용하며, 하나의 <table>태그내에 여러개가 존재할 수 있다.  
<tfoot> 행 그룹 중 결과행에 속한다. 하나의 태그내에 한개만 존재할 수 있다.
웹접근성에 따라 <thead>바로밑에 <tfoot>을 적어서, 이 표의 최종 결과를 먼저
인식할 수있도록 마크업의 위치를 바꾸는 걸 목표로 한다.
현재에는 이런 본질적인 의미보다 표의 꼬릿말처럼 사용되는 것같다.
하지만, 본래의 목적과 사용방법은 <thead> 바로밑에 셋트처럼 존재해야한다는 사실을 잊지말자.		  
<caption> 표의 제목을 나타내며, <table>태그내에 존재할 수 있으며, 안써도 무방하나
쓸 경우 <table>태그의 첫번째 child element로 존재해야 한다.		  
<colgroup> 열 그룹을 나타내는 태그이다.  
<col> 열 그룹내에서 열을 순서대로 나타낸다. 보통 열의 너비 지정을 위해 존재한다.  
<tr> 행을 나타낸다.  
<th> 제목에 해당하는 셀을 나타내며 scope 속성이 필수이기 때문에 꼭 같이 써줘야 웹표준에 맞는다.  
<td> 일반 셀을 나타낸다.  

 

05. Form 관련 태그

Tag Description Meaning
<form> 폼 그룹 태그이다.  
<fieldset> 필드들을 그룹을 묶어 줄 수 있다.  
<legend> <fieldset>태그의 첫번째 child element로 꼭 존재해야하며, 필드그룹의 제목을 표시한다.  
<label> 폼필드의 레이블 태그이다. 연결해주는 방법은 명시적인방법과 암묵적인 방법 두가지가 있다.  
<input> 폼필드 명령어이며, type에 따라 다양한 형태로 존재한다.  
<button> 버튼을 만드는 태그이며 종류는 3가지 이다.  
<select> 드롭다운 메뉴그룹 태그이다. <option>태그와 셋트로 사용된다.  
<optgroup> <select>메뉴내에 <option>이 많을경우 그룹으로 여러개 묶을 때 사용한다.  
<option> <select>태그의 선택할 수 있는 메뉴리스트 이다.  
<textarea> 여러줄을 입력할 수 있는 텍스트필드이다. 컨텐츠는 공백병합현상이 일어나지 않으며, Text만 입력할 수있다.  
<datalist> <input> 창에 미리 항목들을 만들어 놓고 선택하게 할 수 있다.
글자를 입력하면 미리 준비된 <option>목록에 따라 자동완성기능을
구현해준다. 와우!!

이때에 <input list="name"> list속성값을 <datalist id="name"> 아이디와 동일하게 맞춰 주어야 한다.

자동완성기능을 Javascript를 쓰지않고 구현이 가능하게 된것이다.^^		 MDN 참고사이트 보기
<details> ,
<summary>		 내용을 폴더식으로 접었다 폈다 하면서 내용을 적을 수 있는 태그 이다.
open이라는 속성을 넣으면 열림설정이 True가 되어 열고,닫았는지에 대한 확인도 가능하고 css 설정도 가능하다.

또한 name값을 동일하게 주면, radio 버튼처럼 선택적으로 open되게 할 수 있다.

<details  name="box" open>
     <summary>요약제목</summary>
     오픈되었을 때에 보여질 내용넣는 부분
</details>

<details name="box">
     <summary>요약제목</summary>
     오픈되었을 때에 보여질 내용넣는 부분 
</details>		 MDN 참고사이트 보기

 



06. Media 및 기타 태그

Tag Description Meaning
<video> 동영상 파일을 넣을 수 있는 태그이다.  
<audio> 오디오 파일을 넣을 수 있는 태그이다.  
<iframe> 다른 웹문서를 현재문서에 창을 만들어 보여줄 수 있는 태그이다.
종료태그가 있지만 컨텐츠를 포함할 수없으니 주의하자.		  



 

자, 어렵지 않아요~ 우리 영혼 챙겨가며 계속 공부해봅시다잉~~~!

 

 

본 문서는 제가 오랫동안 일해왔던 내용을 강의와 책편집을 위해 정리해둔 내용입니다.

힘들게 만든 만큼 공부하시는 분들께 도움이 되면 좋겠습니다.

제 피드를 공유하거나 링크를 해주시는것은 감사합니다~

 

 

 

하지만, 출처없이 이미지나 내용만을 카피해서
포스트를 쓰신다거나 하는것은 하지말아주세요 ^^

감사합니다.

 

반응형
저작자표시 비영리 변경금지

'Html' 카테고리의 다른 글

TAG 02 - 제목과 글자를 다루는 태그, 기타 태그  (4) 2024.06.06
TAG 01 - 영역을 분리하는 태그(Semantic Tags)  (2) 2024.06.06
HTML Markup 방법과 DOM 트리구조  (2) 2024.06.06
HTML - 무엇인지 스치듯이 알아봅시다~!  (2) 2024.06.06
[HTML] input 패턴 정규표현식. html 입력필드에 들어가는 값에 대한 표현식 정하기. RegExp in javascript  (6) 2024.01.25
'Html' Related Articles more