코딩하는 포카칩

코딩하는 포카칩

기억을 기록하고 기록을 기억하자.
취미로 코딩하는 개발자를 향해서.

HTML의 태그와 전역속성

자세한 정보(속성, 예시 등)는 MDN 또는 W3Schools 문서를 참조

주요 범위

<!DOCTYPE>

  • 문서의 HTML버전을 지정(default: HTML5)

<html>

  • HTML 문서의 전체 범위를 지정
  • 문서의 정보(보이지 않는 정보)를 설정
  • 웹 브라우저가 해석해야 할 웹 페이지의 메타데이터를 작성

<body>

  • 문서의 구조를 설정

메타데이터

<title>

  • 브라우저의 제목 표시줄이나 페이지 탭에서 보여지는 문서의 제목을 설정

<base/>

  • 문서에 포함된 모든 상대 URL들의 기준 URL을 설정
  • 한 문서에 하나의 <base/> 요소만 포함 가능.
  • 외부 리소스의 연결 및 현재 문서와의 관계를 명시 (HTML, CSS, Icon 등 가져오기)

<meta/>

  • 기타 메타데이터 요소로 나타낼 수 없는 메타데이터를 나타내기 위해 설정
  • 검색엔진이나 브라우저에 정보 제공

<style>

  • 스타일 정보(CSS)를 설정

컨텐트 구분

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

  • 문서의 정보 계층을 구조화(Heading, 문서나 구분된 영역의 제목을 설정, 문서의 목차)
  • 숫자가 낮을수록 높은 단계(중요한)의 제목
  • 문서의 헤더를 설정(로고, 제목, 검색 등)
  • 문서의 푸터를 설정(작성자, 저작권, 관련 문서 등)

< main>

  • 문서의 주요 컨텐트를 설정(IE 지원 불가)
  • 한 문서에 하나의 <main> 요소만 포함 가능

<article>

  • 독립적으로 구분되거나 재사용 가능한 영역을 설정(매거진/신문 기사 블로그 등)
  • 일반적으로 <h1> ~ <h6>를 포함하여 식별
  • 작성일자와 시간을 <time>의 datetime 속성으로 설정

<section>

  • 문서의 일반적인 영역을 설정
  • 일반적으로 <h1> ~ <h6>를 포함하여 식별

<aside>

  • 문서의 별도 컨텐트를 설정(주로 광고, 기타 링크 등의 사이드바를 설정)
  • Navigation
  • 다른 페이지 링크를 제공하는 영역을 설정(보통 메뉴(Home, About, Contact), 목차, 색인 등을 설정)

<address>

  • <body>, <article>, <footer> 등에서 연락처 정보를 제공하기 위해 포함하여 사용

<div>

  • Division
  • 본질적으로 아무것도 나타내지 않는 컨텐트 영역을 설정

문자 컨텐트

<ol>, <ul>, <li>

  • Ordered List, Unordered List, List Item
  • 각 항목의 정렬된 목록(ol)이나 정렬되지 않은 목록(ul)을 설정
  • 순서가 필요(ol)하거나 순서가 필요하지 않은 목록(ul)을 정의
  • <ol>과 <ul>은 자식으로 <li>만 포함 가능
  • <li>는 단독으로 사용할 수 없고, <ol>이나 <ul>에 자식으로 포함되어야 함
  • <li>의 display 속성은 list-item

<dl>, <dt>, <dd>

  • Description List, Definition Term, Definition Details
  • 용어(<dt>)와 정의(<dd>) 쌍들의 영역(<dl>)을 설정.
  • <dl>은 <dd>, <dt>만을 포함해야 함
  • 키(key)/값(value) 형태를 표시할 때 유용

<p>

  • Paragraph
  • 하나의 문단을 설정
  • 일반적으로 정보통신보조기기 등은 다음 문단(<p>)으로 넘어갈 수 있는 단축키를 제공함

<hr/>

  • Horizontal Rule
  • 문단의 분리(주제에 의한)를 위해 설정
  • 대부분의 경우 수평선(border)으로 표시되나 의미적 관점으로만 사용해야 함

<pre>

  • Preformatted Text
  • 서식이 미리 지정된 텍스트를 설정
  • 텍스트의 공백과 줄바꿈을 유지하여 표시할 수 있음
  • 기본적으로 Monospace 글꼴 계열로 표시 됨

<blockquote>

  • Block Quotation
  • 일반적인 인용문을 설정

인라인 텍스트

