[JAVASCRIPT] html elements

자바스크립트에서 html 요소를 가져와 사용하는 경우가 있는데 html 요소를 정리해보려고 한다.

1.  tag

소스 코드에 주석을 삽입하는데 사용하며 주석은 표시되지 않는다.

<!--
<p> 주석처리 </p>
-->

2. <!DOCTYPE>

모든 html 파일은 <!DOCTYPE> 선언으로 시작해야하며 문서 유형에 대한 브라우저의 정보를 나타낸다.

<!DOCTYPE html>

3. <a> tag

a 태그는 한페이지에서 다른 페이지로 연결하는데 사용되는 하이퍼링크를 정의하며 주요 속성으로 href 속성이 있다.

<a href="https://www.w3schools.com"></a>

<a href="javascript:alert("hello");"></a>

4. <abbr> tag

약어를 정의할 때 사용하며 요소 위에 마우스를 가져갈때 약어의 대한 설명을 title 속성으로 표현한다.

<p><dfn><abbr title="Cascading Style Sheets">CSS</abbr>
</dfn> is a language that describes the style of an HTML document.</p>

5. <area> tag

이미지 맵 내부의 area 영역을 정의하고 area 요소는 항상 map 태그안에 중첩되서 사용한다.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

6. <article> tag

article 태그는 독립적인 컨텐츠를 지정하고 그 자체로 의미가 있어야 하며 독립적으로 배포할 수 있도록 한다.

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>

7. <audio> tag

음악을 문서에 삽입하는데 사용되고 audio 태그는 하나이상의 source 태그를 포함하고 있어야 한다.

<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
</audio>

8. <b> tag

일부 텍스트를 bold로 지정한다.

<p> basic <b>bold</b> </p>

9. <base> tag

모든 상대주소에 대해 기본 URL을 제공하며 <head> 요소안에 포함되어야 한다.

href = "http://www.w3schools.com/tags/tag_base.asp"

<head>
  <base href="https://www.w3schools.com/" target="_blank">
</head>

<body>
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>

10. <bdo> tag

BDO 는 Bi-Directional Override의 약자로 dir 속성으로 텍스트의 방향을 설정할 수 있다.

<!DOCTYPE html>
<html>
<body>

<h1>The bdo element</h1>

<p><bdo dir="ltr">This paragraph will go right-to-left.</bdo></p> 
<!-- This paragraph will go right-to-left. -->

<p><bdo dir="rtl">This paragraph will go right-to-left.</bdo></p>  
<!-- .tfel-ot-thgir og lliw hpargarap sihT -->

</body>
</html>

11. <blockquote> tag

인용된 섹션을 지정하고 cite 속성을 가질 수 있으며 브라우저는 blockquote 요소를 들여쓴다.

<blockquote>
들여쓰기
</blcokquote>

12. <body> tag

body 태그는 문서의 본문을 정의하고 html문서에서 하나의 요소만 가질 수 있다.

<body>
<p> this is body </p>
</body>

13. <br> tag

br태그는 줄바꿈을 할 때 사용하며 종료태그가 없다.

<p> hello <br/> hi </p>

14. <button> tag

클릭 가능한 버튼을 정의하고 type 속성을 통하며 버튼 유형을 알려준다.

<button type="button">Button</button>

15. <canvas> tag

일반적으로 javascript를 통해 그래픽을 그리는데 사용된다.

<body>

<h1>The canvas element</h1>

<canvas id="myCanvas">Your browser does not support the canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 100, 100);
</script>

</body>

16. <caption> tag

테이블 캡션을 정의하는데 사용되며 table 태그 바로 뒤에 삽입하여 사용해야 한다.

<table>
  <caption>학점</caption>
  <tr>
    <th>1학기</th>
    <th>20학점</th>
  </tr>
</table>

17. <datalist> tag

input 태그에 미리 정의된 옵션 목록을 지정하고 input 태그에 대해 자동완성 기능을 제공한다.

datalist 태그의 id는 input 태그의 list 속성과 같아야 한다.

<input list="browsers" name="browser" id="browser">

<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

18. <del> tag

삭제된 텍스트를 정의하며 브라우저에서는 텍스트에 줄을 긋는다.

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

ins 태그를 통해 삽입된 텍스트를 정의하며 브라우저에서는 텍스트 밑줄을 긋는다.

19. <details> tag

details 태그를 통해 사용자가 요청시 열고 닫을 수 있는 위젯을 만들고 모든 컨텐츠를 담을 수 있다.

details 태그 안에 summary 태그를 통해 위젯의 이름을 제목을 지정해줄 수 있다.

<details>
  <summary>My Info</summary>
  <p>study javascript</p>
</details>

20. <div> tag

html 문서에서 섹션을 정의하여 html 요소들의 컨테이너로 사용되며 class, id 속성을 통해 스타일을 지정할 수 있다.

<body>

<div class="myDiv">
  <h2>This is a heading in a div element</h2>
  <p>This is some text in a div element.</p>
</div>

</body>

21. <em> tag

텍스트를 강조하는데 사용되며 기울임꼴로 표시한다.

<p>You <em>have</em> to hurry up!</p>

22. <fieldset> tag

관련 요소를 그룹화하는데 사용하며 legend 태그를 통해 캡션을 정의할 수 있다.

<fieldset>
    <legend>Personalia:</legend>
    <label for="name">name:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <input type="submit" value="Submit">
 </fieldset>

23. <footer> tag

footer 태그는 섹션의 바닥글을 정의하며 저자, 저작권 정보등을 포함한다.

