Tagi związane z tekstem

Ten artykuł wyjaśnia znaczniki związane z tekstem.

Wyjaśnienie jest podzielone na znaczniki semantyczne i niesemantyczne.

YouTube Video

Tworzenie CSS do podglądu

  1body {
  2    font-family: Arial, sans-serif;
  3    line-height: 1.6;
  4    margin: 20px 20px 20px 20px;
  5    background-color: #f4f4f9;
  6    color: #333;
  7}
  8
  9header h1 {
 10    font-size: 24px;
 11    color: #333;
 12    text-align: center;
 13    margin-bottom: 20px;
 14}
 15
 16h2, h3 {
 17    color: #555;
 18}
 19
 20h2 {
 21    font-size: 20px;
 22    border-bottom: 2px solid #ccc;
 23    padding-bottom: 5px;
 24}
 25
 26h3 {
 27    font-size: 18px;
 28    margin-top: 20px;
 29}
 30
 31p, pre {
 32    margin: 10px 0;
 33    padding: 0;
 34}
 35
 36ul, ol, dl, menu {
 37    margin: 0;
 38}
 39
 40pre {
 41    background-color: #f0f0f0;
 42    border-left: 4px solid #ccc;
 43    padding: 10px;
 44    overflow-x: auto;
 45}
 46
 47p.sample, .sample {
 48    background-color: #e7f4e9;
 49    padding: 10px;
 50    border-left: 4px solid #7bbd82;
 51    color: #333;
 52}
 53
 54p.sample-error, .sample-error {
 55    background-color: #f4e7e7;
 56    padding: 10px;
 57    border-left: 4px solid #bd827b;
 58    color: #333;
 59}
 60
 61p.sample-warn, .sample-warn {
 62    background-color: #f4f1e7;
 63    padding: 10px;
 64    border-left: 4px solid #bda97b;
 65    color: #333;
 66}
 67
 68code {
 69    padding: 2px 4px;
 70    border-radius: 4px;
 71    font-family: monospace;
 72}
 73
 74span {
 75    font-weight: bold;
 76}
 77
 78main {
 79    padding-bottom: 100px;
 80}
 81
 82article {
 83    background-color: white;
 84    padding: 20px;
 85    margin-bottom: 10px;
 86    border-radius: 8px;
 87    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 88}
 89
 90section {
 91    margin-bottom: 20px;
 92}
 93
 94table {
 95    width: 100%;
 96    border-collapse: collapse;
 97}
 98
 99th, td {
100    border: 1px solid #ddd;
101}

Podstawowe tagi związane z tekstem

Tag <div>

1<div>This is a division of content.</div>

• Tag <div> jest elementem blokowym używanym do tworzenia podziałów w HTML.

• Tag <div> jest tagiem niesemantycznym.

  Skupiając się na semantycznym HTML-u, można używać znaczących znaczników (takich jak <section>, <article>). To pomaga wyszukiwarkom i czytnikom ekranowym lepiej zrozumieć treść strony.

• Poprzez łączenie go z CSS i JavaScriptem, możesz kontrolować wygląd i zachowanie strony.

  Znacznik <div> jest używany do grupowania treści na stronie jako element blokowy. Jest głównie używany w połączeniu z CSS i JavaScript do dostosowywania układu strony, stylu i manipulacji elementami.

Tag <p>

1<p>This is a paragraph of text.</p>

• Znacznik <p> jest elementem używanym do definiowania akapitu w HTML. Znacznik <p> reprezentuje akapit i jest głównie używany do grupowania i wyświetlania tekstu. Pomaga to w ułatwieniu czytania treści poprzez wizualne oddzielenie sekcji tekstu.
• Nie można umieszczać innych elementów blokowych, takich jak inny znacznik <p> lub znacznik <div>, wewnątrz znacznika <p>. Jest to zabronione przez specyfikację HTML. Jeśli to zrobisz, przeglądarka automatycznie zamknie znacznik i nie wyświetli go poprawnie.

Tag <a>

1<a href="https://codesparklab.com" title="Code Spark Lab">Go to codesparklab.com</a>

• Znacznik <a> jest używany do tworzenia linków.

  Znacznik <a> jest używany do tworzenia linków do innych stron, zewnętrznych witryn lub plików. Atrybut href jest używany do określenia miejsca docelowego linku.

• Może być używany do linków tekstowych lub obrazkowych, a użycie target="_blank" otworzy link w nowej karcie.

• Atrybut target jest używany do określenia, jak docelowe łącze będzie wyświetlane.

  • _self (domyślnie): Otwiera łącze w bieżącym oknie lub karcie.
  • _blank: Otwiera łącze w nowym oknie lub karcie.
  • _parent: Otwiera łącze w ramce nadrzędnej.
  • _top: Otwiera łącze w całym oknie, ignorując wszelkie ramki.

