당신이 몰랐던 태그의 모든 것

선정 이유

개발을 하다보면 무지성으로 태그를 사용하게 되는데 태그의 의미를 정확하게 이해하지 못하고 사용하게 되어
태그의 의미를 정확하게 이해하고 사용할 수 있도록 학습하기 위해 선정하였다.

들어가기 전에 정의부터 알아보자

하이퍼 텍스트(Hyper Text)
- 1. 하이퍼텍스트는 문서 안에서 텍스트와 다른 문서를 링크로 연결하는 시스템
- 1. 하이퍼링크와 인터넷을 결합하여 지금의 월드 와이드 웹(WWW)이 만들어 졌다.
HTML(Hyper Text Markup Language)
- 1. 마크업 언어는 문서의 구조를 정의하고, 다른 요소들에 대한 표현을 지정하는 언어
- 1. 웹 페이지는 단순한 텍스트의 나열이 아닌, 서로 관련된 정보를 구조적으로 나누고, 각 요소의 관계를 명확하게 나타내는 것이 중요함
- 1. 마크업 언어가 텍스트를 태그로 감싸는 방식(<tagName>)으로 작동한다는 특징이 의미론적 구조를 정의하는 데 유리했습니다.

HTML 역사

HTML 1.0 (1991년): 웹의 첫 번째 표준 마크업 언어로, 텍스트 기반의 간단한 웹 페이지를 만들 수 있었다.
HTML 2.0 (1995년): HTML 1.0의 기능을 확장하여 더 다양한 태그와 기능을 지원하였고, 웹 브라우저에서 페이지를 렌더링하는 데 필요한 표준을 확립했다.
HTML 3.2 (1997년): HTML에 Javascript, CSS를 추가하여 웹 페이지의 레이아웃을 더 세밀하게 제어하고, 동적 웹 어플리케이션의 틀을 마련했다.
HTML 4.01 (1999년): 접근성과 표준을 강조하며, 웹 페이지의 콘텐츠를 구조적으로 정의하는 데 더 중점을 두었다.
HTML5 (2014년): 웹 애플리케이션 개발을 위한 다양한 기능을 추가하며, 멀티미디어 콘텐츠, 애니메이션, 모바일 웹 등의 지원을 강화했다.

주요 범위 요소

HTML 문서의 기본 구조(범위)를 형성하는 요소

<!DOCTYPE html>
<html lang="ko">
  <head></head>
  <body></body>
</html>

<!DOCTYPE html> - HTML 버전이 무엇인지를 웹 브라우저에 알려주는 역할을 하는 선언문

그렇다면 이 태그가 없으면 어떻게 될까? <!DOCTYPE>이 없으면 웹 브라우저가 문서를 잘못 해석하거나 렌더링하는 경우가 발생할 수 있다.

현재 웹 브라우저의 레이아웃 엔진에서 사용하는 모드는 세 가지다. 이때 레이아웃 엔진은 렌더링 엔진이기도 하다.

과거에 웹 표준이 W3C에서 만들어질때 브라우저들은 이를 그대로 사용할 수 없었습니다. 그렇게 되면 웹의 대부분의 기존 사이트가 동작하지 않기 때문에 브라우저들은 새로운 표준을 준수하는 사이트와 이전 레거시 사이트를 다르게 처리하기 위해 두 가지 모드를 도입했다. 그것이 quirks 모드와 no-quirks 모드였다.

quirks모드 - Navigator 4와 Internet Explorer5의 동작을 모방
no-quirks모드 - 현대 HTML 및 CSS명세에서 설명한대로 동작합니다.
limited-quirks모드 - 일부 quirks만 구현된다. (절충형)

<!DOCTYPE html>이 가장 단순하며 현재 HTML 표준에서 권장하는 DOCTYPE이다.

다른 DOCTYPE을 사용하는 경우 limited-quirks모드 또는 quirks 모드를 트리거할 위험이 있다. 따라서 유일한 목적은 no-quirks 모드를 활성화하는 것이다.

모드 확인 방법 자바스크립트에서 document.compatMode의 값은 문서가 quirks 모드에 있는지 여부를 표시한다. f12를 눌러 콘솔 로그를 찍었을 때 값이 "BackCompat"이면 문서가 quirks 모드라는 것이고 "CSS1Compat"이면 no-quirks 모드라는 것이다.

