HTML - Grouping Content

자주 사용하고 중요한 HTML grouping content tag들을 정리해보았다.

1. 리스트 태그 <li>, <ul>.<ol> 사용하기

<li>, <ul>.<ol>

* 순서가 중요하지 않을 떄
    <ul>    
		<li>one</li>
        <li>two</li>
        <li>three</li>
    </ul> 

*순서가 중요할 떄
 <ol type="I">
        <li>one</li>
        <li>two</li>
        <li>three</li>
 </ol>

<dl>,<dt>,<dd> - 더 자세한 정의를 할 때

 <dl>
        <dt>html</dt>
        <dt>안녕하세요! 김태희입니다.</dt>
    </dl> 
  

2. <div>, <span>

• <section>,<article>,<ui>처럼 대체 태그가 있음에도 구분 없이 남발하는 것을 지양
• 항상 최후의 수단으로 사용
  
  

3. <section>, <article>

• <section>안에 <article>은 사용 가능(역으로 포함 불가능)
• <article>은 개별적으로 구성된 때 주로 사용
  
  

4. <figure>, <figcaption>

    <figure>
        <img width="auto" height="150" src="images/flower.webp" alt="">
        <figcaption>
            꽃 구경 가고 싶다아아아~
        </figcaption>
    </figure>
    

5. <blockquote>,<q>,<p>

	<blockquote>
    	<p>제발 그만해... 이러다가 우리 다~ 죽어</p>
    </blockquote>
    
   <p><q>제발 그만해.. 이러다 다~~ 죽어!</q></p>

6. <main>

• 주요 contents를 담아내는 태그

7. <footer>

• 기업 정보, 저작권 등을 적는 태그
• 여러 개의 <footer>를 사용할 수 있음
  
  

8. <heading>

• 기업 정보, 저작권 등을 적는 태그
• 여러 개의 <footer>를 사용할 수 있음