studyLog

HTML 태그 용어 / 요소 안내 - HTML 개요 CAD101-5

devlunch4 2024. 5. 28. 01:33
반응형

Module 2 - HTML Overview / Cheatsheet - HTML Overview

​

안녕하세요 데브런치입니다.

​

이번 포스팅에서는 HTML에서 사용하는 태그, 요소별 용어의 종류와 정의 예시를 기록으로 남겨봅니다.

웹 개발시 기본적인 컴퓨터 언어, 웹 언어로 HTML가 많이 사용되는데요.

잘 숙지하여 웹개발, 웹페이지 작성시 도움이 되었으면 합니다.

​

그럼 표로 작성 된 내용을 확인해주세요.

표 내용으로는 태그 요소, 설명, 예시 순서로 작성되어 있습니다.

 

표 내용으로는 태그 요소, 설명, 예시 순서로 작성되어 있습니다.

HTML5 태그 요소별 용어 및 설명

*국문

​

*HTML5 요소별 용어 및 설명

요소
설명
예시
<!-- -->
이 태그는 브라우저에 표시되지 않지만 코드를 숨기고 문서화하는 데 유용할 수 있는 HTML의 주석을 나타냅니다.
  1. <!-- This is a comment -->
<!DOCTYPE html>
모든 HTML 문서는 이 선언으로 시작해야 합니다. 브라우저에 예상되는 문서 유형을 알려줍니다. 이 요소에는 종료 태그가 없습니다.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!-- Metadata Here -->
  5. </head>
  6. <body>
  7. <!-- Document Body Here -->
  8. </body>
  9. </html>
<a href= “path”>link name</a>
"앵커 태그"라고 불리는 이 태그는 href 속성을 사용하여 하이퍼링크를 생성합니다. 경로 대신 링크하려는 페이지의 URL이나 경로 이름을 입력하세요.
  1. <a href="https://www.ibm.com">IBM</a>
<body>
HTML 문서의 내용을 포함합니다. 문서 본문을 표시하려면 <head> 요소 외에 다른 모든 태그를 포함해야 합니다.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!-- Metadata Here -->
  5. </head>
  6. <body>
  7. <!-- Document Body Here -->
  8. </body>
  9. </html>
<div>
CSS로 해당 콘텐츠의 스타일을 지정하기 위해 문서 본문의 섹션을 구분하는 데 자주 사용됩니다.
  1. <div>
  2. This element has no particular semantic meaning but is often used in conjunction with CSS for styling purposes.
  3. </div>
<h1>
HTML 문서에 수준 1 제목을 추가합니다.
  1. <h1>Thomas J. Watson</h1>
<head>
메타데이터를 포함하며 <html> 태그 뒤, <body> 태그 앞에 배치되어야 합니다.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!-- Metadata Here -->
  5. </head>
  6. <body>
  7. <!-- Document Body Here -->
  8. </body>
  9. </html>
<html>
HTML 문서의 루트 요소입니다. 문서의 다른 모든 태그는 이 태그에 포함되어야 합니다.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!-- Metadata Here -->
  5. </head>
  6. <body>
  7. <!-- Document Body Here -->
  8. </body>
  9. </html>
<img src=“path” width=“dim1” height=“dim2”>
이 태그는 img를 배치하는 데 사용됩니다. 경로 대신 이미지 위치에 대한 URL 또는 상대 파일 경로를 삽입하십시오. 기타 선택적 속성에는 이미지의 너비와 높이(픽셀)가 포함됩니다.
  1. <img src=“https://upload.wikimedia.org/wikipedia/commons/7/7e/Thomas_J_Watson_Sr.jpg” width=“300” height=“300”/>
<li>
정렬된 목록이나 정렬되지 않은 목록에 글머리 기호 항목을 생성하는 요소입니다. <ul> 또는 <ol> 태그와 함께 사용해야 합니다.
  1. <ul>
  2. <l1>Bullet point 1<l1>
  3. <l1>Bullet point 2<l1>
  4. </ul>
<link>
CSS 파일과 같은 외부 문서를 HTML 문서에 연결하는 데 사용됩니다.
  1. <head>
  2. <link rel=“stylesheet” href=“styles.css”>
  3. </head>
