왜 'div' 대신 'li'를 사용해야 합니까?

https://stackoverflow.com/questions/549689

23-08-2019
|

문제

항목을 나열할 때 단순히 div를 사용하는 것과 ul-li를 사용해야 하는 이유가 무엇인지 잘 모르겠습니다.두 가지를 모두 똑같이 보이게 만들 수 있는데, 정렬되지 않은 목록을 만드는 것과 div를 정렬하는 것의 기능적 이점은 어디에 있습니까?

해결책

의미 적 정확성을 위해. HTML은 사물 목록을 표현할 수있는 기능을 가지고 있으며, 사이트의 프레젠테이션에만 관심이없는 Google 로봇, 스크린 리더 및 모든 방식의 사용자가 귀하의 콘텐츠를 더 잘 이해하는 데 도움이됩니다.

다른 팁

상품을 나열 할 때 왜 UL-LI를 사용해야하는지 확실하지 않습니다. 나는 둘 다 만들 수있다 바라보다 정확히 동일합니다

당신의 질문에는 "봐"라는 핵심 단어가 있다는 것입니다. 당신은 또한 그들을 만들 수 있습니다 유형 점자 독자를 사용하는 맹인에게도 마찬가지입니까? 당신은 그들을 만들 수 있습니다 소리 텍스트 음성 신디사이저를 사용하는 맹인에게도 마찬가지입니까? 할 수 있나요 아직 사용자 정의 클라이언트 측 CSS 사용자 스타일 시트를 사용하여 시각 장애인에게 동일하게 보이게합니까?

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

이 시맨틱 hocuspocus에 신경 쓰지 않고 맹인에 대해 신경 쓰지 않더라도 Google, Yahoo, MSN 및 Co.는 눈을 가지고 있지 않으면 렌더링 된 CSS를 "보지"않습니다. .

의미상 올바른 마크업을 사용하면 텍스트에 추가 정보를 삽입할 수 있습니다.ul/li를 사용하면 임의의 요소 내부에 있는 일부 텍스트인 "무언가"(무엇을 아는지)가 아니라 정보가 목록이라는 점을 소비 애플리케이션에 전달하게 됩니다.

귀하의 질문에 대한 직접적인 답변:기능적인 장점은 div 그 자체로는 거의 의미가 없지만, 울 리스 명시적으로 "이것은 순서가 지정되지 않은 항목 목록입니다."를 의미합니다.

"의미론"이라는 용어는 기존 구조의 고유한 의미를 사용하여 명시적인 의미를 만드는 방식을 나타냅니다.HTML은 그 자체로 특정한 것을 의미하는 태그로 구성됩니다.그리고 게시된 HTML 문서가 원하는 의미를 전달할 수 있도록 이를 사용하는 확립된 규칙/지침/방법이 있습니다.

문서에 항목을 나열하는 경우 순서가 지정된 목록(UL) 또는 순서가 없는 목록(OL)을 추가하세요.반면 페이지 분할(DIV) 요소는 특정하고 별도의 콘텐츠를 만드는 데 사용됩니다.

그만큼 div 요소 "나누기" 페이지를 보면 콘텐츠 본문, 바닥 글, 헤더, 탐색, 메뉴, 양식 등과 같은 특정 부품이 있습니다.그리고 당신은 사용할 수 있습니다 div 태그를 사용하여 이러한 구분을 만듭니다.페이지 부분은 시각적 레이아웃과 일치하는 경우가 많으므로 CSS에서 레이아웃을 잘라내기 위해 명시적인 페이지 분할(DIV)을 사용하는 것이 자연스럽게 맞습니다.이 방법은 div 태그는 구조적으로 변합니다.

잘못 사용하거나 과도하게 사용하는 경우 div 태그를 사용하면 의도하지 않은 의미와 코드 부풀림이 발생할 수 있습니다.

문제를 혼동하려면:구글이 사용하는 h3 그리고 div 나열된 검색 결과를 "분할"합니다. ul > li > h3 + div

따라서 모든 스타일을 끄면(WebDeveloper 도구 모음이 있는 Firefox의 경우 Shift+Cmd/Crtl+S) div 사라지고 자연스럽게 쌓여야 합니다.기본 HTML은 여전히 명확한 계층 구조로 멋진 페이지를 렌더링해야 합니다.위에서 아래로, 가장 중요한 내용을 먼저 나열하고, 나열된 항목에 대한 글머리 기호 및 번호가 있는 목록입니다.그리고 다음으로 건너뛸 수 있는 링크를 상단 근처에 추가하는 것이 좋습니다(비시각적 사용자의 경우).주요 내용, 중요한 형식 또는 주요 제목(예: 목차).

마지막으로 문서를 작성하고 있다는 점을 명심하세요.모든 시각적 효과가 없어도 여전히 설득력 있는 문서여야 합니다.

사용에 대한 많은 이야기가 있습니다 <li> 또는 사용 <div> 그러나 하나의 의견은이 태그 내부에 들어가는 내용의 확실한 예를 제시하지 않았습니다. 내 느낌은 그게 <ul> 그리고 <li> 웹 사이트, 신문 또는 잡지의 온라인 또는 인쇄물에서 실제로 "목록"을 읽은 마지막 시간을 말할 수없는 것처럼 실제로는 중요하지 않습니다.

