ol 태그와 ul 태그

html에서 ol 태그와 ul 태그는 목록을 나타내기 위한 요소이다.
둘의 차이점은 목록의 형태다.

ul 태그는 비순서 목록(unordered list)을 나타내며, 목록 항목이 순서 없이 나열된다. 반대로 ol 태그는 순서 목록(ordered list)을 나타내며, 목록 항목이 순서대로 나열된다.
화면에 출력될 때도, ul 태그는 정색의 작은 원(bullet)이나 정사각형 모양으로 표현되지만, ol 태그는 숫자, 알파벳, 로마 숫자 등과 같은 순서 지시자로 표시된다.

	<ul>
        <li>Unordered List 1</li>
        <li>Unordered List 2</li>
        <li>Unordered List 3</li>
    </ul>
    <ol>
        <li>Ordered List 1</li>
        <li>Ordered List 2</li>
        <li>Ordered List 3</li>
    </ol>

li 태그?

html 명세에서 정의된 규칙으로, ul 태그와 ol 태그가 자식으로 가질 수 있는 것은 li 태그 뿐이다.
그 이유는, HTML의 구조적인 특성 때문이다. HTML은 문서의 구조를 명확하게 표현하도록 설계되었으며, 이를 위해서는 요소들 간의 부모-자식 관계가 명확하게 정의되어야 한다. ul 태그와 ol 태그는 각각 목록을 나타내는 요소이므로, 그들의 자식 요소로 li 태그가 사용되는 것이 자연스러운 구조다.
만약 li요소를 ul태그나 ol태그 하위에 사용하지 않고 단독으로 사용하면, 규칙을 지켜서 사용하지 않은 html은 HTML언어 규칙을 지키지 않은(유효하지 않은) HTML문서이기 때문에 html요소에 담긴 시맨틱 정보들을 전달하지 못한다.
그렇기 때문에 검색엔진에서 제대로 검색이 안 되거나 스크린 리더 등을 사용하는 사용자에게 제대로 웹사이트를 전달하지 못할 수도 있다고 한다.
이렇게 구조적으로 명확한 문서는 유지보수와 가독성이 용이하며, 검색 엔진 최적화(SEO)와 웹 접근성(Accessibility)에도 도움이 된다.

Semantic HTML?

직역하면 의미론적 html 이다. HTML에서 semantic element는 해당 element의 의미를 브라우저와 개발자 모두에게 알려줄 수 있다.

왜 Semantic하게 짜야 하는가?

1. 검색엔진 최적화(SEO) -> 검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다. 따라서 제목은 h1, 중요한 단어는 strong 또는 em을 사용하는 등 의미에 맞는 올바른 태그를 사용하는 것이 중요하다.
2. 시각장애가 있는 사용자가 스크린 리더를 사용하여 페이지를 탐색할 때 도움이 된다.
3. 시맨틱 태그를 사용한 코드 블록을 찾는 것은 끝없는 div(div > div > div ...)를 탐색하는 것보다 훨씬 쉽다.
4. W3C에 따르면 "시맨틱 웹을 사용하면 애플리케이션, 기업 및 커뮤니티에서 데이터를 공유하고 재사용할 수 있다"고 한다. (의미가 있는 요소는 개발자 모두에게 명확한 의미를 전달한다)