답변:
의미 적 정확성을 위해. HTML은 사물의 목록을 표현할 수 있으며 Google 로봇, 스크린 리더 및 사이트 표시에만 신경 쓰지 않는 모든 유형의 사용자가 콘텐츠를 더 잘 이해할 수 있도록 도와줍니다.
항목을 나열 할 때 ul-li와 단순히 div를 사용해야하는 이유를 잘 모르겠습니다. 둘 다 똑같이 보이게 할 수 있습니다
귀하의 질문에 "look"이라는 키워드가 있습니다. 시각 장애인이 점자 판독기를 사용하여 똑같이 입력 하도록 할 수 있습니까 ? 텍스트 음성 변환 합성기를 사용하여 시각 장애인에게도 똑같이 들리 도록 할 수 있습니까 ? 당신은 할 수 여전히 그들을 사용자 정의 클라이언트 측 CSS의 사용자 스타일 시트를 사용하여 시각 장애인에 대해 동일한 보이게?
"look"이라는 단어는 매우 위험한 단어입니다. HTML과 관련하여 사용할 때 모든 경보가 머릿속에서 울려 야합니다. HTML은 하이퍼 미디어 문서의 의미 구조를 설명하는 언어입니다. 세만 틱 구조는하지 않습니다 이 그것은 추상적 인 개념이다,는 "모양".
이 모든 의미 론적 요점에 대해 신경 쓰지 않고 시각 장애인을 신경 쓰지 않더라도 다음을 고려하십시오. Google, Yahoo, MSN 및 Co.는 눈이없고 렌더링 된 CSS를 "보지"않습니다. .
귀하의 질문에 대한 직접적인 답변 : 기능적 이점은 div 는 그 자체로는 거의 의미가없는 반면 ul lis 는 "이것은 항목의 순서가없는 목록"을 명시 적으로 의미합니다.
"의미론"이라는 용어는 기존 구조의 고유 한 의미를 사용하여 명시 적 의미를 만드는 방법을 나타냅니다. HTML은 그 자체로 특정 사항을 의미하는 태그로 구성됩니다. 또한 게시 된 HTML 문서가 원하는 의미를 전달하도록 규칙 / 지침 / 사용 방법이 확립되어 있습니다.
문서에있는 항목을 나열하는 경우 정렬 된 목록 (UL) 또는 정렬되지 않은 목록 (OL)을 추가하십시오. 반면에 페이지 분할 (DIV) 요소는 특정 및 별도의 콘텐츠를 만드는 데 사용됩니다.
DIV의 요소 "분할." 페이지를 볼 때 콘텐츠 본문, 바닥 글, 머리글, 탐색, 메뉴, 양식 등과 같은 특정 부분이 있습니다. div 태그를 사용하여 이러한 구분을 만들 수 있습니다 . 종종 페이지 부분은 시각적 레이아웃과 일치하므로 명시 적 페이지 분할 (DIV)을 사용하여 CSS에서 레이아웃을 자르는 것이 자연스럽게 맞습니다. 이렇게하면 div 태그가 구조화됩니다.
div 태그 를 오용하거나 과도하게 사용하면 의도하지 않은 의미와 코드 부풀림이 발생할 수 있습니다.
문제를 혼동하기 위해 : Google은 h3 및 div 를 사용 하여 나열된 검색 결과를 "나누기"합니다. ul> li> h3 + div
따라서 모든 스타일을 끄면 (WebDeveloper 툴바가있는 Firefox의 경우 Shift + Cmd / Crtl + S) div 가 사라지고 자연스럽게 스택됩니다. 네이 키드 HTML은 여전히 명확한 계층 구조로 멋진 페이지를 렌더링해야합니다. 위에서 아래로, 가장 중요한 콘텐츠를 먼저, 목록 항목에 글 머리 기호와 숫자가있는 목록을 표시합니다. 그리고 (비 시각적 사용자의 경우) 상단 근처에 링크를 추가하여 주요 콘텐츠, 중요한 양식 또는 주요 제목 (목차와 같은)으로 건너 뛸 수 있도록하는 것이 좋습니다.
마지막으로 문서를 작성하고 있음을 명심하십시오. 모든 시각 효과가 없어도 여전히 일관성있는 문서 여야합니다.
사용 <li>또는 사용 에 대한 많은 이야기가 <div>있지만 이러한 태그 내부에 들어가는 콘텐츠의 확실한 예를 제시 한 댓글은 하나도 없습니다. 내 느낌이 있다는 것입니다 <ul>및이 <li>온라인 또는 인쇄에서 - 내가 실제로 웹 사이트, 신문이나 잡지에 일의 "목록"을 읽어 당신에게 마지막으로 말할 수있는 정말 중요한 것을하지 않습니다.
<div>훨씬 더 다재다능합니다. 케이크 재료를 나열하는 경우 목록입니다. 하이킹 여행을 위해 포장 할 물건을 나열하는 경우 목록입니다.
그러나 예를 들어 실제로 목록도 아니고 일련의 단락도 아니고 모든 "헤더"도 아닌 임의의 항목을 나열하는 사용자 양식은 어떻습니까? 어떤 것은 날짜이고, 어떤 것은 체크 박스이고, 어떤 것은 텍스트입니다. 당신이 나에게 묻는다면 그것을 나누십시오. 눈 먼 사람이 함께가 표시된 경우 잘못-통보 될 것 <ul>와 <li>그들이 듣고 "여기의 ... 목록은"이 목록 정말 물건의 단지 뒤범벅,하지 않을 때.
안에 넣을 콘텐츠에 적절한 태그를 사용해야합니다. 이것은 ul / li가 목록에 더 적합하다는 것을 의미 할뿐만 아니라 이는 또한 목록의 내용을 고려하고 순서가 지정되지 않은 / 순서가없는 목록 또는 정의 목록인지 확인해야 함을 의미합니다.
또 다른 주장은 CSS를 비활성화 할 때입니다. 브라우저는 기본 스타일을 렌더링하여 대체 브라우징 장치가 사용되는지 확인하는 것이 더 좋습니다. 또한 접근성을 향상시킵니다.
나는 개인적으로 의미론에 대해 li을 좋아합니다. 소스를 볼 때 리로 래핑 된 경우 목록이 있음을 즉시 알 수 있습니다. div 컬렉션은 의미 론적 의미를 제공하지 않으며 일반적으로 목록에 대한 유일한 의미 체계는 "listItem"과 같은 CSS 클래스에 의해 도입됩니다. Li가 처음에 사용되어야한다는 사실을 분명히 지적합니다.
프레젠테이션 로직에 루프가 있다면 항상 div보다 li을 선호합니다.
: 당신이 걱정하는 모두가 최소의 노력으로 어떤 방법을 찾기 위해 목록을하게 될 경우, 다음이 이미 생각할 필요가 <li>보다 입력 한 문자 적은 없습니다 <div> 와 닫는 태그는 HTML에서 선택 사항입니다.
그리고 그것은 다른 모든 사람들이 의미론에 대해 말한 것에 추가됩니다.
귀하의 질문에 이미 2 센트를 추가하고 싶습니다. 백엔드 로직을 수행하고 내 데이터가 디자이너가 만든 페이지 템플릿으로 집계되는 프로젝트에서 작업 중이었습니다. 그는 페이지에있는 모든 종류의 목록을 나타 내기 위해 ul 및 li 태그를 사용했으며, 그중 일부는 위젯이었습니다. 데이터는 사용자가 html 태그를 통해 서식있는 텍스트를 입력 할 수있는 cms에서 가져 왔습니다. 사용자가 콘텐츠에 목록을 만들기 시작했을 때 목록은 더 이상 글 머리 기호 목록처럼 보이지 않고 전체 페이지를 망쳐 놓았습니다.
교훈 : 콘텐츠 자체에 html이 포함될 수있는 경우 일반 CSS 선택기와 함께 목록 태그를 사용하지 마십시오.
ul li에 대한 또 다른 점은 다음과 같습니다. Style 클래스를 설정하는 데 도움이되는 컨테이너로 ul을 사용할 수 있습니다.
<ul class="myHebe">
<li><a href="#">.net</a></li>
<li><a href="#">.net</a></li>
</ul>ul을 사용할 때이 패턴이 좋아요
.myHebe{} // container
.myHebe li {} // items
.myHebe li a {} // subitems물론 그것은 우리가 그것을 사용하는 방법과 그것을 어떻게 좋아하는지에 달려 있습니다. 이것이 내가 좋아하는 방식이다
희망은 감사를 돕습니다