는 무엇입의 실제 의미를 분리의 내용과 프레젠테이션?

https://stackoverflow.com/questions/2260391

20-09-2019
|

문제

그것은 단지 의미를 피하는 인라인 css?

그것은 그것을 의미하는 디자인을 할 수 있어야 조작 변경하지 않고도 HTML?

우리는 정말 어떤 변경에서 디자인에서 CSS 만?

만약 우리가 원하는 크기를 변경하려면 이미지 다음 우리가 가야 할 것이서 HTML 코드
면 우리는 완을 하나 더 추가 줄 바꿈에서는 단락이 다시 우리는 것입니다 이동해야에서 HTML 코드
우리가 하나 더 추가 구분 어떤 장소에서 다시는 우리가 가 HTML 코드

X/HTML 태그를 우리 이용하기 위하여 피지 분리의 내용과 프레젠테이션?

은 분리의 내용과 프레젠테이션 도움이 되는 또한 대한 접근성/화면 독자는 사용자가?...고를 위한 프로그래머/개발자/디자이너?

해결책

를 정의할 때는 무엇입 콘텐츠 및 프레젠테이션,참조하여 HTML 문서로 데이터테이너입니다.그런 다음에서 다음 각 요소 및 특성:

는 특성/요소를 대표는 의미 있는 엔티티에서 내 데이터?
예를 들어 단어는 사  태그에서 굵은 단순히 표시할 목적으로 또는 추가하고 싶을 강조하는 데이터가?
내가 사용하여 적절한 특성/요소 속성을 나타내는 데이터의 유형을 대표하고 싶?
이후 나는 원하는 추가에 대한 강조는 특정 섹션을 사용해야  (을 의미하지 않는 이탤릭체,그 의미 강조하고 만들 수 있습니다 대담)또는  따라 수준의 강조했다.
내가 사용하여 특성/요소를 표시할 목적으로만?그렇다면,할 수 있는 요소를 제거하고 부모 요소를 사용하여 스타일 CSS?
때로는 표에 태그할 수 있는 단순히 교체하여 CSS 규칙에 부모 요소입니다.는 경우,표 꼬리표 요구를 제거할 수 있습니다.

후에 자신을 묻는 이러한 세 가지 간단한 질문,당신은 일반적으로 만들 수 있는 꽤 정보통된 결정을 내릴 수 있습니다.예를 들어:

원래 코드: <label for="name">Name:</label>

검사  태그...

는 특성/요소를 대표는 의미 있는 엔티티에서 내 데이터?
No,태그를 나타내지 않는 데이터 노드입니다.그것은 순전히 거기 있니다.

내가 사용하여 적절한 특성/요소 속성을 나타내는 데이터의 유형을 대표하고 싶?
 사용되는 프레젠테이션의 대담한 요소입니다.

내가 사용하여 특성/요소를 표시할 목적으로만?그렇다면,할 수 있는 요소를 제거하고 부모 요소를 사용하여 스타일 CSS?
이  은 표 나는 그것을 사용하여 프리젠테이션,그렇습니다.그리고 이후  소 전체에 영향을 미치는 <label>, 을 제거 할 수 있습니다,그리고 스타일에 적용될 <label>.

의미 HTML 의 목표는 디자인을 단순화 및 재설계나 방지하는 인라인 스타일,그러나 도움을 파서 무엇을 이해하는 특별한 태그를 나타내에서 당신의 문서입니다. 는 방식으로,응용 프로그램을 만들 수 있습니다(즉,.:검색 엔진)을 지능적으로 무엇인지 결정의 내용을 의미하고 그것을 분류합니다.

따라서,이것을 사용하는 CSS 시설 content: 을 따옴표를 추가 주위의 텍스트에 위치한 이 <q> 표(그것은 아무 가치에 포함된 데이터를 다른 문서는 프레젠테이션),하지만 아무 의미를 동일하게 사용 CSS 속성을 추가©상징에서 당신의 바닥 글로 그것은 값을 갖고 있습니다.

