HTML을 정리해서 나열하기 위한 아래와 같이 가장 많이 사용되는 태크를 기준으로 정리하였습니다.
* 정리되어 있는 것을 보기전에 필수적으로 알아야할 태그 몇개만 익숙해지면
나머지는 그때 그때 필요하면 가져다 사용하면 됩니다.
* 모든 것의 기본 *
<html>
<head>
<!-- 타이틀, 자바스크립트, CSS, 메타 문자셋 등 정의 -->
</head>
<body>
<!-- 헤드에 들어가지 않는 거의 대부분의 태그가 사용됨 -->
</body>
</html>
* 자주 사용되는 기본 태크 *
1. <html>
<html> 요소는 브라우저에게 해당 문서가 HTML 문서임을 알려주는 역할을 합니다.
<html lang="ko">
<head>
<title>HTML 문서의 제목입니다.</title>
</head>
<body>
HTML 문서의 콘텐츠(contents) 영역입니다.
</body>
</html>
2. <head>
<head> 태그는 해당 문서에 대한 정보인 메타데이터(metadata)의 집합을 정의할 때 사용합니다.
다음과 같은 요소들은 <head> 요소에 포함되어야 합니다.
- <title>
- <style>
- <base>
- <link>
- <meta>
- <script>
- <noscript>
<head>
<title>HTML 문서의 제목입니다.</title>
</head>
3. <body>
<body> 태그는 해당 HTML 문서의 텍스트, 하이퍼링크, 이미지, 리스트 등과 같은 모든 콘텐츠를 포함하는 영역을 정의할 때 사용합니다.
HTML 문서에는 단 하나의 <body> 요소만이 존재할 수 있습니다.
<body>
HTML 문서의 콘텐츠(contents) 영역입니다.
</body>
4. <title>
<title> 태그는 해당 문서의 제목(title)을 정의할 때 사용합니다.
<title>HTML 문서의 제목입니다.</title>
5. <meta>
<meta> 태그는 해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용합니다.
<meta> 요소는 <base>, <link>, <script>, <style>, <title> 요소와 같은 다른 메타데이터 관련 요소들이 나타낼 수 없는 다양한 종류의 메타데이터를 제공할 때 사용되며, 이렇게 제공된 정보는 브라우저나 검색 엔진, 다른 웹 서비스에서 사용하게 됩니다. 이러한 요소는 언제나 요소 내부에 위치해야 합니다.
<meta name="description" content="HTML meta tag page">
6. <div>
<div> 태그는 HTML 문서에서 특정 영역(division)이나 구획(section)을 정의할 때 사용합니다.
<div><p>div 요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소입니다.</p></div>
<style>
div {
background-color: orange;
font-style: italic;
}
</style>
7. <a>
<a> 태그는 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용합니다.
<a href="http://www.google.com">구글사이트로 이동</a>
8. <script>
<script> 태그는 자바스크립트와 같은 클라이언트 사이드 스크립트(client-side scripts)를 정의할 때 사용합니다.
<script type="application/javascript">
document.getElementById("para").innerHTML = "자바스크립트가 실행되었습니다.!";
</script>
9. <link>
<link> 태그는 해당 문서와 외부 소스(external resource) 사이의 관계를 정의할 때 사용합니다.
<head>
<link rel="stylesheet" type="text/css" href="/examples/media/expand_style.css">
</head>
10. <img>
<img> 태그는 HTML 문서에서 이미지(image)를 정의할 때 사용합니다.
<img> 요소로 정의된 이미지는 HTML 문서에 직접 삽입되는 것이 아니라, HTML 문서에 이미지가 링크되는 형태입니다.
<img src="/examples/images/img_monalisa.png" alt="모나리자">
11. <ul> <ol> <li>
<li> 태그는 HTML 리스트(list)에 포함되는 아이템(item)을 정의할 때 사용합니다.
<li> 요소는 순서가 있는 리스트(ordered list)를 정의하는 <ol> 요소나 순서가 없는 리스트(unordered list)를 정의하는 <ul> 요소, 메뉴 리스트(menu list)를 정의하는 <menu> 요소에서 리스트의 각 아이템을 정의합니다.
<ul>
<li>아메리카노</li>
<li>카페라떼</li>
<li>핫초코</li>
</ul>
<ol>
<li>첫번째이야기</li>
<li>두번째이야기</li>
<li>세번째이야기</li>
</ol>
12. <style>
<style> 태그는 해당 HTML 문서의 스타일 정보를 정의할 때 사용합니다.
<style> 요소는 해당 요소가 포함된 HTML 문서의 콘텐츠에 적용되는 CSS를 명시하고 있으며, HTML 문서는 여러 개의 <style> 요소를 포함할 수 있습니다.
<head>
<style>
body { background-color: lightpink }
h1 { color: red; }
p { text-decoration: underline; }
</style>
</head>
13. <br>
<br> 태그는 텍스트 내의 줄바꿈(line-break)을 정의할 때 사용합니다.
웹 페이지는 HTML 문서입니다 그리고<br>
14. <input>
<input> 태그는 사용자로부터 입력을 받을 수 있는 입력 필드(input filed)를 정의할 때 사용합니다.
이름 : <input type="text" name="name">
15. <form>
<form> 태그는 사용자로부터 입력을 받을 수 있는 HTLM 입력 폼(form)을 정의할 때 사용합니다.
<form action="/sample/action.php">
이름 : <input type="text" name="name"><br>
<input type="submit">
</form>
16. <iframe>
<iframe> 태그는 인라인 프레임(inline frame)을 정의할 때 사용합니다.
인라인 프레임은 현재 HTML 문서에 다른 문서를 포함시킬 때 사용합니다.
<iframe src="http://google.com">
<p>현재 사용 중인 브라우저는 iframe 요소를 지원하지 않습니다!</p>
</iframe>
17. <footer>
<footer> 태그는 문서나 특정 섹션(section)의 푸터(footer)를 정의할 때 사용합니다.
<footer>
<p>Copyright © 2021 techhans. All rights reserved.</p>
<address>Contact webmaster for more information. </address>
</footer>
18. <button>
<button> 태그는 클릭할 수 있는 버튼을 정의할 때 사용합니다.
<button type="button" onclick="alert('Hello World!')">클릭해 보세요!</button>
19. <b>
<b> 태그는 다른 부가적인 목적 없이 단순히 굵게 표현되는 텍스트를 정의할 때 사용합니다.
<b>이 문장은 굵게 표현된 텍스트입니다.</b>
개발자로 시작하면서 알아야할 html 태그(tag)는 이정도면 된다 생각합니다.
추가로 아래의 섹션별로 추가되는 태그(tag)들도 참고해주세요
https://www.advancedwebranking.com/html/
The average web page from top twenty Google results
Apparently, an average web page uses thirty-two different element types: The thirty-two elements used on most pages, ordered by appearance frequency:
www.advancedwebranking.com
(0) Doctype
doctype 은 html 가장 상단에 기술하는 html 타입정보입니다.
그것은 페이지에서 사용하는 html이 어떤 버전임을 표기합니다.
(1) Basic elements and metadata
루트 요소로 알려진 html은 웹 페이지의 내용을 감싸고 있으며 doctype 선언 직후에 찾을 수 있습니다. 메타데이터에는 검색 엔진이나 브라우저가 페이지를 사용하고 렌더링하는 데 도움이 되는 스타일, 스크립트 및 데이터와 같은 페이지에 대한 정보가 포함됩니다.
(3) Content sectioning
콘텐츠 섹션 요소를 사용하면 콘텐츠를 논리적 조각으로 구성할 수 있습니다.
(4) Text content
텍스트 콘텐츠 요소는 본문 내에서 콘텐츠를 구성하는 데 유용하며 해당 콘텐츠의 목적을 식별하는 데 도움이 됩니다.
(5) Inline text semantics
HTML 인라인 텍스트 의미 체계를 사용하여 단어, 줄 또는 임의의 텍스트 조각의 의미, 구조 또는 스타일을 정의합니다.
(6) Image and multimedia
HTML은 이미지, 오디오 및 비디오와 같은 다양한 멀티미디어 리소스를 지원합니다.
(7) Embedded content
일반 멀티미디어 콘텐츠 외에도 HTML에는 상호 작용하기가 항상 쉽지는 않지만 다양한 기타 콘텐츠가 포함될 수 있습니다.
(8) Scripting
동적 콘텐츠와 웹 응용 프로그램을 만들기 위해 HTML은 스크립팅 언어, 특히 JavaScript의 사용을 지원합니다. 특정 요소는 이 기능을 지원합니다.
(9) Demarcating edits
이러한 요소를 사용하면 텍스트의 특정 부분이 변경되었다는 표시를 제공할 수 있습니다.
(10) Table content
여기에 있는 요소는 테이블 형식 데이터를 만들고 처리하는 데 사용됩니다.
(11) Forms
HTML은 사용자가 작성하고 제출할 수 있는 양식(forms)을 만들기 위해 함께 사용할 수 있는 여러 요소를 제공합니다.
(12) Interactive elements
HTML은 대화형 사용자 인터페이스 개체를 만드는 데 도움이 되는 요소 선택을 제공합니다.
(13) Web Components
웹 구성 요소는 기본적으로 일반 HTML인 것처럼 사용자 정의 요소를 만들고 사용할 수 있도록 하는 HTML 관련 기술입니다. 또한 표준 HTML 요소의 사용자 정의 버전도 만들 수 있습니다.
(14) 더 이상 사용되지 않는 요소
'테크노트 > html' 카테고리의 다른 글
| 웹(Web)의 역사 (0) | 2022.01.05 |
|---|---|
| input 입력 태그를 readonly 로 막는 경우 (0) | 2021.12.03 |
| 2020년 반응형 웹페이지 Framework Top 10 (0) | 2021.11.14 |
| HTML5에 추가된 새로운 태그 (0) | 2021.11.02 |
| FE개발자를 위한 HTML에디터 추천 (0) | 2021.11.01 |
댓글