HTML에는 다양한 요소가 있다.
요소 내에 다른 요소가 포함되어 쓰이는 경우도 있다.
여러가지의 태그를 한꺼번에 배우고 사용하다 보니
사용한 태그가 어떤 역할인지 헷갈려서 이를 정리하는 글을 작성한다.
요소 이름과 그 중에서 사용해본 요소 몇 개만 나열해보겠다.
■ 1. Main root(메인 루트)
∨ <html>: HTML 문서의 루트(최상단 요소)를 나타내며, "루트 요소"라고도 부릅니다. 모든 다른 요소는 <html> 요소의 후손이어야 합니다.
■ 2. Document metadata(문서 메타데이터)
메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진 (en-US), 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이지 안에서 정의할 수도 있고, 해당하는 정보를 가진 다른 파일로 링크할 수도 있습니다.
∨ <head>
∨ <style>
∨ <title>
■ 3. Sectioning root(구획 루트)
∨ <body>: HTML 문서의 내용을 나타냅니다. 한 문서에 하나의 <body> 요소만 존재할 수 있습니다.
■ 4. Content sectioning(콘텐츠 구획)
콘텐츠 구획 요소를 사용하면 문서의 콘텐츠를 논리적인 조각으로 체계화할 수 있습니다. 구획 요소를 사용해 탐색을 위한 헤더 및 푸터, 콘텐츠 판별을 위한 제목 요소 등 페이지 콘텐츠의 큰 틀을 잡으세요.
∨ <footer>: 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타냅니다. 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다.
∨ <header>: 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다.
∨ <h1>~<h6>
∨ <main>: 문서 body의 주요 콘텐츠를 나타냅니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어집니다.
■ 5. Text content(텍스트 콘텐츠)
HTML 텍스트 콘텐츠를 사용하여 여는 <body>와 닫는 </body> 태그 사이의 블록이나 콘텐츠 구획을 정리할 수 있습니다. 해당 콘텐츠의 목적이나 구조 판별에 사용하므로 접근성과 SEO에 중요합니다.
∨ <div>
∨ <li>: 목록의 항목을 나타냅니다.
∨ <ol>
∨ <ul>
∨ <p>: 하나의 문단을 나타냅니다.
■ 6. Inline text semantics(인라인 텍스트 시멘틱)
HTML 인라인 텍스트 시멘틱을 사용해서 단어, 줄, 혹은 아무 부분의 의미나 구조, 스타일을 정의할 수 있습니다.
∨ <a>: href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다.
∨ <abbr>: 준말 또는 머리글자를 나타냅니다.
∨ <b>: bold체
∨ <br>: 줄바꿈
∨ <cite>: 저작물의 출처.
∨ <mark>: 하이라이트
∨ <s>: 취소선
∨ <span>: 구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다. 스타일을 적용하기 위해서, 또는 lang 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있습니다.
∨ <strong>: 굵은 글씨
∨ <sub>: 활자 배치 아래 첨자
∨ <sup>: 활자 배치 위 첨자
■ 7. Image and multimedia(이미지 & 멀티미디어)
HTML은 사진, 오디오, 비디오 등 다양한 멀티미디어 리소스를 지원합니다.
∨ <audio>
∨ <img>
∨ <map>
∨ <video>
■ 8. Embedded content(내장 콘텐츠)
HTML은 일반적인 멀티미디어 콘텐츠 외에도 다양한 종류의 기타 콘텐츠를 포함할 수 있습니다.
■ 9. SVG and MathML
■ 10. Scripting(스크립트)
HTML은 동적인 콘텐츠와 웹 어플리케이션을 위해 스크립트 언어, 그 중에서도 주로 JavaScript를 지원합니다. 특정 요소가 이런 기능을 가지고 있습니다.
∨ <script>: 데이터와 실행 가능한 코드를 문서에 포함할 때 사용하며 보통 JavaScript 코드와 함께 씁니다.
■ 11. Demarcating edits(수정사항 표시)
텍스트의 특정 부분이 수정됐다는 것을 표시할 수 있습니다.
■ 12. Table content(표 콘텐츠)
표 형식의 데이터를 생성하고 처리할 때 사용합니다.
■ 13. Forms(양식)
HTML은 여러가지 입력 가능한 요소를 제공합니다. 이런 요소를 서로 조합하면 사용자가 내용을 채우고, 웹사이트나 어플리케이션에 제출할 수 있습니다. HTML 폼 안내서에 더욱 다양한 내용이 있습니다.
∨ <button>
∨ <datalist>: 다른 컨트롤에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 option 요소 여럿을 담습니다.
∨ <form>: 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냅니다.
∨ <input>: 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다.
∨ <label>: 사용자 인터페이스 항목의 설명을 나타냅니다.
■ 14. Interactive elements(대화형 요소)
HTML은 상호작용 가능한 사용자 인터페이스 객체를 만들 때 사용할 수 있는 요소를 지원합니다.
■ 15. Web components
웹 컴포넌트는 완전히 새로운 형태의 요소를 생성한 후 일반적인 HTML처럼 사용할 수 있는 기술입니다. 또한 표준 HTML 요소의 맞춤 버전을 만들 수도 있습니다.
'Study > Web' 카테고리의 다른 글
| [CSS] flex 연습 게임: FLEXBOX FROGGY (0) | 2021.07.13 |
|---|---|
| [HTML, CSS] 코코아톡 클론 코딩 | 챌린지 일정 (0) | 2021.07.13 |
| [HTML] 코코아톡 클론 코딩 | 3일차 (1) | HTML 문서의 기본 구조와 HTML 요소 구조 (0) | 2021.07.08 |
| [HTML] 코코아톡 클론 코딩 | 2일차 (2) | html의 여러가지 태그(tag)와 속성(attribute) 사용해보기 + 느낀 점 (0) | 2021.07.06 |
| [HTML] 코코아톡 클론 코딩 | 2일차 (1) | Visual Studio Code 이용해서 html 개발환경 구축하기 + 기본 확장 프로그램 (0) | 2021.07.06 |