동일하게 적용됩 특성이 있습니다.를 사용하는 width 고 height 특성에 <img> 태그를 나타내는 아이콘의 크기 16x16 은 의미의 감각으로 이해하는 것이 중요하의 의미 <img> 태그(아이콘이 서로 다르게 표시할 수 있습 크기에 따라 그것에 표시됩니다).를 사용하여 동일한 특성에 <img> 태그를 나타내는 썸네일의 큰 이미지지 않습니다.

때로는 당신이 필요합니다 추가 아닌 의미 요소를 달성할 수 있을 원하는 프레젠테이션하지만,일반적으로 사람들은 피할 수 있습니다.

없는지 잘못된 요소입니다.가 잘못 사용하의 특별한 요소입니다.  을 사용할 수 없습니다 추가 강조합니다.  에 사용해야 하는 법적 sub-텍스트,텍스트 작은(보 HTML5 섹션 4.6.4 왜),등등....모든 요소를 특정 사용 시나리오 그들은 모든 데이터를 나타내(마이너스 표상적인 요소이지만,그들은 분쇄기로 분쇄하거나 소각을 통하여 경우).없음 요소를 설정해야 합니다.

특성이 다른 것입니다.가장 속성이 표에서는 자연이다.과 같은 특성 <img border> 고 <body fgcolor> 거의 의미에서는 데이터를 나타내는 따라서 사용하지 않아야 합니다 그들을 제외하고(사람들에서 드문 경우).

검색 엔진은 좋은 예는 이유는 의미 있는 문서에 그렇게 중요합니다. 마이크로포맷 는 미리 정의된 요소의 설정 및 클래스를 사용할 수 있는 데이터를 나타내는 수색 엔진을 이해합니다. 제품 가격 정보를 Google 에서 검색 의 예입니다 의미에서 작동합니다.

를 사용하여 사전 정의된 규칙에서 설정한 표준 정보를 저장할 문서에서 허용한 타사 프로그램을 이해하는 것으로 보인다 무엇의 벽지 않고 텍스트를 사용하여 추론 알고리즘을하는 경향이있을 수 있습니다 실패입니다.그것은 또한 화면 독자들과 다른 접근 응용 프로그램을 더욱 쉽게 이해되는 상황에 정보가 표시됩니다.그것은 또한 크게 도움이 유지보수의 태그으로 모든 것은 연결 설정한 정의입니다.

다른 팁

가장 좋은 예는 아마도 CSS 젠 가든.

이 사이트의 목표는 CSS 기반 디자인으로 만 가능한 내용을 디자인에서 엄격하게 분리하여 가능한 것을 보여주는 것입니다. 다양한 그래픽 디자이너가 기여한 스타일 시트는 시각적 프레젠테이션을 변경하는 데 사용됩니다. 단일 HTML 파일의, 수백 가지의 다른 디자인을 생산합니다. HTML 마크 업 자체는 다른 디자인간에 결코 변하지 않습니다.

각 디자인 페이지에는 해당 디자인의 CSS 파일을 볼 수있는 링크가 있습니다.

내용 분리와 프레젠테이션의 실제 의미는 무엇입니까?

오히려 다소 콘크리트보다 디자인 철학입니다. 일반적으로 컨텐츠의 의미를 보존하고 컨텐츠를 구조화 된 정보로 생각해야한다는 것을 의미합니다. 또한 모든 미적 세부 사항을이 구조화 된 정보로부터 멀리해야한다는 것을 의미합니다.

인라인 CSS를 피하는 것이 의미입니까?

위에서 알 수 있듯이 인라인 스타일은 콘텐츠의 의미와 관련이 없으며 모든 비용으로 피해야합니다. 그러나 그렇지 않습니다 단지 저것.

디자인에 따라 HTML을 작성한 후 디자인을 변경하려면 CSS에만 있어야하는 경우 HTML이 필요하지 않은 경우입니다.