<a>

  • Anchor
  • 다른 페이지, 같은 페이지 위치(#, 해시태그), 파일, 이메일 주소, 전화번호 등 다른 URL로 연결할 수 있는 하이퍼링크를 설정

<abbr>

  • Abbreviation
  • 약어를 지정(보통 title속성을 사용하여 전체 글자나 설명을 제공)

<b>

  • 문체가 다른 글자의 범위를 설정(Bring Attention)
  • 특별한 의미를 가지지 않고, 읽기 흐름에 도움을 주는 용도로 사용
  • 다른 태그가 적합하지 않은 경우 마지막 수단으로 사용
  • 기본적으로 글자가 두껍게(Bold) 표시 됨

<mark>

  • 사용자의 관심을 끌기 위해 하이라이팅 할 때 사용
  • 기본적으로 형광펜을 사용한 것처럼(Mark Text) 글자 배경이 노란색으로 표시

<em>

  • 단순한 의미 강조를 표시(Emphasis)
  • 중첩이 가능, 중첩이 될 수록 강조 의미가 강해짐
  • 기본적으로 이탤릭체(Italic type)로 표시됨

<strong>

  • 의미의 중요성을 나타내기 위해 사용
  • 기본적으로 글자가 두껍게(Bold) 표시됨

<cite>

  • 창작물에 대한 참조를 설정(책, 논문, 영화 , TV프로그램, 노래 게임 등의 제목)
  • 기본적으로 이탤릭체(Italic type)로 표시됨

<dfn>

  • 용어를 정의할 때 사용(Definition)

<i>

  • <em>, <strong>, <mark>, <cite>, <dfn> 등에서 표현할 수 있는 적합한 의미가 아닌 경우 사용
  • 평범한 글자와 구분(아이콘이나 특수기호 같은)하기 위해 사용
  • 기본적으로 이탤릭체(Italic type)로 표시됨

<q>

  • 짧은 인용문을 설정
  • 긴 인용문을 설정할 경우 <blockquote>를 사용

<u>

  • 밑줄이 있는 글자를 설정(Underline)
  • 순수하게 꾸미는 용도의 요소로 사용
  • <span style="text-decoration: underline;">을 활용할 수 있을 경우에는 사용을 권장하지 않음

<code>

  • 컴퓨터 코드 범위를 설정
  • 기본적으로 고정폭(Monospace) 글꼴 계열로 표시됨

<kbd>

  • 텍스트 입력 장치(키보드)에서 사용자 입력을 나타내는 텍스트 범위를 설정

<sup>, <sub>

  • 위 첨자(<sup>)와 아래 첨자(<sub>)를 설정

<time>

  • 날짜나 시간을 나타내기 위한 목적으로 사용

<span>

  • 본질적으로 아무것도 나타내지 않는 컨텐트 영역을 설정

<br/>

  • 줄바꿈을 설정

수정

<del>

  • 삭제된(변경된) 텍스트의 범위를 지정

<ins>

  • 새로 추가된(변경된) 텍스트의 범위를 지정

멀티미디어

<img/>

  • 이미지를 삽입

<audio>

  • 소리 컨텐트(MP3)를 삽입

<video>

  • 동영상 컨텐트(MP4)를 삽입

<figure>, <figcaption>

  • <figure>는 이미지나 삽화, 도표 등의 영역을 설정
  • <figcaption>은 <figure>에 포함되어 이미지나 삽화 등의 설명을 표시

내장 컨텐트

<iframe>

  • 다른 HTML 페이지를 현재 페이지에 삽입
  • 중첩된 브라우저 컨텍스트(프레임)를 표시

<canvas>

  • Canvas API나 WebGL API를 사용하여 그래픽이나 애니메이션을 랜더링

스크립트

<script>

  • 스크립트 코드를 문서에 포함하거나 참조(외부 스크립트)

<noscirpt>

  • 스크립트를 지원하지 않는 경우에 삽입할 HTML을 정의

표 컨텐트

<table>, <tr>, <th>, <td>

  • 데이터 표(table)의 행(줄 / tr)과 열(칸, 셀(Cell) / th, td)을 생성
  • Table Row, Table Header, Table Data

<caption>

  • 표의 제목을 설정
  • 열리는 TABLE 태그 바로 다음에 작성해야 함
  • Table당 하나의 caption만 사용 가능

<colgroup>, <col/>

  • 표의 열들을 공통적으로 정의하는 컬럼(col)과 그의 집합(colgroup)

<thead>, <tbody>, <tfoot>

  • 표의 머리글(thead), 본문(tbody), 바닥글(tfoot)을 지정
  • 기본적으로 테이블의 레이아웃에 영향을 주지 않음

양식

<form>

  • 웹 서버에 정보를 제출하기 위한 양식 범위를 정의
  • <form>이 다른 <form>을 자식요소로 포함할 수 없음

<input/>

  • 사용자에게 입력 받을 데이터 양식

<label>

  • 라벨 가능 요소(labelable)의 제목(caption)
  • for 속성으로 라벨 가능 요소를 참조하거나 컨텐트로 포함

<button>

  • 선택 가능한 버튼을 지정

<textarea>

  • 여러 줄의 일반 텍스트 양식

<fieldset>, <legend>

  • 같은 목적의 양식을 그룹화(<fieldset>)하여 제목(<legend>)을 지정

<select>, <datalist>, <optgroup>, <option>

  • 옵션(<option>, <optgroup>)의 선택 메뉴(<select>)나 자동완성(<datalist>)을 제공

<progress>

  • 작업의 완료 진행률을 표시

전역 속성(Global Attributes)

: 모든 HTML 요소에서 공통적으로 사용 가능한 속성

class

  • 공백으로 구분된 요소의 별칭을 지정
  • CSS 혹은 JavaScript의 요소 선택기를 통해서 요소를 선택하거나 접근

id

  • 문서에서 고유한 식별자를 정의
  • CSS 혹은 JavaScript의 요소 선택기를 통해서 요소를 선택하거나 접근

title

  • 요소의 정보(설명)을 지정

lang

  • 요소의 언어(ISO 639-1)를 지정

data-*

  • 사용자 정의 데이터 속성을 지정
  • HTML에 JavaScript에서 이용할 수 있는 데이터(정보)를 저장하는 용도로 사용

draggable

  • 요소가 Drag and Drop API를 사용 가능한지 여부를 지정

hidden

  • 요소를 숨김

tabindex

  • Tab키를 이용해 요소를 순차적으로 포커스 탐색할 순서를 지정

참조사이트
https://developer.mozilla.org/ko/docs/Web/HTML
https://heropy.blog/2019/05/26/html-elements/
https://www.w3schools.com/tags/

📝 사실은 내가 보려고 기록한 것 😊
피드백 댓글, 메일은 언제나 환영합니다!

댓글남기기

⏳ 최근 포스트 10개✍