[HTML] HTML Tags 한 번에 정리하기

studying  · 12 mins read

html tag 한 번에 정리하기 By Category

Basic

  • !DOCTYPE
    document type을 결정한다. 모든 HTML 파일은 <!DOCTYPE> declaration과 함께 시작해야 한다.
    예시)
    <!DOCTYPE html>
<!-- in HTML 5(simple declaration) -->

  • html
    HTML document의 root를 나타낸다. <!DOCTYPE> tag를 제외한 모든 다른 HTML elements들의 container lang attribute를 포함시켜야 웹 페이지의 언어를 선언할 수 있게 되어 search engines와 browsers를 assist!
    예시)

    <html lang="en"></html>

  • head
    Document에 대한 metadata와 information을 포함시킨다.
    html tag와 body tag 사이에 위치
    다음 tag들이 head tag element 안에 위치할 수 있다.
    • title (모든 HTML document에서 필수적인 tag)
    • style
    • base
    • link
    • meta
    • script
    • noscript

  • title
    Document의 title을 정의
  • body
    Document의 body를 정의한다. HTML document의 모든 contents를 포함시킨다.
  • h1 to h6
    HTML headings를 정의, h1 tag는 가장 중요한 heading을 정의하고 h6은 제일 중요하지 않은 tag를 정의
    Page당 오직 1개의 h1 tag만들 사용하고 이 tag는 전체 페이지의main heading or subject를 나타내야 한다.
    h1 tag를 heading을 정의할 때 시작으로 h1 tag를 사용, 다음 heading을 사용할 경우 Heading level을 스킵하지 않고 h2 -> h3 -> … 사용할 것을 권장(구조화된 문서 작성을 위해)
  • p
    문단을 정의, browsers는 각각의 p tag 이후에 blank line 하나를 더해줌
  • br
    텍스트 안에서 줄바꿈을 해준다. 주소나 시를 작성할 때처럼 줄의 구분이 중요한 내용을 작성할 때 사용된다.
    end tag가 없다.
  • 주석 처리 tag
<!--...-->

Formatting

  • abbr
  • 축약 text를 정의한다.
    예시)
    <abbr title="World Health Organization">WHO</abbr>
  • b
    bold text를 정의한다.
  • strong
    중요한 text를 정의한다.
  • bold
    text로 보여진다.

big, center, font tags는 HTML5에서 지원하지 않고 CSS를 사용한다.
(각각 big text/centered text/text의 font, color, size를 정의)

Forms and Input

  • form
    user input에 대한 HTML from을 만들기 위해 사용된다.
    아래 나열된 tag element들을 포함시킬 수 있다. • input
    • textarea
    • button
    • select
    • option
    • optgroup
    • fieldset
    • label
    • output

  • input
    User가 데이터를 입력할 수 있는 input field를 명시한다.
    아주 중요한 form element이다!
    다음 아래와 같이 input tag에는 여러 type들이 존재한다.
    <input type="text" />
<!--(default value)-->
<input type="button" />
<input type="”radio”" />
<!--체크박스와 비슷하나 속한 그룹 내에서 하나만 선택 가능-->
<input type="checkbox">
<input type="color">
<input type="date">
<input type="email">
<input type="file">
<input type="password">
<input type="search">
<input type="submit">
<input type="time">
<input type="url">
<input type="week">
  • textarea
    여러 줄의 text input을 control할 수 있다.
    예시)
<textarea rows="2" cols="10">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</textarea>

1번

  • button
    클릭 가능한 버튼
  • select
    drop-down list를 만들기 위해서 사용되는 태그이다.
    대부분 form tag 안에서 사용된다.
    select element 내부에서 option tag를 사용하여 drop-down list의 option들을 정의한다.
    drop-down list로의 접근성을 높여주는 label tag를 사용하는 습관을 들이자!
    name attribute: form이 submit된 후에 form data를 reference하기 위해 필요.
    id attribute: drop-down list를 label과 연결하기 위해 필요.

예시1)
option 선택할 때마다 option tag의 text 출력하기

<!DOCTYPE html>
<html>
  <head>
  </head>

  <body>
    <h1>The select element</h1>

    <p>The select element is used to create a drop-down list.</p>

      <label for=”options”>select one:</label>
      <select name=”options” id=”options” onchange="console.log(this.options[this.selectedIndex].text);">
        <option value="option111">option1</option>
        <option value="option222">option2</option>
        <option value="option333">option3</option>
        <option value="option444">option4</option>
      </select>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

사진4

option을 선택할 때마다 console에 해당 option의 text가 출력된다.
ex) option4 선택 시 console에 “option4”가 출력됨.

this.selectedIndex: 선택된 option의 index 값을 의미(위의 경우 각 option들은 0,1,2,3 index 값을 가짐)
this.options: 해당 select tag의 option element들을 담고 있는 HTMOptionsCollection을 가져옴

사진 5