<div> 훨씬 더 다재다능합니다. 케이크를 위해 재료를 나열하는 경우 예 목록입니다. 하이킹 여행을 위해 포장하기 위해 물건을 나열하고 있다면, 그것은 목록입니다.

그러나 예를 들어, 실제로 목록이 아닌 임의의 것, 일련의 단락, 또는 "헤더"의 무작위를 나열하는 사용자 형태는 어떻습니까? 일부는 날짜이고 일부는 확인란이고 일부는 텍스트입니다. 당신이 나에게 묻는다면 그것을 div. 맹인은 그것이 표시되면 잘못된 정보를받을 것입니다. <ul> 그리고 <li> 그리고 그들은 "여기 목록이 있습니다 ..."라고 들었습니다. 그것이 단지 목록이 아니라 물건의 호드 포드 일 때.

내부에 넣을 콘텐츠에 적절한 태그를 사용해야합니다. 이것은 UL/Li가 목록에 더 적합하다는 것을 의미하지는 않습니다. 이것은 또한 목록의 내용을 고려하고 정렬되지 않은/주문 또는 정의 목록인지 확인해야합니다.

또 다른 주장은 CSS를 비활성화 할 때입니다. 브라우저는 기본 스타일을 렌더링하여 대체 브라우징 장치를 사용하는지 확인하는 것이 더 좋습니다. 또한 적합성을 향상시킵니다.

DIV를 대신 사용하는 경우 Lynx는 페이지를 읽을 수있는 방식으로 렌더링 할 수 없습니다.

나는 개인적으로 Semantics를 위해 Li 's를 좋아합니다. 소스를 볼 때 즉시 LI에 의해 싸인 경우 무언가 목록이 있음을 즉시 알 수 있습니다. DIV 컬렉션은 의미 론적 의미를 제공하지 않으며 일반적으로 목록에 대한 유일한 의미론은 "ListItem"과 같은 CSS 클래스에서 소개됩니다. 이것은 분명히 Li가 처음에 사용되어야한다는 사실을 지적합니다.

프리젠 테이션 로직에 루프가 있다면 항상 li를 선호합니다.

u003Cli>목록의 항목을 의미하며 파서 (브라우저, 검색 엔진, 거미)가 항목을 나열하고 있음을 알 수 있습니다. 당신은 Li 대신 Div를 사용할 수 있지만 그 파서는 해당 항목이 나열되고 있다는 것을 결코 알지 못하고 DIV는 실제로 블록이라는 점을 제외하고는 아무것도 설명하지 않습니다.

사용 <li> (적절한 경우) <div> 웹 페이지에서 자주 볼 수있는 수프 태그는 개발자를 많이 돕습니다.

하지 그 <div>S는 나쁘지만 태그가 과도하게 사용될 때마다 ( <div> 종종), 그것은 태그의 의미 론적 의미를 완전히 쓸모없는 지점으로 희석시킵니다. 나는 최근 웹 앱의 CSS/UI를 돕기 위해 우리가 고용 한 계약자로부터 이것을 배웠으며, HTML 코드의 가독성/유지 가능성과의 차이는 나에게 매우 눈에 띄었다.

당신이 관심을 갖는 모든 것이 최소한의 노력으로 특정 방식으로 보이도록 목록을 얻는 것입니다. 이것은 이미 쉬운 일이 아닙니다. <li> 하나의 문자는 유형보다 유형이 적습니다 <div> 그리고 닫는 태그는 HTML에서 선택 사항입니다.

그리고 그것은 다른 모든 사람들이 의미론에 대해 말한 것과 더분합니다.

원시 브라우저 또는 모바일 장치에서 올바르게 렌더링합니다

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

이 경우 Div가 훨씬 더 적합했습니다. 자식 DIV 용 용기를 만들고 원하는 효과를 얻기 위해 jQuery를 적용 할 수있었습니다.

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

Ul Li의 또 다른 것은; 스타일 클래스를 설정하는 데 도움이되는 컨테이너로 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

물론 그것은 우리가 어떻게 사용하고 싶은지와 우리가 좋아하는 방식에 달려 있습니다. 이것이 내가 좋아하는 방식입니다

희망은 감사합니다

귀하의 질문은 이미 여기에 두 센트를 추가하고 싶습니다. 백엔드 로직을 수행하는 프로젝트를 진행하고 있었고 내 데이터는 디자이너가 만든 페이지 템플릿으로 집계되었습니다. 그는 UL과 LI 태그를 사용하여 페이지의 모든 종류의 목록을 나타 냈으며 그 중 일부는 위젯이었습니다. 데이터는 사용자가 HTML 태그를 통해 풍부한 텍스트를 입력 할 수있는 CMS에서 나왔습니다. 사용자가 콘텐츠에서 목록을 작성하기 시작했을 때 목록은 더 이상 총알 목록이 전체 페이지를 망친 것처럼 보이지 않습니다.

학습 : 컨텐츠 자체에 HTML을 포함 할 수있는 경우 일반 CSS 선택기와 함께 목록 태그를 사용하지 마십시오.

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow