[ 구조를 나타내는 요소 ]

<div>division : 콘텐츠 분할 그룹핑. 순수 컨테이너로 아무 의미 없음.
대부분 스타일링 위해 이용. 블록 요소.
최대 길이 - 부모의 가로 길이
<span> : 인라인. 순수 컨테이너

<시맨틱 웹>
Semantic : 의미의, 의미론적인
요소 의미 고려하여, 구조 설계, 코드 작성

(순수 컨테이너 - non-semantic)

검색엔진 : 시맨틱 마크업 분석, 검색 랭킹 영향 있는 중요 키워드로 간주
접근성 : 스크린리더
가독성 업, 유지보수, 생산성에 용이.
적절한 사용자 정의, 네이밍 반영

<header> : 페이지 맨 위. 소개, 탐색 도움 콘텐츠
(제목, 로고, 검색 폼, 작성자 이름 등)
<footer> : 페이지 맨 아래, (제작 단체 정보, 저작권 등)

<nav> : navigation 탐색 구획 요소. 연관 정보.
현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획.
(메뉴, 목차, 색인 등)

<aside> : (사이드바, 콜아웃 박스) 본문과 간접연관. 부가적 정보 표현(없어도 상관 없는 것들)
별도 구획 요소

<main> : body의 주요 콘텐츠. 한 개만 사용.

<article> : (게시판, 블로그 글, 매거진, 뉴스 기사 등)

<section> : 일반 구획 요소로(article 내 section 사용), 문맥의 흐름이 끊길 때 사용.

[ 목록 & 표 ]

<li> : ( list item ) 목록의 항목. <ul>, <ol> 태그의 자식 태그.
(속성)value=“(번호)” (<ol>태그 내 한정)

<ol> : (ordered list) 정렬 목록. 순서가 표기되어 있으며, 숫자 내림차순(1,2,3,...)이 기본값.

<ol>의 속성

• start = “(시작번호)” : 리스트의 시작 번호 결정.
• type : 정렬 표기법 설정. ( type= "A" / "a" / "I" / "i" )
• reversed = 정렬 번호 반전

<ul> : (unordered list) 비정렬 목록

( * <ol>, <ul>태그에 <ol>, <ul>태그 중첩 가능 )

<dl> : (definition list)용어 정리, 설명 목록. 2개의 태그를 자식으로 가짐
(용어사전, 메타데이터(키-값 쌍 목록))

• <dl>의 자식 태그

  • <dt> : (definition term) 용어 제목
  • <dd> : (definition description) 용어 설명

• <dl> 태그 내 <dt><dd>태그를 <div>로 감싸기 가능. 단, <dt><dd>의 형제 태그로 사용X.

<table> : 표를 만들 때 사용하는 태그

• <table>의 자식 태그
  • <tr> : table row. 행
  • <th> : table head. 대표하는 글
  • <td> : table data.
  • <thead> : table head.
  • <tbody> : table body.
  • <tfoot> : table foot.

<caption> : 표 설명, 제목. <table> 내 최상단에 사용.