불행히도, 기본 마크 업을 수정하지 않고 구체적인 미적 목표를 달성하는 것이 항상 가능하지는 않습니다. CSS3는 이러한 문제를 해결하는 것이 최선입니다.

컨텐츠와 프리젠 테이션의 분리를 유지하기 위해 사용하지 않기 위해 어떤 X/HTML 태그를 사용해야합니까?

더 이상 사용되지 않은 태그를 찾으십시오 W3C HTML 4.01 / XHTML 1.0 참조

컨텐츠와 프레젠테이션의 분리가 액세스 가능성/스크린 리더 사용자에게도 도움이됩니까?

확실히. 특정 브라우저가 스타일을 잘못 렌더링하거나 전혀 렌더링하지 않더라도 더 나은 구조화 된 정보는 일반적으로 읽을 수 있습니다. 이러한 콘텐츠는 인쇄 매체에서 더 적절하게 보일 수 있습니다 (인쇄 스타일은 더 나은 미학을 달성하기 위해 적용될 수 있지만, 컨텐츠 의미와는 아무런 관련이 없습니다).

컨텐츠와 프레젠테이션의 분리가 프로그래머/개발자/디자이너에게도 도움이됩니까?

물론. 내용과 프레젠테이션의 분리는보다 일반적인 철학, 우려의 분리에서 뿌리를 내립니다. 모든 사람은 분리로부터 혜택을받습니다. 컨텐츠 공급 업체는 훌륭한 디자이너 일 필요는 없으며 그 반대도 마찬가지입니다.

에 넣어 줄 바꿈에서 특정 포인트는 피할 수없는,일반적으로 몇 가지 중복의 프레 젠 테이션과 내용입니다.당신은 항상 목표에 대한 완벽한 분리하지만.

다른 극단적인:가 포함된 페이지의 테이블에 사용되는 레이아웃만을 목적으로 합니다.이것은 명확한 anti-패턴 피해야 하는 모든 비용에.콘텐츠 재생은 두 번째 바이올린 후에 레이아웃을 여기에서;그것은 종종하지 않은 올바른 순서로 거기 있습니다.지 않는 기계로 읽을 수 있는 컨텐츠 접근성에 나쁜 나쁜 페이지의 검색 엔진은 순위가 있습니다.

표시하여 콘텐츠에 대 한 우려 없이 프레젠테이션,당신이 가장 먼저 만들기 기계를 읽을 수 있습니다.당신은 또한 다음에서 위치를 동일한 콘텐츠를 게시하는 다른 클라이언트가 다른 형식으로 말하 모바일에서 최적화된 버전입니다.을 변경할 수도 있습니다 프레젠테이션에 쉽게 혼란하지 않고 HTML 파일을 말한 재설계입니다.

오는 또 다른 혜택으로써 자연스럽게 분리하는 콘텐츠 및 프레젠테이션(HTML CSS 파일)를 당신이 덜 형식과 더 적은 유지하고,플러스 당신의 페이지할 수 있는 일관성 있는 스타일링을 적용한 매우 쉽습니다.반면 수천 개의 인라인 스타일 대중 하나는 스타일을 정의 중 하나에서 CSS 파일은"자연적으로"에 적용되는 모든 요소와 같은"의미"(태그).

이상적으로 귀하의(X)HTML 만으로 구성되어 있의 의미 있는 의미 있는 html and CSS 스타일을 사용하여 이에 대한 태그는 그것의 선택.현실 세계에서 당신은 종종 혼합 클래스와 Id 를 당신의 태그 추가하는 추가 의미하기 때문에,당신은 필요한 추가"갈"하는 스타일의 모든 것에 접근할 수 없습니다.그러나 여기에도 사이에 차이가 있다 class="blue right-aligned" 고 class="contact-info secondary".항상 추가 미 콘텐츠 아니라 스타일입니다.분산이 매우 예술에 자체입니다.:)

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

제휴하지 않습니다 StackOverflow