Jakie jest rzeczywiste znaczenie oddzielenia treści i prezentacji?

Question

Jakie jest rzeczywiste znaczenie oddzielenia treści i prezentacji?

Czy to po prostu unikać wbudowanego css?

Czy to oznacza, że ​​projekt powinien być w stanie manipulować bez zmiany kodu HTML?

Czy naprawdę możemy dokonać jakiejkolwiek zmiany w projekcie tylko z CSS?

• Jeśli chcemy zmienić rozmiar obrazów wtedy będziemy musieli iść w HTML kod
• Jeśli wan dodać jeszcze jeden podział wiersza w ust potem znowu będziemy iść do w kodzie HTML
• Jeśli chcemy dodać jeszcze jeden separator w pewnym miejscu, potem znowu będziemy mieć iść w kodzie HTML

którym X/tag HTML powinniśmy unikać nas e zachować separację treści i prezentacji?

Czy separacja treści i prezentacji jest również przydatna dla użytkowników korzystających z ułatwień dostępu/czytników ekranu? ... i dla programisty/programisty/projektanta?

Answer 1

Podczas definiowania treści i prezentacji należy zapoznać się z dokumentem HTML jako kontenerem danych. Następnie należy zadać sobie następujące na każdego elementu i atrybutu:

• Czy atrybut/elementu stanowią znaczący podmiot moich danych? Czy na przykład słowa między tagiem <b> są wytłuszczone po prostu w celach wyświetlania lub czy chcę dodać nacisk na te dane?

• Czy używam właściwego atrybutu/elementu do właściwości reprezentuje typ danych, które chcę reprezentować?
  Ponieważ chcę dodać nacisk na tę sekcję, powinienem użyć <em> (nie oznacza to kursywy, oznacza to nacisk i można pogrubić) lub <strong> w zależności od pożądanego poziomu nacisku.

• Czy używam tego atrybutu/elementu tylko do celów wyświetlania? Jeśli tak, czy element można usunąć, a element nadrzędny stylizować za pomocą CSS?
  Czasami znacznik prezentacji można po prostu zastąpić regułami CSS na elemencie nadrzędnym.W takim przypadku tag prezentacji musi zostać usunięty.

Po zadaniu sobie tych trzech prostych pytań, zazwyczaj można podjąć świadomą decyzję. Przykład:

Original Kod: <label for="name"><b>Name:</b></label>

Sprawdzanie tag <b> ...

Czy atrybut/elementu stanowią znaczący podmiot moich danych?
Nie, znacznik nie reprezentuje węzła danych. Jest tam wyłącznie do prezentacji.

Czy używam właściwego atrybutu/elementu do właściwości reprezentuje typ danych, które chcę reprezentować?
<b> służy do prezentacji pogrubionych elementów.

Czy używam tego atrybutu/elementu tylko do celów wyświetlania? Jeśli tak, czy element można usunąć, a element nadrzędny stylizować za pomocą CSS?
Ponieważ <b> jest prezentacyjny i używam go do prezentacji, tak. Ponieważ element <b> wpływa na cały obiekt <label>, można go usunąć i zastosować do stylu <label>.

semantyczna celem HTML jest nie do uproszczenia projektowania i przebudowy lub w celu uniknięcia inline stylizacji, ale aby pomóc parser zrozumieć, co to zwłaszcza tag reprezentacji w dokumencie. W ten sposób można tworzyć aplikacje (np .: wyszukiwarka), aby inteligentnie zdecydować, co oznacza treść i odpowiednio ją sklasyfikować.

Dlatego warto użyć własności CSS content:, aby dodać cytaty dotyczące tekstu znajdującego się w tagu <q> (nie ma to wartości dla danych zawartych w dokumencie innej prezentacji), ale nie ma sensu korzystanie z tego samego Właściwość CSS, aby dodać symbol © w stopce, ponieważ ma wartość w danych.

To samo dotyczy atrybutów. Używanie atrybutu width i height w znaczniku <img> reprezentującym ikonę o rozmiarze 16x16 ma sens semantyczny, ponieważ ważne jest zrozumienie znaczenia znacznika <img> (ikona może mieć różne reprezentacje w zależności od rozmiaru, w jakim jest wyświetlana). Używanie tych samych atrybutów na znaczniku <img>, co oznacza miniaturę większego obrazu, nie jest.

Czasami trzeba dodać elementy nieantantyczne, aby osiągnąć pożądaną prezentację, ale zazwyczaj można tego uniknąć.

Nie ma złych elementów. Istnieją niewłaściwe zastosowania poszczególnych elementów. <b> nie powinno być używane podczas dodawania podkreśleń. <small> należy używać dla legalnego podtekstu, aby tekst nie był mniejszy (patrz: HTML5 - Section 4.6.4), itp. Wszystkie elementy mają określony scenariusz użycia i wszystkie one reprezentują dane (minus elementy prezentacji, ale mają zastosowanie w niektóre przypadki). Żadnych elementów nie należy odkładać na bok.

Atrybuty to zupełnie inna sprawa.Większość atrybutów ma charakter prezentacyjny. Atrybuty takie jak <img border> i <body fgcolor> rzadko mają znaczenie w danych, które reprezentujesz, dlatego nie powinieneś ich używać (z wyjątkiem tych rzadkich przypadków).

---

Wyszukiwarki są dobrym przykładem tego, dlaczego dokumenty semantyczne są tak ważne. Microformats to predefiniowany zestaw elementów i klas, które można wykorzystać do reprezentowania danych, które wyszukiwarki będą rozumiały w określony sposób. The product price information in Google Searches jest przykładem semantyki w pracy.