this.options[this.selectedIndex].text: 선택된 option element의 text를 가져옴

예시 2)
option 선택할 때마다 option tag의 value attribute 값 출력하기

<label>select one:</label>
<select onchange="console.log(this.value);">
  <option value="value1">option1</option>
  <option value=" value2">option2</option>
  <option value=" value3">option3</option>
  <option value=" value4">option4</option>
</select>

option을 선택할 때마다 console에 해당 option tag의 value 값이 출력된다.
ex) option4 선택 시 console에 “value4”가 출력됨.

예시 3)
submit event 발생 시 event handler에서 선택된 option text 출력하기

<!DOCTYPE html>
<html>
  <head>
    <script>
      const onSubmit = () => {
        const selectElement = event.target.querySelector(".First_Select");
        console.log(selectElement.options[selectElement.selectedIndex].text);
      };
    </script>
  </head>

  <body>
    <h1>The select element</h1>

    <p>The select element is used to create a drop-down list.</p>

    <form onsubmit="onSubmit();return false;">
      <label>select one:</label>
      <select class="First_Select">
        <option value="option111">option1</option>
        <option value="option222">option2</option>
        <option value="option333">option3</option>
        <option value="option444">option4</option>
      </select>
      <input type="submit" value="Submit" />
    </form>

    <p class="output"></p>
  </body>
</html>

  • optgroup
    하나의 drop-donw list에서 관련된 option들 끼리 grouping하는 데에 사용된다.

    예시)

<!DOCTYPE html>
<html>
  <body>
    <label for="numbers">Choose one number</label>
    <select name="numbers" id="numbers">
      <optgroup label="one digit">
        <option value="일">1</option>
        <option value="이">2</option>
      </optgroup>
      <optgroup label="two digits">
        <option value="십일">11</option>
        <option value="이십이">22</option>
      </optgroup>
    </select>
  </body>
</html>

사진2

  • label
    input element에 대한 label을 정의한다.
  • fieldset
    form tag 내에서 관련된 element들끼리 grouping하기 위해서 사용된다(box가 그려짐).
    예시)
<!DOCTYPE html>
<html>
  <body>
    <h1>&lt;fieldset&gt; tag</h1>

    <form onsubmit="return false;">
      <fieldset>
        <legend>fruits:</legend>
        <label for="first">First fruit:</label>
        <input type="text" id="first" name="first" /><br /><br />
        <label for="second">Second fruit:</label>
        <input type="text" id="second" name="second" /><br /><br />
        <label for="third">Third fruit:</label>
        <input type="text" id="third" name="third" /><br /><br />
        <input type="submit" value="Submit" />
      </fieldset>
    </form>
  </body>
</html>

사진3

  • legend

Frames

  • iframe
    inline frame을 명시한다. inline frame은 현재 HTML document에서 다른 document를 포함하는 데 사용된다.

Images

  • img
    image 포함시키기 위해 사용되는 tag
    arributes: src, alt, width, height, usemap, etc.

  • map
    image map(클릭 가능한 영역이 있는 이미지)을 정의하는 데 사용된다.
    예시)
    https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap

  • area
    Image map 안에서의 영역을 정의하는 데 사용된다.

Audio/Video

  • audio
    sound content를 포함하기 위해 사용된다.
    audio element 내부에 여러 source tag를 포함한다(브라우저가 supporting가능한 첫 번째 source를 선택).
  • source
    audio, video, picture의 미디어 요소에 대한 여러 resource를 정의한다.
  • track
    audio나 video element가 재생될 때 표시되어야 하는 자막 파일이나 text가 포함된 파일을 지정하는 데 사용된다.
  • video
    video나 movie를 포함시키기 위해서 사용된다.
  • a
    hyperlink
    예시)
<a href="https://www.naver.com">네이버 바로가기</a>
  • link
    현재 document와 외부 resource간의 관계를 정의한다.
    외부 style sheet에 연결하거나 사이트 아이콘을 연결하는 데 자주 사용된다.
    (empty element)

예시)

<link rel="stylesheet" href="/style/style.css" />

rel: required attribute이다. 현재 document와 연결된 document 사이의 관계를 명시해준다(“stylesheet”, ”icon”, ”author”, etc.).

  • nav
    여러 navigation link의 set을 정의한다.
    ex)
<nav>
  <a href="https://www.naver.com">NAVER</a>
  <a href="https://www.daum.net">DAUM</a>
</nav>

Lists

  • ul, ol, li
    unordered list, ordered list, list item
    예시)
<!DOCTYPE html>
<html>
  <body>
    <h1>The ul element</h1>

    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>

    <ol>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ol>
  </body>
</html>

사진 리스트

  • dl, dt, dd
    dl: description list을 정의
    dt: description list에서의 term/name을 정의
    dd elememet에 대한 description을 정의
    Description list를 만들기 위해서 3개의 element(tag)가 사용된다.
    예시)