<footer>
  <p>Name: hoyoung</p>
  <p><a href="mailto:hoyoung.wjd@gmail.com">hoyoung.wjd@gmail.com</a></p>
</footer>

24. <form> tag

사용자의 입력을 위한 양식을 만드는데 사용되며 입력, 텍스트, 버튼, 선택, 옵션, 필드셋 등을 포함할 수 있다.

<form action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

25. <h1> ~ <h6> tag

제목을 정의하는데 사용하며 숫자가 낮을수록 중요도는 크다.

<h1>head 1</h1>
<h2>head 2</h2>
<h3>head 3</h3>
<h4>head 4</h4>
<h5>head 5</h5>
<h6>head 6</h6>

26. <head> tag

메타 데이터(제목, 스타일, 메타, 스크립트 등)들의 컨테이너이며 html 태그와 body 태그 사이에 위치하며 브라우저에는 표시되지 않는다.

<head>
  <title>Title of the document</title>
</head>

27. <hr> tag

구분선을 추가하는 태그이며 종료태그가 없다.

<p> chapter1 </p>
<hr>
<p> chapter2 </p>

28. <html> tag

HTML 문서의 루트를 나타내며 Doctype 태그를 제외한 모든 태그의 컨테이너이다.

<html lang="en">

29. <iframe> tag

인라인 프레임을 지정하여 HTML 문서에 다른 문서를 삽입하는데 사용되며 title 속성을 통해 설명을 추가하면 좋다.

<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"></iframe>

30. <img> tag

HTML에 이미지를 삽입하는데 사용되며 src 이미지 경로, alt 에러시 대체 텍스트 필수 속성이 있다.

<img src="./image.png" alt="my image" width="500" height="600">

31. <input> tag

사용자가 데이터를 입력할 수 있는 필드를 지정한다.

입력유형: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, submit, text, url 등

32. <label> tag

요소에 대한 레이블을 정의하여 관련 요소와 함께 묶기 위해 label 태그의 for 속성과 관련요소의 id 속성과 같아야 한다.

<form action="/action_page.php">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="submit" value="Submit">
</form>

33. <li> tag

목록 항목을 정의한다. (글머리 기호)

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

34. <link> tag

현재 문서와 외부 자원과의 관계를 정의하며 head 태그 안에 정의한다.

<head>
  <link rel="stylesheet" href="styles.css">
</head>

35. <map> tag

map 태그를 통해 이미지의 맵을 정의하고 클릭 가능한 영역의 이미지를 말한다.

map의 name 속성은 해당 img의 usemap 속성과 연결되어 관계를 만든다.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

36. <mark> tag

강조표시해야하는 텍스트를 정의하며 브라우저에서는 형광펜으로 표시한다.

<p>Do not forget to buy <mark>milk</mark> today.</p>

37. <meter> tag

범위 내에서 게이지를 측정하며 진행률을 나타내는데 유용하다.

<label for="gauge">Gauge</label>
<meter id="gauge" value="2" min="0" max="10">2 out of 10</meter><br>

38. <nav> tag

nav 태그를 통해 링크 집합을 정의한다.

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> 
</nav>

39. <optgroup> tag

드롭다운 목록에서 관련 목록을 그룹화 하는데 사용한다.

<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

40. <p> tag

p 태그를 통해 단락을 정의한다.

<p>This is some text in a paragraph.</p>

41. <q> tag

짧은 인용문을 정의하며 브라우저는 "을 앞뒤로 삽입하여 표시한다.

<p> 내 목표는 <q> 이거 </q> 입니다.</p>

42. <script> tag

스크립트를 삽입하는데 사용하며 src 속성을 통해 외부 스크립트 파일을 가리킨다.

<script src="test.js" type="text/javascript"></script>

43. <select> tag

드롭다운 목록을 만드는데 사용한다. 사용자의 입력을 수집하는 양식으로 자주 사용된다. name 속성을 생략하면 데이터가 제출되지 않기에 필요하고 label 과 연결하기 위해 id 속성이 필요하다.

<label for="cars">Choose a car:</label>

<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

44. <span> tag

텍스트의 일부를 표시하는데 사용되는 컨테이너이다.

div 태그와 비슷하지만 div는 블록 수준이며 span 태그는 인라인 요소이다.

<p>My mother has <span style="color:blue">blue</span> eyes.</p>

45. <style> tag

스타일 정보를 정의하는데 사용하며 외부 스타일 시트를 연결하는것으로는 link 태그를 사용한다.

<style>
  h1 {color:red;}
  p {color:blue;}
</style>

46. <table> tag

HTML에 테이블을 정의하며 하나 이상의 <tr>, <td>, <th> 요소로 구성된다.

<th>: 테이블의 헤더를 정의한다.

<tr>: 테이블의 행을 정의한다.

<td>: 테이블의 셀을 정의한다.

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

47. <title> tag

문서의 제목을 정의하며 HTML 문서의 필수 요소이다.

<head>
  <title>HTML Elements Reference</title>
</head>

참고자료

https://www.w3schools.com/tags/

HTML Reference

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

'📦 개발 > JavaScript' 카테고리의 다른 글

[JAVASCRIPT] express mysql 연동 (0)	2023.02.13
[JAVASCRIPT] express routing (0)	2023.02.11
[JAVASCRIPT] var, let, const 비교 (0)	2023.02.02
[JAVASCRIPT] addEventListener() (0)	2023.01.14
[JAVASCRIPT] onload() (0)	2023.01.11