요소	설명	표시 특성
`<html>`	HTML 문서의 범위를 지정.
`<head>`	HTML 문서의 정보를 지정.
`<body>`	HTML 문서의 구조를 지정.	block

이 이후부터는 생소하거나 모를 법한 개념 위주로 작성하였습니다. 더 자세한 내용을 원하시면 아래 참고를 확인해 주세요.

메타데이터 요소

문서의 기본 정보를 지정하거나 다른 리소스와의 관계를 지정한다.
일부 메타데이터 요소는 브라우저와 검색 엔진 등에 제공하며 효과적인 SEO 최적화와 사용자 경험 향상에 기여한다.
모두 <head> 요소 내에 포함돼야 한다.

<title>

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

<base />

HTML 문서에 포함된 모든 상대 URL들의 기준 URL를 지정.
한 문서에 하나의 <base /> 요소만 포함 가능.
href: 기준 URL
target: target 속성을 사용하는 요소(<a>)의 기본값

<link />

외부 리소스(HTML, CSS, Icon 등)의 연결 및 현재 문서와의 관계를 명시.
rel: (필수)현재 문서와 외부 리소스와의 관계(Link Types)
href: 외부 리소스의 URL
type: 외부 리소스의 MIME 타입

<meta />

기타 메타데이터를 나타내기 위해 지정 (검색엔진이나 브라우저에 정보 제공)
charset: 문자인코딩 방식
name: 메타 데이터의 이름(정보의 종류)
http-equiv: 서버/사용자 에이전트의 작동방식 변경에 대한 지시(HTTP 응답 헤더 제공)
content: name, http-equiv의 값

<style>

문서나 문서 일부에 대한 스타일 정보(CSS)를 지정.
type: MIME 타입
생소한 부분도 꼼꼼히
MIME 타입
- 1. 미디어 타입 (Multipurpose Internet Mail Extensions)
- 1. MIME 타입은 가장 일반적으로 슬래시(/)로 구분된 'type'과 'subtype'의 두 부분으로 구성된다. 또한 이 사이에는 공백이 없다. 웹 개발자들을 위한 중요한 타입 text/plain - 이것은 텍스트 파일에 대한 기본값입니다. 실제로 '알려지지 않은 텍스트' 파일일지라도 브라우저들은 그것을 보여줄 수 있다고 가정합니다. text/css - 웹 페이지를 그리는 CSS 파일들은 text/css 파일이 되어야만 합니다. text/html - 모든 HTML 컨텐츠는 이 타입과 함께 제공되어야 합니다. text/javascript - JavaScript 컨텐츠는 MIME 타입 text/javascript 사용해서 제공되어야 합니다.
http-equiv
1. content-type
- 해당 문서의 문자 인코딩 방식을 명시함. ex- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
1. default-type
- 우선적으로 적용할 스타일시트를 명시함.
- content 속성값은 동일한 문서에 존재하는 link 요소의 title 속성값과 일치하거나, 동일한 문서에 존재하는 style 요소의 title 속성값과 일치해야만 합니다. ex- <meta http-equiv="default-style" content="preferred stylesheet">
1. refresh
- 해당 문서를 새로고침(refresh)할 시간 간격을 명시함.
- refresh 속성값은 사용자로부터 페이지에 대한 제어를 빼앗아오기 때문에 주의를 기울여 사용해야 합니다. ex- <meta http-equiv="refresh" content="30">

콘텐츠 구분 요소

문서의 각 콘텐츠 구조를 의미론적으로 구분하기 위해 사용합니다.
기능적 차이는 없습니다.

<h1> ~ <h6> 문서의 정보 계층을 구조화.(Heading)

문서나 구분된 영역의 제목을 지정, 문서의 목차.
숫자가 낮을수록 높은 단계(중요한)의 제목.
한 문서에 하나의 <h1> 요소만 포함 가능.

<header>

문서의 헤더를 지정.
주로 문서의 제목, 로고, 메뉴 등을 포함.

<main>

문서의 주 콘텐츠를 지정.
한 문서에 하나의 <main> 요소만 포함 가능.

<article>

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

<div>

본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 지정.(Division)

<address>

연락처 정보를 제공하기 위해 포함하여 사용.

