HTML5 추가요소

서론

웹페이지를 만드는데, HTML 태그들을 사용하는데, 아는 태그와 속성들만 주로 사용하고, 사용하는 것이 한정적이라서 어떤 태그들이 있는지 공부해보기 위해 HTML5에서 새로 생긴 태그들을 알아보려고 합니다. 공부를 통해 웹페이지를 더욱 깔끔하고 사용자경험을 개선하며 개발 생산성도 늘리는 효과가 있을 것으로 예상합니다.

그럼 시작하겠습니다.

 

본론

1. 시멘틱 태그

• HTML5에서는 <header>, <nav>, <main> 같은 의미를 담은 태그들이 생겨났습니다. 기존 <div>는 아무런 의미를 담고 있지 않았는데, 이런 태그들을 사용하면서 페이지의 다양한 부분을 명확하게 구분하고 의미를 부여하는데 도움을 주고, SEO(검색엔진 최적화)가 되어 다양한 검색에 잘 노출이 될 수 있습니다.

종류

• 여러가지 종류들이 추가되었지만 주로 사용하는 것들은 다음과 같습니다.

• <header> : 도입부에 해당하는 콘텐츠를 가지고 있는 부분을 의미합니다. 웹페이지 로고 등이 들어갑니다.
• <nav> : HTML 문서 사이를 탐색할 수 있는 링크의 집합을 정의합니다. 메뉴바로 주로 사용됩니다.
• <main> : HTML 문서의 핵심적인 내용이 들어있는 부분을 의미합니다. 쇼핑몰 같은 경우 상품목록들이 있는 부분입니다.
• <article> :  독립적인 하나의 콘텐츠 영역입니다. 웹사이트의 나머지 부분과는 별도로 읽을 수 있어야합니다.
• <section> : 제목을 가지고 있으며, HTML 문서의 전체적인 내용과 관련이 있는 콘텐츠의 집합입니다.
• <figure>, <figcaption> : figure태그가 그래픽과 비디오 등의 콘텐츠를 정의하고, figcaption이 해당 콘텐츠의 대한 설명을 합니다. img나 video 같은 태그로도 가능하지만 figure로 감싸주면 웹 페이지의 접근성과 SEO가 개선됩니다.

전체적인 태그 종류입니다.

의미 요소	설명
<header>	HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의함.
<nav>	HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합을 정의함.
<main>	HTML 문서의 주요 콘텐츠(content)를 정의함.
<section>	HTML 문서에서 섹션(section) 부분을 정의함.
<article>	HTML 문서에서 독립적인 하나의 기사(article) 부분을 정의함.
<aside>	HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의함.
<figure>	HTML 문서에서 그래픽과 비디오 등의 독립적인 콘텐츠(content)를 정의함.
<figcaption>	figure 요소를 위한 캡션을 정의함.
<footer>	HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 정의함.
<bdi>	기본 출력방향과는 다른 방향으로 출력되는 텍스트를 정의함.
<mark>	하이라이팅된 텍스트를 정의함.
<details>	사용자가 보거나 숨길 수 있는 추가적인 설명문을 정의함.
<summary>	details 요소에 나타날 내용을 정의함.
<dialog>	다이얼로그(dialog) 박스나 다이얼로그 윈도우를 정의함.
<menuitem>	사용자가 팝업 메뉴(popup menu)를 통해 선택할 수 있는 메뉴의 아이템(menu item)을 정의함.
<meter>	정해진 범위 내의 스칼라 치수를 정의함.
<progress>	작업에 대한 진행 정도를 정의함.
<ruby>	루비(ruby) 문자를 선언함.
<rt>	본문 위에 나타날 문자를 정의함.
<rp>	루비(ruby) 문자를 지원하지 않는 브라우저에서만 나타날 내용을 정의함.
<time>	날짜와 시간을 정의함.
<wbr>	br 요소와는 달리 긴 단어가 화면의 맨 끝에 오면 상황에 따라 줄 바꿈 할 곳을 미리 정의함.

2. input요소의 타입