<meta>
HTML 문서에 대한 메타데이터를 제공하는 데 사용됩니다.
  1. <head>
  2. <meta name=“author” content=“Christopher Moore”>
  3. </head>
<ol>
숫자를 사용하여 순서화된 목록을 생성하는 요소입니다. <li> 태그와 함께 사용해야 합니다.
  1. <ol>
  2. <li>Numbered bullet point 1<li>
  3. <li>Numbered bullet point 2<li>
  4. </ol>
<p>
이 태그는 단락을 식별하는 데 사용됩니다. 포함된 텍스트 뒤에 줄 바꿈을 배치합니다.
  1. <p>This is a paragraph of text. It can be as short or as long as needed.</p>
<script>
HTML 문서에 JavaScript를 포함하는 데 사용됩니다.
  1. <script>
  2. alert(“Hello World”);
  3. </script>
<table>
이 태그는 테이블을 나타내는 데 사용됩니다. <tr>(테이블 행 정의) 및 <td>(행 내의 테이블 셀 정의) 태그와 함께 사용해야 합니다. <th> 태그는 테이블 헤더 행을 정의하는 데에도 사용할 수 있습니다.
  1. <table>
  2. <tr>
  3. <th>Header cell 1</th>
  4. <th>Header cell 2</th>
  5. </tr>
  6. <tr>
  7. <td>First row first cell</td>
  8. <td>First row second cell</td>
  9. </tr>
  10. <tr>
  11. <td>Second row first cell</td>
  12. <td>Second row second cell</td>
  13. </tr>
  14. </table>
  15. </td>
<td>
테이블 내의 행 내의 셀을 나타냅니다.
  1. <td>Cell Content</td>
<th>
테이블 내 행 내의 머리글 셀을 나타냅니다.
  1. <table>
  2. <tr>
  3. <th>Header cell 1</th>
  4. <th>Header cell 2</th>
  5. </tr>
  6. <tr>
  7. <td>First row first cell</td>
  8. <td>First row second cell</td>
  9. </tr>
  10. <tr>
  11. <td>Second row first cell</td>
  12. <td>Second row second cell</td>
  13. </tr>
  14. </table>
<title>
브라우저의 제목 표시줄과 탭에 표시되는 HTML 문서의 제목을 정의합니다. 모든 HTML 문서에 필요합니다. <head> 태그에 포함되어야 합니다.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Document Title</title>
  5. </head>
  6. <body>
  7. <!-- Document Body Here -->
  8. </body>
  9. </html>
<tr>
테이블 내의 행을 나타냅니다.
  1. <table>
  2. <tr>
  3. <th>Header cell 1</th>
  4. <th>Header cell 2</th>
  5. </tr>
  6. <tr>
  7. <td>First row first cell</td>
  8. <td>First row second cell</td>
  9. </tr>
  10. <tr>
  11. <td>Second row first cell</td>
  12. <td>Second row second cell</td>
  13. </tr>
  14. </table>
<ul>
글머리 기호를 사용하여 순서가 지정되지 않은 목록을 생성하는 요소입니다. 와 함께 사용해야합니다.
  • 꼬리표.
  1. <ul>
  2. <li>Bullet point 1<li>
  3. <li>Bullet point 2<li>
  4. </ul>
 

*영문

Module 2 Cheatsheet: HTML5 Overview

Element
Description
Example
<!-- -->
This tag denotes a comment in HTML, which is not displayed by a browser but can be useful to hide and document code.
  1. <!-- This is a comment -->
<!DOCTYPE html>
All HTML documents must start with this declaration. It tells the browser what document type to expect. Note that this element has no ending tag.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!-- Metadata Here -->
  5. </head>
  6. <body>
  7. <!-- Document Body Here -->
  8. </body>
  9. </html>
<a href= “path”>link name</a>
This tag, called an “anchor tag” creates hyperlinks using the href attribute. In place of path enter the URL or path name to the page you want to link to.
  1. <a href="https://www.ibm.com">IBM</a>
<body>
Contains the contents of the HTML document. It should contain all other tags besides the <head> element to display the body of the document.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!-- Metadata Here -->
  5. </head>
  6. <body>
  7. <!-- Document Body Here -->
  8. </body>
  9. </html>