• Atrybut title jest używany do wyświetlania podpowiedzi na linku. Gdy użytkownik najedzie kursorem na link, wyświetlana jest określona podpowiedź.

1<a href="#section1">Go to Section 1</a>
2
3<h2 id="section1">Section 1</h2>
4<p>This is Section 1 content.</p>

• Znacznik <a> jest również używany do skoków do określonych miejsc na tej samej stronie. Aby to osiągnąć, ustawiasz atrybut id na elemencie docelowym i używasz tego id w atrybucie href linku.

Tag <span>

1Here is some <span style="color: red;">highlighted text

• Tag <span> jest elementem liniowym.

  <span> to element liniowy, więc nie łamie linii, gdy jest używany między tekstem, linkami, obrazami lub innymi elementami liniowymi. Naturalnie wpasowuje się w przepływ strony.

• Możesz stosować określone style częściowo.

  Kiedy chcesz zastosować styl tylko do części dokumentu, możesz użyć tagu <span>, aby przypisać klasę CSS lub ID i zastosować style do określonego zakresu.

• Znacznik <span> jest elementem niesemantycznym.

  Ponieważ <span> nie ma określonego znaczenia ani roli strukturalnej, jest używany wyłącznie do celów stylizacji lub skryptowania. Gdy potrzebny jest semantyczny akcent, bardziej odpowiednie jest użycie znaczników semantycznych, takich jak <strong> lub <em>, które zostaną omówione później.

Znacznik <br>

1Here is some text with a <br> line break.

• Znacznik <br> jest elementem liniowym.

  Ponieważ <br> jest elementem liniowym, nie zajmuje całego bloku i wstawia przełamanie linii w miejscu, w którym jest umieszczony. Podczas gdy tag <p> dodaje marginesy powyżej i poniżej, aby oddzielić akapity, tag <br> tworzy przełamanie linii bez dodawania marginesów.

• Jest to znacznik samodomykający się, więc znacznik zamykający (</br>) nie jest potrzebny.

• Najlepiej unikać nadmiernego użytkowania i stosować tagi <p> lub CSS do podziału akapitów lub dostosowań układu.

  Podczas organizowania tekstu w akapity bardziej odpowiednie jest użycie znacznika <p>. Zaleca się również używanie CSS do dostosowywania układu. Na przykład stosowanie właściwości white-space w CSS może wyświetlać przełamania linii i spacje w tekście tak, jak się pojawiają.

Znacznik <hr>

1This is some text.<hr>This is another section of text.

• Tag <hr> jest elementem na poziomie bloku.

  Tag <hr> służy do wstawiania poziomej linii w celu wizualnego oddzielenia sekcji treści. Może być również używany do oznaczenia przerwy tematycznej, nadając jej znaczenie w zależności od kontekstu.

• Jest to znacznik samozamykający, więc zamykający znacznik (</hr>) nie jest konieczny.

• Możesz dostosować jego kolor, długość i grubość za pomocą CSS.

Znaczniki semantyczne związane z tekstem

Od znacznika <h1> do znacznika <h6>

1<h1>Main Heading</h1>
2<h2>Subheading</h2>
3<h3>Sub-subheading</h3>

• Tagi <h1> do <h6> to znaczniki nagłówków używane w HTML.

  Tag <h1> oznacza najważniejszy nagłówek i jest zazwyczaj używany jako główny tytuł całej strony. Zazwyczaj używa się tylko jednego tagu <h1> na dokument HTML.

  Znacznik <h2> to kolejny najważniejszy nagłówek po <h1> i jest używany dla tytułów sekcji lub rozdziałów na stronie.

  Tag <h3> oznacza podtytuły lub mniejsze sekcje pod <h2>.

  Tagi <h4>, <h5> i <h6> oznaczają nagłówki niższego poziomu, używane dla bardziej szczegółowych elementów lub tytułów sekcji.

• Znaczniki nagłówków wskazują na ważność tekstu i pomagają tworzyć logiczną strukturę strony. Wyszukiwarki również używają znaczników nagłówków, aby zrozumieć treść strony.

Znacznik <strong>

1<strong>Important text</strong> to emphasize significance.

• Znacznik <strong> to znacznik HTML używany do wskazywania ważności lub podkreślenia tekstu, który zazwyczaj jest wyświetlany pogrubioną czcionką.

• Znacznik <strong> to znacznik semantyczny, którego głównym celem jest dodanie znaczenia.

  Może wskazywać, że tekst jest ważny w kontekście. Na przykład, może pokazać ważność tekstu dla wyszukiwarek, co czyni go użytecznym dla SEO. Również przekazuje ważność tekstu użytkownikom korzystającym z czytników ekranu. Z drugiej strony, znacznik <b>, który zostanie wprowadzony później, to po prostu znacznik do pogrubiania tekstu i nie nadaje semantycznego podkreślenia.

