aside i section, oraz ciapki

0

Mam pytanie, bo w necie znalazłem sprzeczne informacje, a strona w3schools opisuje kwestie w za mało klarowny sposób.

Do czego dokładnie służą tagi <aside> i <section>?

<aside> rozumiem, że to treść poboczna od treści głównej, czyli jak mamy artykuł:
<article>
    <p>To jest glowna tresc artykulu</p>
    <aside>A to jest jakas uwaga dotyczaca artykulu, ale nie zwiazana bezposrednio z trescia</aside>
<article>

Fajnie, ale czy <aside> można także wykorzystywać, żeby tworzyć panele boczne, strony, którym dajemy np. float: left, czy użyć, czegoś innego (patrz kolejne pytanie).

<section> Oznacza sekcje. Czyli jak kiedyś pisałem:
   <div id="tresc_glowna"><!--ustatione na float right-->
       .....
   </div>
   <div id="panel_boczny"><!--ustawione na float right-->
      .....
   </div>

To teraz robię to samo:

   <section id="tresc_glowna"><!--ustatione na float right-->
       .....
   </section>
   <section id="panel_boczny"><!--ustawione na float right-->
      .....
   </section>

?

Czy można nie stosować już ciapków przy atrybutach (np. id=content)? Jeśli tak, to co z atrybutami, które są wymieniane po spacjach (np. class=klasa1 klasa2 klasa3)?

Kolejne pytanie to dotyczy zarówno HTML 4.01 jak i 5. Które użycie jest poprawniejsze i czemu:
selected="selected", czy po prostu selected?

Wydawałoby się na czuja, że selected="selected", ale to jest pozostałość po nieużywanym już XHTMLu, który mówił o tym, że każdy atrybut musi mieć swą wartość, tak więc, czy można użyć po prostu selected?

Ostatnie pytanie: czy tagi, które nie mają tagów zamykających, czyli
, <meta>, <input> trzeba domykać w sposób XHTLowy (
, <meta />, <input />)? Zdrowy rozsądek podpowiada, że nie, ale w Aptana Studio 3, gdy weźmie się tworzenie pustego szablonu HTML5 wszystkie te tagi są domknięte. :/

0
  1. aside to treść poboczna. Sidebar na przykład w stosunku do całej sekcji albo uwaga dotycząca artykułu. aside jest kontekstowa, więc w sam raz nadaje się do stworzenia paska bocznego, jeśli jest zawarta w body czy section;
  2. Mniej więcej tak :-) Ale section jest bardziej semantyczna, bo div jest "pusty";
  3. Chyba można, ale zalecam stosowanie ciapków, jest po prostu wygodniej i jaśniej;
  4. Można. Choć ja używam wersji XHTML-owej, bo mnie samo selected drażni;
  5. Nie trzeba domykać. Ale można. Ja tak na przykład robię z przyzwyczajenia.
0

Co mówi na ten temat standard:

  1. http://www.w3.org/TR/html5/the-aside-element.html#the-aside-element
4.4.5 The aside element napisał(a)

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.

Note: It's not appropriate to use the aside element just for parentheticals, since those are part of the main flow of the document.

A więc możemy wrzucić tam panel boczny jako aside w stosunku do całego dokumentu albo linki do podobnych artykułów w stosunku do artykułu.

  1. http://www.w3.org/TR/html5/the-section-element.html#the-section-element
4.4.2 The section element napisał(a)

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

Note: The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

A więc to co pokazałeś jest nieodpowiednim przykładem na użycie section. To nie jest zamiennik starego div, którego powinieneś używać zawsze wtedy, gdy chodzi ci tylko o ostylowanie, a nie semantykę. Standard podaje dobry rule of thumb: używaj wtedy, kiedy dana sekcja ma się pokazywać w outline dokumentu — jednocześnie powinna mieć jakiś nagłówek. Sprawdź sobie, jak wygląda layout twojej strony (np. tu: http://gsnedders.html5.org/outliner/) i sam oceń, czy to, co widzisz, ma sens.

  1. http://www.w3.org/TR/html5/syntax.html#attributes-0
8.1.2.3 Attributes napisał(a)

Attributes can be specified in four different ways:

Empty attribute syntax
Just the attribute name. The value is implicitly the empty string.

Unquoted attribute value syntax
The attribute name, followed by zero or more space characters, followed by a single U+003D EQUALS SIGN character, followed (blablabla...),
which (...) must not contain any literal space character [pogrubienie moje]

Single-quoted attribute value syntax
(...)

Double-quoted attribute value syntax
(...)

A więc mamy tak naprawdę cztery różne poprawne formy: atrybut pusty (z niejawną wartością pustego stringa), bez cudzysłowu, w pojedynczym cudzysłowie, w podwójnym cudzysłowie. Forma "bez" nie może zawierać spacji, więc class="klasa1 klasa2 klasa3" musi być w którejś z dwóch kolejnych form.

  1. http://www.w3.org/TR/html5/common-microsyntaxes.html#boolean-attributes
2.5.2 Boolean attributes napisał(a)

A number of attributes are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.

Note: The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

A więc mamy dwie dopuszczalne formy: pusty string (taką też wartość przyjmują puste atrybuty — patrz poprzedni punkt) i wartość odpowiadająca nazwie atrybutu (case-insensitive). Obydwie formy są tak samo poprawne, ale żadna inna już nie jest (nie można napisać selected="true").
Ja wolę pierwszą, bo jest zwięzła i nie trzeba się powtarzać.

  1. http://www.w3.org/TR/html5/syntax.html#void-elements oraz http://www.w3.org/TR/html5/syntax.html#syntax-start-tag
8.1.2 Elements napisał(a)

Void elements
area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

8.1.2.1 Start tags napisał(a)

Start tags must have the following format:
(...)
2. The next few characters of a start tag must be the element's tag name.
(...)
6. Then, if the element is one of the void elements [czyli to co wyżej] (...) then there may be a single U+002F SOLIDUS character (/).
This character has no effect on void elements. [pogrubienie moje]

A więc domykanie jest opcjonalne i nie ma absolutnie żadnego znaczenia.

1 użytkowników online, w tym zalogowanych: 0, gości: 1