Goal: Anatomy of HTML and Basic Tags
Table of Contents
1.Anatomy of an HTML elements
2.Anatomy of an HTML document
3.Document Metadata
4.Content sectioning
5.Text contnet
6.Inline text semantics
7.Image and multimedia
1. Anatomy of an HTML elements
1. The Opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins or starts to take effect — in this case where the paragraph begins.
2. The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.
3. The content: This is the content of the element, which in this case, is just text.
4. The element: The opening tag, the closing tag, and the content together comprise the element.
(Source : https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics#nesting_elements)
Elements can also have attributes that look like the following:
Attributes contain extra information about the element that you don't want to appear in the actual content. Here, class is the attribute name and editor-note is the attribute value. The class attribute allows you to give the element a non-unique identifier that can be used to target it (and any other elements with the same class value) with style information and other things.
An attribute should always have the following:
- A space between it and the element name (or the previous attribute, if the element already has one or more attributes).
- The attribute name followed by an equal sign.
- The attribute value wrapped by opening and closing quotation marks.
(Source : https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics#nesting_elements)
2. Anatomy of an HTML document
<!DOCTYPE html> <--이 부분은 주석문입니다. 웹 브라우저는 주석을 화면에 출력하지 않습니다.
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html><Doctype> : 현재 문서가 HTML5 언어로 작성된 웹 문서라는 뜻 <html> : 웹 문서의 시작과 끝을 나타내는 Tag <head> : 웹 브라우저가 웹 문서를 해석하기 위해 필요한 정보를 입력하는 부분, 정보로는 문서가 사용할 제목, 스크립트, 스타일 시트 등이 있다. <Meta> : Base, link, script, title 과 같은 다른 메타 관련 요소로 나타낼수 없는 메타 타이터를 담는다. <meta charset="UTF-8"> - 문자 인코딩 방식 선언. UTF-8(조합형) 과 EUC-KR(완성형)이 있다. 완성형 EUC-KR 같은 경우 완성된 조합이 없는 경우 문자를 제대로 표현하지 못해 한글 깨짐 현상이 발생하므로 UTF-8을 사용한다. <meta http-equiv="X-UA-Compatible" content="IE=edge"> - internet explorer 최신버전 지원 <meta name="viewport" content="width=device-width, initial-scale=1.0"> - 반응형 웹사이트를 지원. 화면에 랜더링 되는 영역을 어떤 방식으로 선언할지를 명시하는 부분. 디바이스의 가로너비에 최적화. 이니셜 스케일 1에서 시작 name: name 특성을 지정하면 전체 페이지에 적용되는 "문서 레벨 메타데이터"를 제공. content: http-equiv 또는 name 특성의 값을 담는다.name과 content 특성을 함께 사용하면 문서의 메타데이터를 이름-값으로 제공할 수 있다. name은 이름, content는 값을 담당. <body> : 웹 브라우저 화면에 나올 내용
3. Documents Metadata
메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진, 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이지 안에서 정의할 수도 있고, 해당하는 정보를 가진 다른 파일로 링크할 수도 있습니다.
<title> : 페이지 탭에 보여지는 문서의 제목을 설정 <base/> : HTML 문서에 포함된 모든 상대 URL들의 기준 URl를 설정 (한문서 에 하나의 <base/>요소만 포함 가능) <link/> : 외부 리소스의 연결 및 문서와의 관계를 명시. 예) <link href="style.css" rel="stylesheet"> <style> : 스타일 정보(CSS) 설정
4. Content Sectioning
콘텐츠 구획 요소를 사용하면 문서의 콘텐츠를 논리적인 조각으로 체계화할 수 있습니다. 구획 요소를 사용해 탐색을 위한 헤더 및 푸터, 콘텐츠 판별을 위한 제목 요소 등 페이지 콘텐츠의 큰 틀을 잡으세요.
Element Description <adress>HTML <address>요소는 가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타냅니다.<footer>HTML <footer>요소는 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타냅니다. 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다.<header>HTML <header>요소는 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다.<h1>,<h2>..<h6>HTML <h1>–<h6>요소는 6단계의 구획 제목을 나타냅니다. 구획 단계는<h1>이 가장 높고<h6>은 가장 낮습니다.<nav>HTML <nav>요소는 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냅니다. 자주 쓰이는 예제는 메뉴, 목차, 색인입니다.
5. Text contnet
HTML 텍스트 콘텐츠를 사용하여 여는 와 닫는 태그 사이의 블록이나 콘텐츠 구획을 정리할 수 있습니다. 해당 콘텐츠의 목적이나 구조 판별에 사용하므로 접근성과 SEO에 중요합니다.
Element Description <div>HTML <div>요소는 플로우 콘텐츠를 위한 통용 컨테이너입니다. CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않습니다.<li>HTML <li>요소는 목록의 항목을 나타냅니다.<ol>HTML <ol>요소는 정렬된 목록을 나타냅니다. 보통 숫자 목록으로 표현합니다.<p>HTML <p>요소는 하나의 문단을 나타냅니다<ul>TML 요소는 정렬되지 않은 목록을 나타냅니다. 보통 불릿으로 표현합니다
6.Inline text semantics
HTML 인라인 텍스트 시멘틱을 사용해서 단어, 줄, 혹은 아무 부분의 의미나 구조, 스타일을 정의할 수 있습니다.
Element Description <a>HTML <a>요소(앵커 요소)는 href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다.<br>HTML <br>요소는 텍스트 안에 줄바꿈(캐리지 리턴)을 생성합니다. 주소나 시조 등 줄의 구분이 중요한 내용을 작성할 때 유용합니다.<span>HTML <span>요소는 구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다. 스타일을 적용하기 위해서, 또는 lang 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있습니다.<strong>HTML <strong>요소는 중대하거나 긴급한 콘텐츠를 나타냅니다. 보통 브라우저는 굵은 글씨로 표시합니다.
7.Image and multimedia Embedded content
HTML은 사진, 오디오, 비디오 등 다양한 멀티미디어 리소스를 지원합니다.
Element Description <area>HTML <area>요소는 이미지의 핫스팟 영역을 정의하고 hyperlink를 추가할 수 있습니다. map 요소 안에서만 사용할 수 있습니다.<audio>HTML <audio>요소는 문서에 소리 콘텐츠를 포함할 때 사용합니<img>HTML <img>요소는 문서에 이미지를 넣습니다.<track>HTML <track>요소는 미디어 요소(audio, video)의 자식으로서, 자막 등 시간별 텍스트 트랙(시간 기반 데이터)를 지정할 때 사용합니다.
참고한 자료
MDN W3school 생활코딩 HTML 드림코딩 by 엘리
