Grouping content

<ol>, <ul>, <li>

ol : ordered list 순서가 있는 목록!
ul : unordered list 순서가 없는 목록
li : 각 항목들을 나열하는 태그 list item
**주의 : <li> 요소는 <ol> 혹은 <ul> 요소 안에서만 사용되어야 하며, <ol>, <ul> 의 직계 자식 요소로는 <li> 요소만 사용되어야 한다.

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
<ol type="I">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ol>
<p>type : a, A, i, I</p>

<dl>, <dt>, <dd>

<ol>, <ul>, <li>가 목록을 정의할 때 쓰였듯이 <dl>, <dt>, <dd> 도 목록을 정의할 때 쓰인다.
차이점이 있다면 <dl>, <dt>, <dd>는 사전처럼 어떠한 것을 정의할 때 쓰이는 목록이다.
<dl>은 정의 목록(definition list)이며 <dt>는 정의할 용어(definition term)을 뜻한다. <dd>는 용어를 설명(definition description)할 때 쓰인다.

<dl>
    <!-- 웹접근성 -->
    <dt>HTML</dt>
    <dd>마크업 언어 입니다.</dd>
</dl>

<div>

<article>, <section>, <header>, <nav>는 기본적으로 <div>와 같은 역할을 한다. 차이점이 있다면 태그에 의미를 부여한 것이다. 예를 들어 내용이 하나의 독립된 컨텐츠라면 <div>대신 <article>을 사용한다. 바꿔 말해 <article>, <section>, <header>, <nav> 모두 <div>로 대신 사용할 수 있으나 보다 적합한 요소를 찾은 후 대용할 태그가 없을 경우 사용해야 한다.

<figure>, <figcaption>

이러한 컨텐츠의 경우 이미지와 캡션이 연결되도록 <figure> 요소를 도입할 수 있다.

  <figure>
    <img src="baby.png" alt="엄마 코끼리와 아기 코끼리">
    <figcaption>
        관심 받고싶어하는 아기22
    </figcaption>
</figure>

<p>

태그는 단락을 표시하는 태그. 하나의 완결된 문단을 의미하기 때문에 <p> 태그 안에 자식으로 <p>를 또 사용하지 않으며, 줄바꿈의 용도로 사용해서도 안된다.

<pre>

HTML에 작성한 내용 그대로 화면에 표현한다. 주로 컴퓨터 코드를 표현할 때 사용한다.

        function 제곱(x){
            return x**2;
        }
    

<blockquote>

인용 블록, q는 인용구로 주로 문장 안에서 사용됨

  <blockquote>
    <p>제발 그만해.. 이러다가 다~~ 죽어!</p>
    <cite>오징어게임 오일남</cite>
</blockquote>

<main>

HTML <main> 요소는 문서의 주요 콘텐츠를 나타낸다.
주요 콘텐츠 영역이란 문서의 핵심 주제나 웹어플리케이션의 핵심 기능에 직접적으로 연결되어 있는 부분을 뜻함으로, 메인 요소안에 들어가는 내용은 문서의 유일한 내용이어야 한다.
다른 페이지나 섹션에서 반복적으로 표시 될수 있는 정보, 예를 들어 사이트 로고, 검색 폼, 저작권 정보 등은 들어가지 않는다.

<hr>

<hr> 태그는 원래는 가로줄을 표현하기 위해 사용했으나 HTML5에 오면서 의미가 생긴 요소이다.. 이야기에서의 장면 전환 혹은 문단 안에서 주제가 변경되었을 때 그 구별을 위해 사용한다. 단락을 구분할 때 사용하므로

태그 내 사용은 웹 표준에 어긋난다!