타입	설명
number	사용자가 숫자를 입력할 수 있는 필드를 정의합니다. min, max, step 속성을 사용하여 값의 범위와 간격을 지정할 수 있습니다.
range	슬라이더 컨트롤을 사용하여 숫자 값의 범위를 선택할 수 있게 합니다. min, max, step 속성으로 범위를 지정할 수 있습니다.
color	색상을 선택할 수 있는 필드를 제공합니다. 사용자는 색상 선택기를 통해 색상을 선택할 수 있습니다.
date	날짜를 선택할 수 있는 필드를 제공합니다. 사용자는 달력 UI를 통해 날짜를 선택할 수 있습니다.
time	시간을 선택할 수 있는 필드를 제공합니다. 사용자는 시간 선택 UI를 통해 시간을 선택할 수 있습니다.
datetime-local	날짜와 시간을 모두 선택할 수 있는 필드를 제공합니다. 사용자는 날짜와 시간 선택 UI를 통해 이를 선택할 수 있습니다.
month	월과 연도를 선택할 수 있는 필드를 제공합니다. 사용자는 월 선택 UI를 통해 월을 선택할 수 있습니다.
week	주와 연도를 선택할 수 있는 필드를 제공합니다. 사용자는 주 선택 UI를 통해 주를 선택할 수 있습니다.
email	이메일 주소를 입력할 수 있는 필드를 정의합니다. 입력된 값은 이메일 주소 형식에 맞는지 자동으로 검증됩니다.
tel	전화번호를 입력할 수 있는 필드를 정의합니다. 입력 형식이나 패턴은 특정 지역에 맞게 설정할 수 있습니다.
url	URL을 입력할 수 있는 필드를 정의합니다. 입력된 값은 URL 형식에 맞는지 자동으로 검증됩니다.
search	검색어를 입력할 수 있는 필드를 정의합니다. 일부 브라우저에서는 이 필드에 대해 특별한 스타일이나 기능(예: 검색어 지우기 버튼)을 제공할 수 있습니다.

3. input요소의 속성

속성	설명
autocomplete	사용자가 이전에 입력한 값으로 필드를 자동 완성할 수 있게 합니다. on 또는 off 값을 가질 수 있습니다.
autofocus	페이지 로딩 시 해당 필드에 자동으로 포커스를 맞춥니다. 주로 폼의 첫 번째 입력 필드에 사용됩니다.
form	폼 소유 요소를 명시합니다. 입력 필드가 폼 외부에 있을 때, 해당 입력 필드를 폼과 연결하는 데 사용됩니다.
formaction	폼 데이터가 제출될 때 사용할 URL을 지정합니다. <form> 태그의 action 속성을 오버라이드합니다.
formenctype	폼 데이터가 서버로 제출될 때 사용할 인코딩 타입을 지정합니다. <form> 태그의 enctype 속성을 오버라이드합니다.
formmethod	폼 데이터를 서버로 제출할 HTTP 메소드를 지정합니다 (get 또는 post). <form> 태그의 method 속성을 오버라이드합니다.
formnovalidate	제출 버튼에서 이 속성을 사용하면 폼 제출 시 폼 데이터의 유효성 검사를 건너뜁니다.
formtarget	폼 데이터를 제출한 후에 서버 응답을 표시할 위치를 지정합니다 (예: _blank, _self 등). <form> 태그의 target 속성을 오버라이드합니다.
height과 width	이미지와 같은 요소의 높이와 너비를 지정합니다. 픽셀 또는 백분율 값으로 설정할 수 있습니다.
list	입력 필드에 연결할 <datalist> 요소의 ID를 지정합니다. 사용자에게 입력 가능한 값의 목록을 제안합니다.
min과 max	입력 가능한 값의 최소값과 최대값을 지정합니다. number, range, date 등의 유형에서 사용됩니다.
multiple	사용자가 파일 입력이나 이메일에서 여러 값을 입력할 수 있게 합니다.
pattern	입력 값에 대한 정규 표현식 패턴을 지정합니다. 이 패턴과 일치하지 않는 값은 폼 제출 시 유효성 검사를 통과하지 못합니다.
placeholder	필드에 입력하기 전에 필드 내부에 표시되는 짧은 도움말 또는 가이드 텍스트를 지정합니다.
required	필드가 반드시 채워져야 함을 나타냅니다. 이 속성이 있는 필드는 값이 없는 채로 폼이 제출되면 유효성 검사에 실패합니다.
step	number, range, date 등의 입력 유형에서 입력 값의 증가 간격을 지정합니다.

4. HTML5에서 추가된 그래픽 요소

그래픽 요소	설명
<canvas>	자바 스크립트를 이용한 그래픽 작업을 정의합니다. 픽셀 기반의 그래픽을 그리기 위해 사용됩니다. 복잡한 애니메이션이나 대규모 렌더링시 성능이 빠릅니다.
<svg>	SVG를 이용한 그래픽 작업을 정의함. XML 기반의 벡터 그래픽을 정의하기 위해 사용됩니다. 확대/축소 시에도 해상도가 유지됩니다. 작은 아이콘 또는 로고 등에 적합합니다.

4-1. <canvas>의 속성

속성	설명
width	캔버스의 너비를 지정합니다. 기본값은 300픽셀입니다.
height	캔버스의 높이를 지정합니다. 기본값은 150픽셀입니다.
id	캔버스 요소의 고유 식별자를 지정합니다. JavaScript 등에서 참조할 때 사용됩니다.

4-2. <svg> 속성

