Building value

HTML[HTML 태그] 본문

HTML

HTML[HTML 태그]

developer_Michael 2023. 3. 30. 08:24
반응형

HTML 태그는 요소를 정의하는 역할을 합니다.

 

각각의 태그는 <tag>와 </tag>의 형태로 작성하며,

 

시작 태그와 종료 태그 사이에는 해당 요소의 내용(content)이 들어갑니다.

 

HTML 태그는 일반적으로 인라인 태그와 블록 태그로 분류됩니다.

 

이 분류는 태그가 문서의 흐름을 어떻게 다루는지를 기준으로 합니다.

 


1. 인라인 태그

문서의 흐름에서 줄(line) 내에서 삽입됩니다.


자신의 너비와 높이가 없으며, 컨텐츠 크기에 따라 동적으로 크기가 결정됩니다.


다른 인라인 요소와 함께 사용될 수 있습니다.


일반적으로 텍스트 스타일링에 사용됩니다.


예시: <a>, <span>, <em>, <strong>


2. 블록 태그

문서의 흐름에서 새로운 줄을 차지하며, 컨텐츠의 너비와 높이를 갖습니다.


다른 블록 요소 또는 인라인 요소를 포함할 수 있습니다.


일반적으로 레이아웃을 구성하기 위해 사용됩니다.


예시: <div>, <p>, <h1>, <ul>


인라인 요소는 텍스트 스타일링을 위해 주로 사용되며, 

 

블록 요소는 레이아웃을 구성하거나 페이지의 구조를 만들기 위해 사용됩니다. 

 

이 두 가지 태그 유형은 HTML 문서의 레이아웃 및 스타일을 지정하는 데 중요한 역할을 합니다.

 


아래는 몇 가지 주요 HTML 태그입니다.

<html>: HTML 문서의 시작을 나타냅니다.
<head>: 문서의 메타데이터를 포함하는 부분입니다.
<title>: 문서의 제목을 나타냅니다.
<body>: 문서의 본문을 포함하는 부분입니다.
<h1>~<h6>: 제목을 나타내는 태그로, 숫자가 작을수록 큰 제목입니다.
<p>: 문장을 나타내는 태그입니다.
<ul>: 순서 없는 리스트를 나타내는 태그입니다.
<ol>: 순서 있는 리스트를 나타내는 태그입니다.
<li>: 리스트의 각 항목을 나타내는 태그입니다.
<img>: 이미지를 삽입하는 태그입니다.
<a>: 하이퍼링크를 나타내는 태그입니다.


이외에도 많은 태그들이 있으며, 태그들은 다양한 속성을 가질 수 있습니다.

 

태그와 속성에 대해서는 이후에 자세히 다루도록 하겠습니다.

HTML 태그를 이용하여 문서의 구조를 잘 정의하면, 

 

검색 엔진 최적화를 비롯한 웹 페이지의 접근성과 사용성을 향상할 수 있습니다.

 

아래는 예시로 들어준 몇 가지 HTML 태그를 사용하여 작성한 코드 블럭입니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>developer-Michael</title>
</head>
<body>
  <h1>Tech-blog</h1>
  <p>Hello World!</p>
  <h2>최신 포스트</h2>
  <ul>
    <li><a href="#">HTML 기초</a></li>
    <li><a href="#">CSS 선택자</a></li>
    <li><a href="#">JavaScript 함수</a></li>
  </ul>
  <h2>이전 포스트</h2>
  <ul>
    <li><a href="#">CSS 레이아웃</a></li>
    <li><a href="#">JavaScript 배열</a></li>
  </ul>
  <img src="blog_image.jpg" alt="블로그 이미지">
</body>
</html>

반응형

'HTML' 카테고리의 다른 글

HTML[HTML 리스트(List)]  (0) 2023.03.30
HTML[HTML 요소]  (0) 2023.03.30
HTML[HTML 속성]  (0) 2023.03.30
HTML[HTML 문서 구조]  (0) 2023.03.30
[HTML]HTML이란?  (0) 2023.03.29
'HTML' Related Articles more