<!DOCTYPE html>
<html>
  <body>
    <h1>The dl, dd, and dt elements</h1>

    <p>These three elements are used to create a description list:</p>

    <dl>
      <dt>할머니</dt>
      <dd>부모의 어머니</dd>
      <dt>할아버지</dt>
      <dd>부모의 아버지</dd>
    </dl>
  </body>
</html>

사진 DTDLDD

Tables

  • table
    table을 정의
  • caption
    table caption을 정의
  • th
    table의 header cell을 정의
  • tr
    table의 row를 정의
  • td
    table의 cell을 정의
    colspan attribute: cell이 확장되어야 하는 column 수를 지정
    rowspan attribute: cell이 확장되어야 하는 row 수를 지정
  • thead
    table의 header content(cell)들을 grouping
  • tbody
    table의 body content(cell)들을 grouping
  • tfoot
    table의 footer content(cell)들을 grouping
  • col
    colgroup element 내의 각 column group에 대한 column 속성을 명시한다.
    span attribute: col element가 걸쳐야 하는 column 수를 지정한다.
  • colgroup
    Table의 column을 grouping하는 데 사용된다.

테이블 예시1)

<table>
  <caption>
    Languages
  </caption>
  <colgroup>
    <col span="2" style="background-color:red" />
    <col style="background-color:blue" />
  </colgroup>
  <tr>
    <th>Korean</th>
    <th>English</th>
    <th>German</th>
  </tr>
  <tr>
    <td>사과</td>
    <td>Apple</td>
    <td>Apfel</td>
  </tr>
  <tr>
    <td>감자</td>
    <td>Potato</td>
    <td>Kartoffel</td>
  </tr>
</table>

사진 테이블1

테이블 예시2)

<table>
  <colgroup>
    <col style="background-color:yellow" />
    <col style="background-color:pink" />
    <col style="background-color:blue" />
  </colgroup>
  <tr>
    <th>rowspan</th>
    <th>colspan</th>
    <th>test</th>
  </tr>
  <tr>
    <td rowspan="2">row 2칸 차지</td>
    <td colspan="2">column 2칸 차지</td>
  </tr>
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
  </tr>
</table>

사진 테이블2

Styles and Semantics

  • style
    style 정보 정의(CSS)
  • div
    HTML document에서 division or section을 나타낸다.
    HTML element들의 container로 사용되고, class나 id attribute를 사용하여 CSS로 스타일이 지정되거나 JS로 조작된다.
  • span
    text나 document의 일부를 표시하는 데 사용되는 inline container이다.
    class나 id attribute를 사용하여 CSS로 스타일이 지정되거나 JS로 조작된다. div element와 매우 유사하지만 div는 block-level element, span은 inline element이다.
  • header
    Document나 section에 대한 header를 정의한다.
  • footer
    Document나 section에 대한 footer를 정의한다.
  • main
    document의 main content를 정의한다.
  • section
    document의 한 section을 정의한다.
  • article
    article 정의
  • aside
    page 내용 밖의 content를 정의
  • details
    user가 요청 시에 열고 닫을 수 있는 detail한 정보를 정의한다.
    user가 열고 닫을 수 있는 반응형 위젯을 만드는 데 자주 사용된다.
    summary tag와 함께 사용된다.
  • summary
    details element에 대해 표시되는 제목을 정의한다. 이 제목을 클릭하여 detail한 정보를 보거나 숨길 수 있다.

Meta Info

  • head
    document에 대한 정보를 정의한다.
  • meta
    HTML document에 대한 metadata를 정의한다.
    charset attribute: HTML document의 character encoding을 명시.
    ex)
<head>
  <meta charset="UTF-8" />
</head>
  • base

document 안의 모든 relative URL이 사용할 기준 URL을 지정한다.
ex)

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

<body>
  <a href="tags/default.asp">HTML Tags by Alphabet</a>
  <a href="tags/ref_byfunc.asp">HTML Tags by Category</a>
</body>

Programming

  • script
    client-side script를 정의할 때 사용한다. 보통 JS 코드와 함께 쓰지만 GLSL이나 JSON 등의 다른 언어와도 사용할 수 있다.
    주로 body element의 맨 밑에 위치한다(js가 아직 생성되지 않은 DOM에 접근하려는 것을 막기 위해서).
  • embed
    웹 페이지, picture, media player, plug-in application등의 외부 resource에 대한 container를 정의한다.
  • object
    외부 resource에 대한 container를 정의
    (이미지, nested browsing context 등의 외부 resource)
  • param
    object element에 대한 여러 parameter를 정의하는 데 사용된다.
    (empty element)

ex)

<object data="horse.wav">
  <param name="autoplay" value="true" />
</object>

references

  1. https://www.w3schools.com/tags/ref_byfunc.asp
  2. https://developer.mozilla.org/ko/docs/Web/HTML/Element#%ED%91%9C_%EC%BD%98%ED%85%90%EC%B8%A0
  3. https://javascript.info/forms-submit#event-submit