Stosowanie wstępnie zdefiniowanych reguł w ustawionych standardach do przechowywania informacji w dokumencie umożliwia programom zewnętrznym zrozumienie, co wydaje się być ścianą tekstu bez użycia algorytmów heurystycznych, które mogą być podatne na awarie. Pomaga to także czytnikom ekranu i innym aplikacjom ułatwiającym dostęp w łatwiejszy sposób zrozumieć kontekst, w którym prezentowane są informacje. Znacznie pomaga to w utrzymaniu twojego znacznika, ponieważ wszystko jest powiązane z definicją zestawu.

Answer 2

Najlepszym przykładem jest prawdopodobnie CSS Zen Garden.

Celem tej witryny jest pokazanie, co jest możliwe tylko przy projektowaniu opartym na CSS, przy ścisłym oddzieleniu treści od projektu. Arkusze stylów dostarczone przez różnych grafików służą do zmiany prezentacji wizualnej, tworząc setki różnych projektów. Sam znacznik HTML nigdy nie zmienia się między różnymi projektami.

Na każdej stronie projektu znajduje się link do wyświetlenia pliku CSS tego projektu.

Answer 3

Wstawianie przerw w linii w pewnych punktach jest nieuniknione, zazwyczaj zachodzą na siebie części prezentacji i treści. Zawsze powinieneś dążyć do idealnej separacji.

Przejdźmy do drugiej skrajności: strony zawierającej ładunki i mnóstwo tabel używanych wyłącznie do celów układu. Jest to zdecydowanie anty-wzór, którego należy unikać za wszelką cenę. Treść odtwarza drugie skrzypce po układzie; często nie jest we właściwej kolejności, a przez to prawie nie nadaje się do odczytu maszynowego. Treści nieodczytywalne maszynowo są złe pod względem dostępności i zła w rankingu wyszukiwarki stron.

Dzięki oznaczaniu zawartości bez obaw o prezentację, przede wszystkim sprawiasz, że jest ona odczytywana maszynowo. Następnie możesz wyświetlać tę samą treść różnym klientom w różnych formatach, na przykład w wersji zoptymalizowanej pod kątem urządzeń przenośnych. Możesz także łatwo zmienić prezentację bez konieczności bałagania z plikami HTML, na przykład w przypadku dużego przeprojektowania.

Inną korzyścią, która naturalnie wynika z oddzielenia treści i prezentacji (pliki HTML-CSS) jest to, że masz mniej do pisania i mniej do utrzymania, a twoje strony mogą mieć bardzo spójną stylizację. Kontrastuje tysiące stylów wbudowanych z jedną definicją stylu w jednym pliku CSS, który jest "naturalnie" stosowany do wszystkich elementów o tym samym "znaczeniu" (znaczniki).

Idealnie twój (X) HTML składa się tylko z znaczących, semantycznych znaczników i twojego CSS stylów używających tego znacznika dla jego selektorów. W prawdziwym świecie często łączysz klasy i identyfikatory ze znacznikami, które nie mają żadnego dodatkowego znaczenia, ponieważ potrzebujesz tych dodatkowych "haczyków", aby stylować wszystko tak, jak chcesz. Ale nawet tutaj istnieje różnica między class="blue right-aligned" i class="contact-info secondary". Zawsze staraj się dodać , co oznacza do treści, a nie do stylu. Równoważenie tego jest sztuką samą w sobie. :)

Answer 4

Jakie jest rzeczywiste znaczenie oddzielenia treści i prezentacji?

To raczej filozofia projektowania niż nieco konkretna. Ogólnie oznacza to, że należy zachować semantykę treści, myśleć o treści jako o ustrukturyzowanej informacji. Oznacza to również, że wszystkie te szczegóły estetyczne powinny pozostać niezmienione od tej uporządkowanej informacji.

czy to po prostu unikać wbudowanego css?

Jak zauważono powyżej, style śródliniowe nie mają nic wspólnego z semantyką treści i należy ich unikać za wszelką cenę. Ale to nie jest to.

jest to po prostu znaczy, jeśli po napisaniu html według zaprojektować a następnie, jeśli to jeśli chcemy robić żadnych zmian w projekcie to powinno być tylko z CSS, nie trzeba html

niestety, nie zawsze jest możliwe osiągnięcie konkretnych celów estetycznych bez modyfikowania podstawowego języka; CSS3 stara się rozwiązać te problemy.

Których znaczników X/HTML należy unikać, aby zachować separację treści i prezentacji?

Spójrz na nieaktualnych znaczników w W3C HTML 4.01/XHTML 1.0 Reference

jest oddzielenie treści i prezentacji również pomocne dla użytkowników czytników dostępność/screen?

Na pewno. Lepsze uporządkowane informacje zasadniczo pozostają czytelne, nawet jeśli niektóre przeglądarki renderują style niepoprawnie (lub nie renderują ich wcale). Treści takie mogą również wyglądać bardziej adekwatnie na nośnikach drukowanych (chociaż style drukowania mogą być stosowane w celu osiągnięcia jeszcze lepszej estetyki - nie mają one nic wspólnego z semantyką treści).

Czy separacja treści i prezentacji jest również pomocna dla programisty/programisty/projektanta?

Oczywiście. Oddzielenie treści od prezentacji bierze swój początek z bardziej ogólnej filozofii, oddzielenia obaw. Każdy korzysta z oddzielenia: dostawca treści nie musi być dobrym projektantem i na odwrót.