<div>
Often used to separate sections in the body of a document in order to style that content with CSS.
  1. <div>
  2. This element has no particular semantic meaning but is often used in conjunction with CSS for styling purposes.
  3. </div>
<h1>
Adds a level 1 heading to the HTML document.
  1. <h1>Thomas J. Watson</h1>
<head>
Contains metadata and should be placed after the <html> tag and before the <body> tag.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!-- Metadata Here -->
  5. </head>
  6. <body>
  7. <!-- Document Body Here -->
  8. </body>
  9. </html>
<html>
The root element of an HTML document. All other tags in the document should be contained in this tag.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!-- Metadata Here -->
  5. </head>
  6. <body>
  7. <!-- Document Body Here -->
  8. </body>
  9. </html>
<img src=“path” width=“dim1” height=“dim2”>
This tag is used to place an img. In place of path insert a URL or a relative file path to the image location. Other optional attributes include width and height of the image in pixels.
  1. <img src=“https://upload.wikimedia.org/wikipedia/commons/7/7e/Thomas_J_Watson_Sr.jpg” width=“300” height=“300”/>
<li>
Element that creates bulleted line items in an ordered or unordered list. Should be used in conjunction with the <ul> or <ol> tags.
  1. <ul>
  2. <l1>Bullet point 1<l1>
  3. <l1>Bullet point 2<l1>
  4. </ul>
<link>
Used to link an external document, such as a CSS file, to an HTML document.
  1. <head>
  2. <link rel=“stylesheet” href=“styles.css”>
  3. </head>
<meta>
Used to provide metadata about the HTML document.
  1. <head>
  2. <meta name=“author” content=“Christopher Moore”>
  3. </head>
<ol>
Element that creates an ordered list using numbers. Should be used in conjunction with the <li> tag.
  1. <ol>
  2. <li>Numbered bullet point 1<li>
  3. <li>Numbered bullet point 2<li>
  4. </ol>
<p>
This tag is used to identify a paragraph. It places a line break after the text it is enclosed in.
  1. <p>This is a paragraph of text. It can be as short or as long as needed.</p>
<script>
Used to embed JavaScript in an HTML document.
  1. <script>
  2. alert(“Hello World”);
  3. </script>
<table>
This tag is used to denote a table. Should be used with <tr> (defines a table row) and <td> (defines a table cell within a row) tags. The <th> tag can also be used to define the table header row.
  1. <table>
  2. <tr>
  3. <th>Header cell 1</th>
  4. <th>Header cell 2</th>
  5. </tr>
  6. <tr>
  7. <td>First row first cell</td>
  8. <td>First row second cell</td>
  9. </tr>
  10. <tr>
  11. <td>Second row first cell</td>
  12. <td>Second row second cell</td>
  13. </tr>
  14. </table>
  15. </td>
<td>
Denotes a cell within a row, within a table.
  1. <td>Cell Content</td>
<th>
Denotes the header cells within a row within a table.
  1. <table>
  2. <tr>
  3. <th>Header cell 1</th>
  4. <th>Header cell 2</th>
  5. </tr>
  6. <tr>
  7. <td>First row first cell</td>
  8. <td>First row second cell</td>
  9. </tr>
  10. <tr>
  11. <td>Second row first cell</td>
  12. <td>Second row second cell</td>
  13. </tr>
  14. </table>
<title>
Defines the title of the HTML document displayed in the browser’s title bar and tabs. It is required in all HTML documents. It should be contained in the <head> tag.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Document Title</title>
  5. </head>
  6. <body>
  7. <!-- Document Body Here -->
  8. </body>
  9. </html>
<tr>
Denotes a row within a table.
  1. <table>
  2. <tr>
  3. <th>Header cell 1</th>
  4. <th>Header cell 2</th>
  5. </tr>
  6. <tr>
  7. <td>First row first cell</td>
  8. <td>First row second cell</td>
  9. </tr>
  10. <tr>
  11. <td>Second row first cell</td>
  12. <td>Second row second cell</td>
  13. </tr>
  14. </table>
<ul>
Element that creates an unordered list using bullets. Should be used in conjunction with the
  • tag.
  1. <ul>
  2. <li>Bullet point 1<li>
  3. <li>Bullet point 2<li>
  4. </ul>

끝!

반응형
저작자표시 비영리 변경금지