HTML5 - 요소(element)

HTML5 요소(element)

HTML5에서는 다양한 요소(element)가 도입되었습니다. 이러한 요소들은 콘텐츠의 구조와 의미를 명확하게 정의하고 표현하는 데 도움을 줍니다. 몇 가지 주요한 HTML5 요소를 소개하겠습니다:

 

• <header> 요소: 문서의 머리말을 나타냅니다. 로고, 제목, 검색 폼 등과 같이 사이트의 상단 부분에 표시되는 콘텐츠를 담을 수 있습니다. 한 문서 내에 여러 개의 header 요소가 존재할 수 있습니다.

• <nav> 요소: 문서의 탐색 링크를 그룹화하여 나타냅니다. 메뉴, 사이드바, 페이지 링크 등을 포함할 수 있으며, 사이트 내에서의 탐색을 돕습니다.

• <section> 요소: 문서의 주제나 콘텐츠의 구획을 나타냅니다. 관련된 콘텐츠를 그룹화하여 표현할 때 사용됩니다. 기사, 블로그 게시물, 코멘트 섹션 등을 포함할 수 있습니다.

• <article> 요소: 독립적으로 구분되거나 재사용 가능한 콘텐츠를 나타냅니다. 뉴스 기사, 블로그 글, 포럼 게시물 등을 포함할 수 있으며, 검색 엔진에서도 독립적으로 인식될 수 있습니다.

• <aside> 요소: 주요 콘텐츠와는 관련이 적은 보충 정보를 나타냅니다. 사이드바, 광고 영역, 사이트의 부가 콘텐츠 등을 포함할 수 있습니다.

• <footer> 요소: 문서의 하단 영역을 나타냅니다. 저작권 정보, 연락처, 관련 링크 등과 같이 사이트의 하단 부분에 표시되는 콘텐츠를 담을 수 있습니다. 한 문서내에 여러개의 footer요소가 존재할 수 있습니다.

이 외에도 <main>, <figure>, <figcaption>, <time>, <video>, <audio> 등 다양한 요소가 HTML5에서 도입되었습니다. 

---

HTML5 input 요소

input 요소의 type

• 텍스트 입력
• 비밀번호 입력
• 라디오 버튼
• 체크박스(check box)
• 파일 선택 박스
• 선택 입력
• 문장 입력
• 버튼 입력
• 전송 버튼
• 필드

HTML5에서 추가된 input 요소

• datalist : input 요소에 대해 미리 정의된 옵션 리스트를 명시함.
• keygen : form 요소 안에 두 개의 key를 만들어주는 생성기를 명시함(현재 HTML5에서 사용하지 않음)
• output : 스크립트 등으로 실행된 계산의 결과를 바로 나타냄

 datalist 요소

datalist 요소는 <input> 요소의 옵션 목록을 정의하는 데 사용됩니다. 사용자가 입력 필드에 값을 입력할 때, 미리 정의된 옵션 목록이 표시되며. 표시된 옵션을 통해 사용자가 쉽게 입력 값을 선택할 수 있다.

<label for="browser">Choose a browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Opera">
  <option value="Edge">
</datalist>

Choose a browser:

output 요소

output 요소는 계산 결과나 사용자 입력의 결과를 표시하는 데 사용됩니다. 주로 스크립트와 함께 사용되어 계산 결과를 동적으로 표시하거나 사용자 입력을 확인하는 용도로 활용합니다.

<label for="num1">Number 1:</label>
<input type="number" id="num1" name="num1" value="0">
<br>
<label for="num2">Number 2:</label>
<input type="number" id="num2" name="num2" value="0">
<br>
<label for="result">Result:</label>
<output id="result" name="result"></output>
<br>
<button onclick="calculate()">Calculate</button>

<script>
function calculate() {
  var num1 = parseInt(document.getElementById("num1").value);
  var num2 = parseInt(document.getElementById("num2").value);
  var sum = num1 + num2;
  document.getElementById("result").value = sum;
}
</script>

Number 1:
Number 2:
Result:

---

HTML5 추가 input 요소 정리 표

header	문서의 헤더 영역을 정의합니다.
nav	네비게이션 링크를 그룹화하여 정의합니다.
section	문서의 섹션을 정의합니다.
article	독립적인 콘텐츠 영역을 정의합니다.
aside	사이드바나 부가적인 콘텐츠 영역을 정의합니다.
footer	문서의 푸터 영역을 정의합니다.
main	문서의 주요 콘텐츠 영역을 정의합니다.
figure	그림, 다이어그램, 사진 등의 콘텐츠와 캡션을 그룹화하여 정의합니다.
figcaption	<figure> 요소의 캡션을 정의합니다.
time	시간 또는 날짜를 나타내는 콘텐츠를 정의합니다.
mark	강조나 하이라이트된 콘텐츠를 정의합니다.
progress	작업 진행 상태를 나타내는 진행 표시기를 정의합니다.
meter	스칼라 범위나 측정 가능한 값을 나타내는 콘텐츠를 정의합니다.
details	추가 정보나 상세한 콘텐츠를 정의하고 접근성을 제공합니다.
summary	<details> 요소의 요약 정보를 정의합니다.
datalist	<input> 요소에 사용자 입력값을 보조하는 목록을 정의합니다.
output	계산 결과나 스크립트의 출력값을 나타내는 콘텐츠를 정의합니다.
canvas	그래픽을 그리기 위한 영역을 정의하고 스크립트를 통해 그래픽을 조작합니다.
audio	오디오 콘텐츠를 재생하기 위한 컨트롤을 정의하고 오디오 파일을 포함시킵니다.
video	비디오 콘텐츠를 재생하기 위한 컨트롤을 정의하고 비디오 파일을 포함시킵니다.

 

다음 글에서 추가된 input 요소의 type 사용 예시를 보겠습니다.