텍스트 콘텐츠 요소

텍스트를 구조화하고 의미를 부여합니다.
정보의 가독성과 접근성을 향상시키는 역할을 합니다.

<ol>

정렬된 목록을 지정.(Ordered List)
자식으로 <li>만 포함 가능.
항목 순서는 중요도를 의미할 수 있음.
start: 항목에 매겨지는 번호의 시작 값
type: 항목에 매겨지는 번호의 유형

<ul>

정렬되지 않은 목록을 지정.(Unordered List)
자식으로 <li>만 포함 가능.

<li>

목록의 각 항목.(List Item)
단독으로 사용할 수 없으며, <ol> 혹은 <ul> 자식으로 포함돼야 함.
value: 항목의 순서를 지정.

<dl>

용어와 정의(설명)의 그룹을 지정.(Description List)
자식으로 <dt>과 <dd>만 포함 가능.
키(key)/값(value) 형태를 표시할 때 유용.

<dt>

용어를 지정.(Definition Term)

<dd>

정의(설명)를 지정.(Definition Details)

<hr />

문단의 분리를 위해 지정.(Horizontal Rule) 표현적 관점에서 수평선으로 표시되지만, 의미적 관점으로만 사용해야 함.

<pre>

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

<blockquote>

일반적인 인용문을 지정.(Block Quotation) -cite: 인용된 정보의 URL

인라인 텍스트 요소

텍스트를 강조하거나 스타일을 적용해, 보다 가독성 높은 문서를 작성할 수 있습니다.

<abbr>

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

<b>

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

<mark>

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

<i>

특별한 의미 없이, 평범한 글자와 구분(아이콘이나 특수기호 같은)하기 위해 사용.
기본적으로 이탤릭체(Italic type)로 표시됨. inline MDN

<dfn>

용어를 정의할 때 사용.(Definition)
기본적으로 이탤릭체(Italic type)로 표시됨. inline MDN

<cite>

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

<q>

짧은 인용문을 지정.(Inline Quotation)
긴 인용문을 지정할 경우 <blockquote>를 사용. inline MDN

<u>

밑줄이 있는 글자를 지정.(Underline)
순수하게 꾸미는 용도의 요소로 사용. <a>와 헷갈릴 수 있는 위치에서 사용하지 않도록 주의. CSS text-decoration: underline; 사용을 권장함. inline MDN

<code>

컴퓨터 코드 범위를 지정.(Inline Code) 기본적으로 Monospace 글꼴로 표시됨. inline MDN

<kbd>

텍스트 입력 장치(키보드)에서 사용자 입력을 나타내는 텍스트 범위를 지정.(Keyboard Input) inline MDN

<time>

날짜나 시간을 나타내기 위한 목적으로 사용.
datetime: 유효한 날짜 문자 inline MDN

<br />

줄바꿈을 지정.

멀티 미디어 요소

<img />

elementtiming

<img alt="Alt for a main blog post image" src="my-massive-image.jpg" elementtiming="Main image">

<p elementtiming="important-text">Some very important information.</p">

사용자 관점에서 중요한 요소의 로딩·렌더링 시간 측정 가능

예컨대 기사 페이지의 대표 이미지, 상품 이미지, 주요 텍스트 블록 등 “사용자가 가장 먼저 보게 되는 콘텐츠”에 속성을 달아두면, Performance API를 통해 정확히 몇 ms 후에 렌더링되었는지 알 수 있다.

<figure>

이미지나 삽화, 도표 등의 영역을 지정.

figcaption

<figure>에 포함되어 이미지나 삽화 등의 설명을 표시.(Figure Caption)

양식 요소

<form> 속성들

autocomplete - 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부

<input /> pattern

정규 표현식으로 사용자 입력을 검사할 때 사용.

<fieldset>

양식의 관련 요소들을 그룹화.
disabled: 그룹 내 모든 양식 요소를 비활성화
form: 그룹이 속할 하나 이상의 <form>의 id 속성 값
name: 그룹의 이름

<legend>

<fieldset>의 제목을 지정.

<datalist>

자동완성 목록을 지정.
id: <input>의 list 속성과 바인딩

그외 생소한 기타 속성들

crossorigin 설정