Tag <em>

1<em>Emphasized text</em> for italics and emphasis.

• Znacznik <em> to znacznik HTML używany do wskazywania ważności lub podkreślenia w tekście, który zazwyczaj jest wyświetlany kursywą.

• Znacznik <em> to znacznik semantyczny, którego głównym celem jest nadanie znaczenia.

  Podobnie jak znacznik <strong>, może wskazywać, że tekst jest ważny w kontekście. Znacznik <strong> jest zazwyczaj wyświetlany pogrubioną czcionką, podczas gdy znacznik <em> jest zazwyczaj wyświetlany kursywą. Oba są rozpoznawane przez czytniki ekranu i wyszukiwarki jako semantyczne podkreślenie, ale <strong> wskazuje na większą ważność, podczas gdy <em> przekazuje emocjonalne podkreślenie. Dodatkowo, znacznik <i>, który zostanie wprowadzony później, po prostu kursywuje tekst i nie nadaje semantycznego podkreślenia.

Tag <mark>

1<mark>Highlighted text</mark> for attention.

• Znacznik <mark> jest używany do wskazywania, że określony tekst jest ważny w kontekście. Jest przydatny do podkreślania wyników wyszukiwania lub kluczowych punktów.
• Domyślnie tekst w tagu <mark> jest wyświetlany z żółtym tłem, co wizualnie podkreśla jego ważność.

Tag <del>

1<del>Deleted text</del> shows removed content.

• Znacznik <del> jest używany do wskazywania, że tekst został usunięty lub zmodyfikowany. Ten znacznik jest przydatny do pokazywania historii zmian lub poprawek tekstu.

• Tekst objęty znacznikiem <del> jest zazwyczaj wyświetlany z przekreśleniem. To wizualnie wskazuje na usuniętą treść.

  Tekst objęty znacznikiem <del> jest również rozpoznawany jako usunięty przez czytniki ekranu. To umożliwia zrozumienie treści, które nie są wizualnie widoczne.

Tag <ins>

1<ins>Inserted text</ins> shows added content.

• Znacznik <ins> jest używany do oznaczania nowo dodanego lub zmodyfikowanego tekstu w dokumencie. Ten znacznik jest przydatny do pokazywania historii dodawania lub zmian w tekście.

• W przeglądarkach tekst otoczony znacznikiem <ins> jest zazwyczaj wyświetlany z podkreśleniem. Wizualnie wskazuje to dodaną treść.

  Tekst otoczony znacznikiem <ins> jest również rozpoznawany jako nowo dodany przez czytniki ekranu. To umożliwia zrozumienie treści, które nie są wizualnie widoczne.

Tag <abbr>

1<abbr title="World Health Organization">WHO</abbr>

• Znacznik <abbr> jest elementem liniowym używanym do oznaczania skrótów lub akronimów. Użycie tego znacznika zapewnia pełne znaczenie skrótów i przyczynia się do poprawy SEO i dostępności. Szczególnie pomaga czytelnikom nieznającym skrótu i użytkownikom czytników ekranu lepiej zrozumieć jego treść.

Tagi związane z dekoracją tekstu

Tag <b>

1<b>Bold text</b> without semantic emphasis.

• Znacznik <b> jest elementem liniowym używanym do pogrubiania tekstu. Podobnie jak inne znaczniki, które przedstawimy, jest używany do wizualnego wyróżnienia, ale nie do semantycznego podkreślenia.

Tag <i>

1<i>Italic text</i> for style.

• Znacznik <i> jest elementem liniowym używanym do pisania tekstu kursywą.

Znacznik <u>

1<u>Underlined text</u> for decoration.

• Znacznik <u> jest elementem liniowym używanym do podkreślania tekstu.

Znacznik <small>

1<small>This is small text.</small>

• Znacznik <small> to element liniowy używany do wyświetlania tekstu w mniejszym rozmiarze. Jest powszechnie używany do przedstawiania dodatkowych informacji lub adnotacji, które są drugorzędne wobec głównej treści.

Znacznik <s>

1<s>Strikethrough text</s>

• Znacznik <s> jest elementem liniowym używanym do przekreślania tekstu linią.

Znacznik <sub>

1H<sub>2</sub>O

• Znacznik <sub> to element liniowy używany do wyświetlania tekstu w indeksie dolnym.

Znacznik <sup>

1E = mc<sup>2</sup>

• Znacznik <sup> to element liniowy używany do wyświetlania tekstu w indeksie górnym.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video