'div'대신 'li'를 사용해야하는 이유는 무엇입니까?

'div'대신 'li'를 사용해야하는 이유는 무엇입니까?

---

항목을 나열 할 때 ul-li를 사용해야하는 이유와 단순히 div를 사용해야하는 이유를 잘 모르겠습니다. 정렬되지 않은 목록을 만드는 것과 div를 정렬하는 것의 기능적 이점은 어디에 있습니까?

---

의미 정확성을 위해. HTML은 사물 목록을 표현할 수있는 기능을 제공하며, 사이트 표시에만 관심이없는 Google 로봇, 스크린 리더 및 모든 사용자가 콘텐츠를 더 잘 이해하도록 도와줍니다.

---

항목을 나열 할 때 ul-li를 사용해야하는 이유와 단순히 div를 사용해야하는 이유를 모르겠습니다. 둘 다 똑같이 보이게 만들 수 있습니다

귀하의 질문에 핵심 단어가 있습니다 : "봐". 점자 리더를 사용하는 시각 장애인에게도 동일한 유형을 지정할 수 있습니까 ? TTS (text-to-speech) 합성기를 사용하여 시각 장애인에게 동일 하게 들리 도록 할 수 있습니까 ? 당신은 할 수 여전히 그들을 사용자 정의 클라이언트 측 CSS의 사용자 스타일 시트를 사용하여 시각 장애인에 대해 동일한 보이게?

"look"이라는 단어는 매우 위험한 단어입니다. HTML과 관련하여이 단어를 사용할 때는 모든 경보가 머리에서 사라져야합니다. HTML은 하이퍼 미디어 문서의 시맨틱 구조를 설명하기위한 언어입니다. 세만 틱 구조는하지 않습니다 이 그것은 추상적 인 개념이다,는 "모양".

이 의미 론적 호 커스 포커스에 관심이없고 맹인에 대해서는 신경 쓰지 않아도 구글, 야후, MSN 및 Co.는 눈이 보이지 않으며 렌더링 된 CSS를 "보지"않습니다. .

---

의미 적으로 올바른 마크 업을 사용하면 텍스트에 추가 정보가 포함됩니다. ul / li를 사용하면 정보가 임의의 요소 안에있는 텍스트 인 "무언가"가 아니라 목록이라는 정보를 소비 애플리케이션에 전달합니다.

---

귀하의 질문에 대한 직접적인 답변 : 기능상의 장점은 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를 비활성화 할 때입니다. 브라우저는 기본 브라우징으로 렌더링하여 대체 브라우징 장치가 사용되는지 더보기 좋게 만듭니다. 또한 적응성을 향상시킵니다.

---

div를 대신 사용하면 lynx는 페이지를 읽을 수있는 방식으로 렌더링 할 수 없습니다.

---

나는 개인적으로 의미론을위한 li을 좋아한다. 소스를 볼 때 li로 감싼 경우 목록이 있음을 즉시 알 수 있습니다. div 컬렉션은 의미 적 의미를 제공하지 않으며 일반적으로 목록의 유일한 의미는 "listItem"과 같은 CSS 클래스에 의해 도입됩니다. 이것은 li이 처음에 사용되어야한다는 사실을 분명히 지적합니다.

프레젠테이션 논리에 루프가 있으면 항상 div보다 li을 선호합니다.

---

<li>는 목록의 항목을 의미하며 파서 (브라우저, 검색 엔진, 스파이더)가 사용자가 항목을 나열하고 있음을 알 수 있도록합니다. LI 대신 DIV를 사용할 수 있지만 파서는 해당 항목이 나열되고 DIV가 블록이라는 것을 제외하고는 아무것도 설명하지 않습니다.

---

<li>(해당되는 경우) 사용하면 <div>웹 페이지에서 자주 볼 수있는 태그 수프가 줄어들어 개발자가 많은 도움을줍니다.

하지 않는 것이 <div>들 나쁜하지만, 태그 (같은 남용 도착 때마다 ' <div>자주), 그것은 완전히 쓸모없는 존재의 점에 태그의 의미 론적 의미를 희석. 최근에 웹앱의 CSS / UI를 돕기 위해 고용 한 계약자로부터 이것을 배웠으며 HTML 코드의 가독성 / 유지 보수성에 대한 차이점이 매우 눈에 able니다.

---

: 당신이 걱정하는 모두가 최소의 노력으로 어떤 방법을 찾기 위해 목록을하게 될 경우, 다음이 이미 생각할 필요가 <li>보다 입력 한 문자 적은 없습니다 <div> 와 닫는 태그는 HTML에서 선택 사항입니다.

그리고 그것은 다른 사람들이 의미론에 대해 말한 것에 추가됩니다.

---

기본 브라우저 또는 모바일 장치에서 올바르게 렌더링

---

프로젝트에 따라 다릅니다. 최근에 목록을 사용하여 디자인 된 메뉴가있는 프로젝트를 수행했습니다. 그들은 슬라이딩 / 페이딩과 같은 많은 효과를 추가하고 싶었고, 여러 레벨과 접을 수있게 만들고 싶었습니다.

이 경우 DIV가 훨씬 더 적합했습니다. 하위 div에 대한 컨테이너를 만들고 jQuery를 적용하여 원하는 효과를 얻을 수있었습니다.

프로젝트에 이러한 요구 사항이 아직 없더라도 앞으로 어떻게 변경할 수 있는지 생각하는 것이 현명 할 수 있습니다 ...

---

another thing about ul li is ; you can use ul as a container which helps you to set Style class

<ul class="myHebe">
  <li><a href="#">.net</a></li>
  <li><a href="#">.net</a></li>
</ul>

I like this pattern when i use ul

.myHebe{} // container
.myHebe li {} // items
.myHebe li a {} // subitems

Of course it depends on how we want to use it and how we like it. This is the way i like

Hope helps Thanks

---

Your question is already answered by i want to add my two cents here. I was working on a project where i was doing the backend logic and my data was being aggregated into a page template made by my designer. he used ul and li tags to represent every kind of list on the page, some of which were widgets. The data was coming from a cms where users could enter rich text via html tags. when users started creating lists in their content the lists no longer looked like bulleted listes rather screwed up the whole page.

lesson learned: do not use list tags with generic css selectors if your content can contain html in itself.

참고URL : https://stackoverflow.com/questions/549689/why-should-i-use-li-instead-of-div