Elementy liniowe (ang. inline)

Nie mam natchnienia na wstęp. Ktoś rozwinie?

Elementy liniowe służą do oznaczania tekstu (nie tworzą bloków).

Skrót: <abbr> Bug w IE

Praktycznie takie samo zastosowanie miał element <acronym>, który został usunięty w (X)HTML5.

Wskazuje, że dane słowo jest skrótem lub skrótowcem. Użycie atrybutu title umożliwia podanie jego rozwinięcia, co ułatwia czytelnikowi (i wyszukiwarkom) zrozumienie tekstu. 

 <abbr title="et cetera (i tym podobne)">etc.</abbr>

 <abbr title="Komitet Gosudarstvennoy Bezopasnosti
 (Narodowy Komitet Bezpieczeństwa)">KGB</abbr>

Ten element zazwyczaj wyróżnia się nadając mu border-bottom: 1px dotted

Cytat: <q> Bug w IE

Fragmenty dłuższe niż 1-2 zdania najlepiej oznaczać przez <blockquote>

Oznacza cytowany krótki fragment. Za pomocą CSS można temu elementowi automatycznie dodawać cudzysłowy, nawet z uwzględnieniem cytatów w cytacie. 

 <p>10 lat po stwierdzeniu <q>640kB wystarczy każdemu</q> jego system operacyjny wymagał 64MB</p>

Można kontrolować sposób automatycznego dodawania cudzysłowów za pomocą CSS

Nawiązanie: <cite>

Element <cite> nie służy do cytowania wypowiedzi!

Przez <cite> oznacza się autora lub źródło cytatu (np. tytuł cytowanej/omawianej książki). 

 <p>Na podstawie <cite>specyfikacji W3C</cite>.</p>

Emfaza: <em> i silna emfaza: <strong>

Podkreślenie, wzmocnienie wyrazistości słowa, zdania. <em> ma mniejszy nacisk niż <strong>. 

 <strong>Nie wolno</strong> skakać do <em>pustego</em> basenu.

Choć domyślnie te elementy nadają pogrubienie i pochylenie tekstowi, nie powinny być używane tylko ze względu na wygląd, np. <p><strong>Tekst</strong></p> wygląda tak samo jak nagłówek, ale ma zupełnie inne znaczenie.

Kod: <code>

Używany do oznaczenia przykładowego kodu komputerowego. Często używany wewątrz <pre>. 

 <code>&lt;code&gt;</code>
 Znacznik <code> widoczny na stronie XHTML

Jeśli na stronie cytujesz fragmenty programów, użyj dodatkowo <pre>. Jeśli mieszasz wiele języków programowania, wykorzystaj atrybut class: <code class="html">, <code class="css">

Zmienna: <var>

Zmienna (komputerowa, matematyczna). Może być używany wewnątrz <code> lub samodzielnie. 

 Dwa razy <var>x</var>

Przydatny do wyróżniania (kolorowania) zmiennych w cytowanym kodzie.

Definicja: <dfn>

Jeśli w tekście jest objaśnienie terminu, można objaśniane słowo oznaczyć przez <dfn>.

Jeśli definiowane jest wiele terminów lepiej użyć listy definicji. Można połączyć jedno i drugie: 

  <dl>
      <dt><dfn>happiness</dfn> /'hæ pɪ nes/ <i><abbr title="noun (rzeczownik)">n.</abbr></i></dt>
      <dd>the state of being happy</dd>@H
  </dl>

Kombinacja klawiszy: <kbd>

Określa przykładowy tekst do wpisania lub skrót klawiszowy. 

 Wciśnij <kbd>Ctrl+Alt+Del</kbd>

Za pomocą CSS można elementowi <kbd> nadać wygląd podobny do klawiszy

Przykład: <samp>

Oznacza przykładowy wynik działania programu. W połączeniu z <kbd> może służyć do opisania dialogu użytkownika z komputerem. 

 Komunikat <samp>Czy na pewno sformatować dysk?</samp> potwierdź klikając <samp>Tak</samp> lub wciskając <kbd>Enter</kbd>.

Indeks dolny: <sub> i górny: <sup>

Stosuje się je w różnych przypadkach, gdy tekst wymaga zapisu z indeksem górnym i dolnym. 

 H<sub>2</sub>O

Czcionki zawierają specjalne znaki do popularnych symboli w górnym i dolnym indeksie (np. ², ³, ™), których lepiej użyć zamiast tych elementów. Do zapisu skomplikowanych wyrażeń matematycznych służy język MathML.

Oznaczanie zmian: <ins> i <del>

<ins> oznacza tekst, który został wstawiony, <del> tekst, który został (a właściwie ma zostać) usunięty. 

 Promocja! Nowy Bulbulator za jedyne <del>149</del> <ins>99</ins> złotych!

Inne

Drobny tekst: <small>

Ten element dostał nowe znaczenie w (X)HTML5.

Stosuje się go do opisu mało ważnego tekstu (przeciwieństwo <em> i <strong>) oraz prawniczego drobnego maczku. 

 <small>Klikając <samp>Akceptuję</samp> zgadzasz się przelać wszystkie swoje pieniądze na moje konto</small>

Reguła CSS small {font-size: 100%;} usunie domyślny wygląd <small>

Dowolny zakres: <span>

Blokowym odpowiednikiem <span> jest <div>

Gdy do zastosowania CSS potrzeba dodatkowych elementów w dokumencie, można zastosować element nic nie znaczący — <span>. 

 <span>Jakiś</span> <span>Faj</span><span>ny</span> <span>Tekst</span>

Innym zastosowaniem jest stworzenie własnych elementów do rzeczy, których HTML nie przewiduje: 

 <span class="norma">ISO</span>

Zamiast użycia <span> może być właściwszym nadanie klasy innemu elementowi, który ma choćby zbliżone znaczenie, np. <cite class="autor">, <samp class="przycisk">, <strong class="uwaga">, itd.

Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.

Elementy blokowe | Hipertekst
Zmodyfikowano: 29.08.2011, 12:05
submit