스타일이 지정된 div가 기능을 모방 할 수있을 때 span, ul, li, h1 등 요소 (및 다른 요소)의 요점은 무엇입니까?

Question

사용자 지정 가능한 HTML 템플릿을 만들고 사용할 요소 유형을 결정합니다. 한편으로는 각 유형의 콘텐츠에 가장 적합한 HTML 요소 유형을 사용할 수 있습니다. 목록에는 ul의/li, 제목은 h1, h2 등이 있습니다. 반면에 클래스 속성과 함께 div를 사용할 수는 있습니다. 사실, 나는 접근 방식 중 하나에서 클래스 속성을 사용해야하고 이전 접근 방식을 사용하면 일부 HTML 요소 유형에서 불쾌한 기본 속성 중 일부를 추가로 0으로해야 할 것입니다.

CSS의 유연성을 감안할 때 실제로 텍스트를 포함하는 모든 요소에 div 요소를 사용하는 것이 쉽고 CSS를 적게 사용하는 것이 가능합니다. h6, span, ul 's, li 's, hr 's, p 's 등을 의도 된 용도로 사용하려고합니까, 아니면 div로 이동해야합니까?

Answer 1

데이터의 의미를 전달하기 때문에 적절한 태그를 사용해야합니다. "this is a header"와 "this is a large, bold text"의 차이가 있습니다. 이 정보는 독자, 검색 엔진 및 "일반"브라우저가 아닌 다른 종류의 사용자 에이전트를 스크리닝하는 데 유용합니다. 게다가 어떤 이유로 든 스타일 시트를 사용하지 않는 사람들은 여전히 ​​그것을 읽을 수 있지만 모든 태그가 div와 span (적어도 그렇게 쉽지는 않음) 인 경우에는 그렇지 않습니다.

Answer 2

한 마디로 예. 적절한 요소를 사용해야하는 이유는 다음과 같습니다.

화면 판독기는 태그를 사용하여 정보의 중요도 또는 새 단락이 시작되는 위치 등을 결정합니다. Div는 태그를 사용하지 않습니다.

검색 봇은 중요도를 결정하기 위해 H # 태그를 사용합니다.

Answer 3

한 단어, 의미론.

나를 위해 최소한 태그는 사용자가 화면에 출력하는 것 이상의 의미를 지닙니다. HTML 페이지의 의미는 요소의 컨텍스트와 함께 페이지에 들어 맞는 방식입니다.

예를 들어, SEO 용어로 볼 때 대부분의 페이지에는 페이지 콘텐츠의 제목을 표시하는 멋진 <h1> 태그가 있어야합니다. 이와 같은 다른 요소는 태그의 의미와 페이지 내 표시 방식에 따라 추가적인 의미를 갖습니다.

제대로 형성 코드는 항상 (!) 제대로

<h1>The Title of my page</h1> 
<h2>The subtitle of my page</h2> 
<h3>Perhaps the title of a section</h3> 

그래서 그들은 당신은 또한 브라 우어을 줄 수있는 의도 된 목적에 따라서 사용자의 태그를 사용하여 제목 태그 부착, 제목을 중첩 된 코드가 어떻게 형성되는지에 대한 더 깊은 통찰력.

또 다른 이유는 사용자가 스타일 시트를로드하지 않아서 모든 div가 모든 곳으로 이동한다는 것입니다. 제한된 데이터 요금제에서 모바일 브라우저를 사용하는 경우.

내가 생각하는 또 다른 이유는 코드가 나중에 코드를 읽을 수 없기 때문입니다. 클래스가있는 div를 사용하면 페이지 크기를 늘릴 수있을뿐 아니라 코드 작성 시간이 오래 걸리며 코드를 다시 내려 가면 코드가 혼란스러워집니다.

영국 법에 의거하여 의미를 되 돌리려면 장애가있는 사용자를 보호해야합니다. div를 사용하면 그렇지 않습니다. 화면 판독기는 미친듯한 상상력 때문에 코드를 숨기는 데 어려움을 겪습니다.

:

Answer 4

순전히 시각적 인 에이전트 이외의 에이전트가 있습니다. 이를 위해 기본 요소가 중요 할 수 있습니다. 슬프게도 많은 비주얼 디자이너들이 무시하고 싶어하는 접근성과 비 주류 브라우저에 대해서만 이야기하는 것이 아닙니다. 심지어 그들이 염려하는 경우는 검색 엔진입니다.

는 검색 엔진은 <h1>에서 텍스트가 <p> 텍스트보다 더 중요하다 알고있다. 검색 엔진은 <div>의 텍스트는 별도의 라인 (당신이 그것을 표시 방법을 변경하는 CSS display: inline을 사용한 경우에도) 인 반면 <span>에서 텍스트가, 그 주변 인라인 텍스트 연속 문구를 형성하기 위해 함께 흐름을 알고있다.

당신은 정말 대신 의미 가장 적합한 요소의 <div class="h1">를 사용하여 아무것도하지 않습니다. <ul>, <table> 또는 <form>을 사용하는 경우 몇 가지 CSS 다시 설정 규칙을 원할 수도 있지만 그게 전부입니다.

Answer 5

태그는 모든 의미 또는 좋은 단어, semantics에 대해 설명합니다. 화면 판독기를 사용하는 시각 장애인은 웹 페이지가 페이지의 텍스트 덩어리가 무엇인지 알려주는 태그로 구성된다는 점에 달려 있습니다. 예 : H1, H2, Hn은 모두 헤더임을 알립니다. P은 단락이라는 사실을 알려줍니다. UL/LI은 글 머리 기호 목록임을 알려줍니다. 스크린 리더를 가진 사람은이 태그를 사용하여 페이지를 스캔합니다. 그들은 얼마나 많은 헤더 태그 (H1, H2, Hn) 페이지에있는 다음 단지가 읽고 싶은 부분을 찾아 그들을 통해 검색 태그 "를 참조하십시오"할 수 있습니다.