HTML 태그 정리
1. <html> : HTML 문서의 루트(최상단 요소)를 나타내며, “루트 요소”라고 부른다. 모든 다른 요소는 <html> 요소의 후손이다.
2. <head> : 해당 문서의 제목, 스크립트, 스타일 시트 등이 온다. 즉, metadata(메타데이터란 기계가 식별할 수 있는 문서 정보 정도로만 생각해 두자)를 포함하는데, 예를 들면 저자, 설명, 그리고 HTML에 적용될 수 있는 CSS 또는 JavaScript 파일들로 연결되는 것들이 이에 해당될 수 있다. 참고로 최상위 제목, 작성자 목록 등 사람에게 보여야 할 정보는 <head>가 아니라 <header>에 써준다.
3. <body> : HTML 문서의 내용을 나타낸다. 한 문서에 하나의 <body> 요소만 존재할 수 있다.
4. <title> : 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의한다. 텍스트만 포함될 수 있으며 태그를 포함하더라도 무시한다. <title>은 페이지의 <head> 안에서 사용해야 한다.
5. <meta> : <meta> 요소는 <base>, <link>, <script>, <style>, <title>과 같은 다른 메타 관련 요소로 나타낼 수 없는 메타데이터를 나타낸다.
- name 특성을 지정하면 전체 페이지에 적용되는 “문서 레벨 메타데이터”를 제공한다.
- http-equiv 특성을 지정하면 유사한 이름의 HTTP 헤더가 제공하는 정보와 동일한 “프래그마 지시문”이 된다.
- charset 특성을 지정하면 문서 인코딩에 사용한 문자 인코딩을 나타내는 “문자 집합 선언”이 된다.
- itemprop 특성을 지정하면 “사용자 정의 메타데이터”를 제공한다.
charset: 페이지의 문자 인코딩을 선언한다. 이 특성이 존재할 경우, 그 값은 반듯시 문자열 “utf-8”의 대소문자 구분 없는 ASCII 표현이어야 한다.
name: name과 content 특성을 함께 사용하면 문서의 메타데이터 이름-값 쌍으로 제공할 수 있다. Name은 이름, content는 값을 담당한다.
6. <div>: 플로우 콘텐츠를 위한 통용 컨테이너이다. CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않는다. <div>는 <article>이나 <nav>같은 다른 semantic 태그들의 사용이 적절하지 않을 때 사용해야 한다.
7. <a> : 앵커 요소는 href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만든다. <a> 안의 콘텐츠는 링크 목적의 설명을 나타내야 한다.
- href: 클릭 시 이동할 링크
- target: 링크를 여는 방법(_self, _blank)
8. <script> : 데이터와 실행 가능한 코드를 문서에 포함할 때 사용하며 보통 JavaScript 코드와 함께 쓴다. WebGL의 GLSL 셰이더 프로그래밍 언어, JSON 등 다른 언어와도 사용할 수 있다.
9. <link> : 현재 문서와 외부 리소스의 관계를 명시한다. <link>는 스타일 시트를 연결할 때 제일 많이 사용하지만, 사이트 아이콘(favicon과 홈 화면 아이콘) 연결 등 여려가지로 쓰일 수 있다.
<link href=”main.css” rel=”stylesheet”>
<link href=”favicon.ico” rel=”icon”>
type 특성은 링크된 콘텐츠의 타입을 정의하는 데 사용된다.
10. <img> : 문서에 이미지를 넣는다.
- src 특성은 필수이며, 포함하고자 하는 이미지의 경로를 지정한다.
- alt 특성은 이미지의 텍스트 설명이며 필수는 아니지만, 스크린 리더가 alt 값을 읽어 사용자에게 이미지를 설명하므로, 접근성 차원에서 매우 유용하다. 또한 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 이 속성의 값을 대신 보여준다.
기본적으로 display는 inline이나, 기본 크기는 내장한 이미지의 고유 크기로 정해지므로 마치 inline-block처럼 포인다. border, border-radius, padding, margin, width, height 등의 속성을 이미지에 지정할 수 있다.
11. <span> : 구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다. 스타일을 적용하기 위해서, 또는 lang 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있다. 적절한 의미를 가진 다른 요소가 없을 때에만 사용해야 한다. <span>은 <div>와 매우 유사하지만, <div>는 블록 레벨 요소인 반면 <span>은 인라인 요소이다.
12. <p> : 하나의 문단을 나타낸다. 시각적인 매체에서, 문단은 보통 인접 블록과의 여백과 첫 줄의 들여쓰기로 구분하지만, HTML에서 이미지나 입력 폼 등 서로 관련있는 콘텐츠 어떤것도 될 수 있다.
여분의 공간이 필요하다면 margin등 CSS속성을 통해 적용한다.
p { margin-bottom: 2rem; // 문단 다음 여백을 늘림 }
13. <li> : 목록의 항목을 나타낸다. 반드시 정렬 목록(<ol>), 비정렬 목록(<ul>, 이게 좀 더 많이 쓰이는 것 같음. <menu>도 비정렬 목록) 안에 위치해야 한다. 메뉴와 비정렬 목록에서는 보통 bullet으로 항목을 나타내고, 정렬 목록에서는 숫자나 문자를 사용한 오름차순 카운터로 나타낸다.
14. <ol> : 정렬되지 않은 목록을 나타낸다. 보통 불릿을 표현한다.
15. <style> : 문서나 문서 일부에 대한 스타일 정보를 포함한다. <style>은 문서의 <head> 안에 위치해야 한다. 그러나, 일반적으로 스타일은 외부 스타일 시트에 작성하고, <link> 요소로 연결하는 편이 좋다.
문서가 다수의 <style>과 <link> 요소를 포함하면 서로의 순서대로 DOM에 스타일을 적용한다.
16. <br> : 텍스트 안에 줄바꿈(carriage return)을 생성한다. 주소나 시조 등 줄의 구분이 중요한 내용을 작성할 때 유용하다. 문단 구분을 <br>로 하는 것은 나쁜 사례일 뿐만 아니라 스크린 리더를 사용해 탐색하는 사용자에게도 문제가 된다. 스크린 리더가 요소의 존재는 알려주겠지만, <br>에는 아무런 내용도 없기 때문이다. 따라서 사용자는 내용이 어딨는지 몰라 혼란을 느낄 수 있다.
17. <h1> : <h1>~<h6>는 6단계의 구획 제목을 나타낸다. 구획 단계는 <h1>이 가장 높고 <h6>이 가장 낮다.
18. <h2>
19. <input> : 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다. 사용자 에이전트에 따라서 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재한다. 입력 유형과 특성의 다양한 조합 가능성으로 인해, <input> 요소는 HTML에서 제일 강력하고 복잡한 요소 중 하나이다.
<input>의 동작 방식은 type의 특성에 따라 현격히 달라진다. 특성을 지정하지 않은 경우, 디폴트 값은 text이다.
- placeholder : content to be appear in the form control when the form control is empty
- required : Boolean. A value is required or must be check for the form to be submittable
- name : Name of the input form control. Submitted with the form as part of a name/value pail.
20. <form> : 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타낸다.
- action : 양식 데이터를 처리할 프로그램의 URI.
- method : 양식을 제출할 때 사용할 HTTP 메서드
21. <h3>
22. <nav> : 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타낸다. 자주 쓰이는 예제는 메뉴, 목차, 색인이다.
23. <header> : 소개 및 탐색에 도움을 주는 콘텐츠를 나타낸다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있다.
24. <footer> : 가장 가까운 구획 콘텐츠나 구획 루트의 footer를 나타낸다. footer는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담는다.
25. <iframe> : 중첩 browsing context를 나타내는 요소로, 현재 문서 안에 다른 HTML 페이지를 삽입한다. 삽입된 browsing context는 각자 자신만의 섹션 기록과 문서를 가진다. 다른 browsing context를 포함하고 있는 context는 parent browsing context라고 부른다. Parent를 가지지 않는, 즉 최상위 browsing context는 대개 browse window로서, Window 객체로 나타낸다.
26. <strong> : 중대하거나 긴급한 콘텐츠를 나타낸다. 보통 브라우저는 굵은 글씨로 표시한다.
장식용으로 텍스트를 굵게 표시하려면 CSS font-weight 속성을 사용해야 한다.
27. <button> : 클릭 가능한 버튼을 나타낸다. 버튼은 양식 내부는 물론 간단한 표준 버튼 기능이 필요한 곳이라면 문서 어디에서나 배치할 수 있다. 디폴트 값의 HTML 버튼은 사용자 에이전트의 호스트 플랫폼과 비슷한 디자인을 따라가지만, 외형은 CSS로 변경할 수 있다.
28. <i> : 텍스트에서 어떤 이유로 주위와 구분해야 하는 부분을 나타낸다. 기술 용어, 외국어 구절, 등장인물의 생각 등을 예시로 들 수 있다. 기울임꼴로 표시한다.
www.advancedwebranking.com/html/
The average web page from top twenty Google results
Apparently, an average web page uses twenty-eight different element types: The twenty-eight elements used on most pages, ordered by appearance frequency:
www.advancedwebranking.com
'웹' 카테고리의 다른 글
| [HTML&CSS_003] CSS Selectors (0) | 2020.10.05 |
|---|