<video>, <audio>, <link>, <script> 등 외부 리소스를 불러오는 **요소(Element)**가 CORS(Cross-Origin Resource Sharing) 정책을 어떻게 처리할지 결정하는 설정

키워드	Description (요약)	CORS 요청 시 credentials flag	특징
`anonymous`	인증 정보 없이 요청	`same-origin`	쿠키·인증 없이, 단순히 CORS 헤더만 확인
`use-credentials`	인증 정보 포함	`include`	쿠키·HTTP 인증 헤더 등을 포함하여 요청
`""` (빈 문자열)	anonymous와 동일	`same-origin`	HTML 문법상 `<img crossorigin>` 또는 `<img crossorigin="">`도 가능

HTML 페이지 로딩 성능 최적화 요약

기본 개념

빠른 페이지는 방문자 만족도, 서버 부하 감소, 네트워크 효율을 동시에 향상시킴.
저속 회선뿐 아니라 고속 인터넷 환경에서도 체감 성능을 개선할 수 있음.
상식적이고 실험 기반의 최적화가 가장 효과적임.

주요 최적화 원칙

페이지 무게를 줄여라

불필요한 공백, 주석 제거.
CSS와 JS는 외부 파일로 분리하여 HTML 크기 최소화.
HTML Tidy 등의 도구를 사용해 자동 정리 및 압축.
JS 식별자 단축 및 코드 압축(minify)로 파일 크기 감소.

파일 수를 최소화하라

불필요한 HTTP 요청을 줄이는 것이 핵심.
CSS, JS, 이미지 등 참조 파일이 많을수록 로딩 지연됨.
브라우저는 각 파일의 If-Modified-Since 요청으로 변경 여부를 확인하므로,

파일 수가 많으면 초기 표시 속도가 느려짐.

도메인 검색(DNS Lookup)을 줄여라

리소스가 여러 도메인에 분산되어 있으면 DNS 조회 비용이 증가.
가능하면 리소스 도메인 수를 최소화하라.
현실적으로 완전 통합은 어렵지만, 최소화하는 것이 이상적.

재사용 가능한 내용은 캐시하라

Last-Modified와 ETag를 통해 효율적인 캐싱 정책 설정.
정적 파일(.html, .css)은 서버가 자동으로 수정시간을 헤더에 추가함.
동적 페이지(.php, .aspx)는 직접 캐시 제어 설정 필요.
캐시 설정으로 서버 트래픽과 요청 횟수를 대폭 줄일 수 있음.

페이지 컴포넌트의 로드 순서를 최적화하라

본문 콘텐츠 → CSS → JS 순서로 로딩.
사용자가 가장 먼저 봐야 할 내용을 먼저 불러오면 체감속도가 개선됨.
DHTML/JS 기능은 페이지 로딩 완료 후 활성화시키는 것이 좋음.

인라인 스크립트를 최소화하라

인라인 스크립트는 HTML 파싱을 중단시켜 렌더링을 지연시킴.
document.write() 대신 현대적 DOM 조작 방식을 사용하라. → createElement / appendChild / textContent
스크립트를 외부로 분리하면 캐싱 효과도 얻을 수 있음.

내용을 조각내라

거대한 <table> 기반 레이아웃은 렌더링을 지연시킴.
<div>나 작은 단위의 table로 분할하면,

페이지 전체를 다 받지 않아도 부분적으로 빠르게 표시 가능.

출처

https://www.heropy.dev/p/LWIk13 https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete

선정 이유​

들어가기 전에 정의부터 알아보자​

HTML 역사​

주요 범위 요소​

메타데이터 요소​

콘텐츠 구분 요소​

텍스트 콘텐츠 요소​

인라인 텍스트 요소​

멀티 미디어 요소​

양식 요소​

그외 생소한 기타 속성들​

crossorigin 설정​

HTML 페이지 로딩 성능 최적화 요약​

기본 개념​

주요 최적화 원칙​

페이지 무게를 줄여라​

파일 수를 최소화하라​

도메인 검색(DNS Lookup)을 줄여라​

재사용 가능한 내용은 캐시하라​

페이지 컴포넌트의 로드 순서를 최적화하라​

인라인 스크립트를 최소화하라​

최신 CSS와 올바른 마크업 사용​

내용을 조각내라​

출처​