속성	설명
width	SVG 요소의 너비를 지정합니다. CSS 단위(예: px, em)를 사용하여 지정합니다.
height.	SVG 요소의 높이를 지정합니다. CSS 단위(예: px, em)를 사용하여 지정합니다.
viewBox	SVG 요소 내에서 사용자에게 보여질 영역의 크기와 위치를 정의합니다. min-x min-y width height 형식으로 지정합니다.
xmlns	SVG 요소가 사용하는 XML 네임스페이스를 정의합니다. 일반적으로 http://www.w3.org/2000/svg로 설정됩니다.
fill	도형 내부의 색상을 지정합니다. CSS 색상 값 사용 가능합니다.
stroke	도형 외곽선의 색상을 지정합니다. CSS 색상 값 사용 가능합니다.
stroke-width	도형 외곽선의 너비를 지정합니다. 픽셀 단위로 지정합니다.

5. 멀티미디어 요소

요소	설명
<audio>	오디오 콘텐츠를 웹 페이지에 임베드하기 위해 사용됩니다. src, controls, autoplay 등의 속성을 통해 오디오를 제어할 수 있습니다.
<video>	비디오 콘텐츠를 웹 페이지에 임베드하기 위해 사용됩니다. src, controls, autoplay 등의 속성으로 비디오 재생을 제어합니다.
<embed>	외부 콘텐츠(예: 플래시 애니메이션, PDF 문서)를 웹 페이지에 임베드하기 위해 사용됩니다. src, type 속성으로 콘텐츠의 위치와 유형을 지정합니다.
<source>	<audio>나 <video> 요소 내에서 사용되며, 다양한 미디어 유형과 소스를 지정하기 위해 사용됩니다. 브라우저가 지원하는 포맷을 선택적으로 제공할 수 있습니다.
<track>	<video> 요소에 자막, 캡션, 챕터 트랙 등을 추가하기 위해 사용됩니다. src, kind, label, default 속성을 통해 트랙 정보를 제공합니다.

5-1. 멀티미디어 요소들의 속성들

속성	태그	설명
src	<audio>, <video>,       <embed>, <source>, <track>	멀티미디어 콘텐츠(오디오, 비디오, 자막 등)의 소스 URL을 지정합니다.
controls	<audio>, <video>	사용자가 멀티미디어 콘텐츠를 제어할 수 있는 인터페이스(재생, 일시정지, 볼륨 조절 등)를 제공할지 여부를 지정합니다.
autoplay	<audio>, <video>	페이지 로드 시 자동으로 멀티미디어 콘텐츠의 재생을 시작할지 여부를 지정합니다.
loop	<audio>, <video>	멀티미디어 콘텐츠를 반복 재생할지 여부를 지정합니다.
muted	<audio>, <video>	멀티미디어 콘텐츠의 초기 음소거 상태를 지정합니다.
preload	<audio>, <video>	페이지 로드 시 멀티미디어 콘텐츠를 어떻게 사전 로드할지 지정합니다. 옵션: none, metadata, auto.
type	<embed>, <source>	콘텐츠의 MIME 타입을 지정합니다. 이는 브라우저가 콘텐츠를 올바르게 해석하고 재생할 수 있도록 돕습니다.
kind	<track>	트랙의 유형을 지정합니다 (예: subtitles, captions, descriptions, chapters, metadata).
label	<track>	사용자에게 보여질 트랙의 레이블(설명)을 제공합니다. 이는 사용자 인터페이스에서 자막이나 오디오 트랙 선택 시 사용됩니다.
default	<track>	해당 <track> 요소가 문서 로드 시 기본적으로 활성화되어야 함을 지정합니다.
width	<video>, <embed>	요소의 너비를 지정합니다. <video>의 경우, 비디오 재생 영역의 너비를 지정하고, <embed>의 경우 임베드된 콘텐츠의 너비를 지정합니다.
height	<video>, <embed>	요소의 높이를 지정합니다. <video>의 경우, 비디오 재생 영역의 높이를 지정하고, <embed>의 경우 임베드된 콘텐츠의 높이를 지정합니다.

결론

HTML5에 나오는 새로운 태그들을 공부해보며, JavaScript를 사용하지 않고도 HTML 태그만으로도 유효성검사나 form태그로 메소드를 지정하여 서버로 요청을 보낼 수 있고 폼 내부에서 오버라이딩을 통해 다른 방식으로 요청을 보낼 수 있고 form태그로 감싸지 않은 input을 form태그에 포함시킬 수도 있다는 것을 알아서 개발 생산성이 올라갈 것이라고 예상이 됩니다.

시멘틱 태그를 잘 활용해 SEO개선을 도모하고 더 나아가, figure, figcaption 속성을 img 태그나 video태그에 붙여서 접근성과 SEO를 개선하고 canvas와 svg 요소를 사용하여 인터랙티브한 시각적 효과를 웹페이지에 구현하여 사용자가 더 매력적이고 동적인 웹 경험을 할 수 있게 하여 사용자 경험을 개선할 수 있습니다.

공부한 태그들을 전부 기억하지는 못하지만, 무엇을 할 수 있는지 기억하여 개발할 수 있을 거 같아 공부가 도움이 되었습니다.