Mga tag na nauugnay sa teksto

Ang artikulong ito ay nagpapaliwanag tungkol sa mga tag na may kinalaman sa teksto.

Ang paliwanag ay nahahati sa semantic at non-semantic na mga tag.

YouTube Video

Paglikha ng CSS para sa preview

  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}

Pangunahing mga tag na nauugnay sa teksto

<div> na tag

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

• Ang <div> na tag ay isang block-level na elemento na ginagamit upang lumikha ng mga dibisyon sa loob ng HTML.

• Ang <div> na tag ay isang non-semantic na tag.

  Kapag nakatuon sa semantic HTML, maaaring gamitin ang mga makahulugang tag (tulad ng <section>, <article>). Nakakatulong ito sa mga search engine at screen reader na mas maunawaan ang nilalaman ng pahina.

• Sa pamamagitan ng pagsasama nito sa CSS at JavaScript, maaari mong kontrolin ang hitsura at asal ng pahina.

  Ang <div> tag ay ginagamit upang ipangkat ang nilalaman sa isang pahina bilang isang block-level na elemento. Ito ay pangunahing ginagamit kasama ng CSS at JavaScript upang ayusin ang layout ng pahina, estilo, at manipulahin ang mga elemento.

<p> na tag

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

• Ang <p> tag ay isang elemento na ginagamit upang tukuyin ang isang talata sa HTML. Ang <p> ay kumakatawan sa isang talata at pangunahing ginagamit upang ipangkat at ipakita ang teksto. Nakakatulong ito upang gawing mas madaling basahin ang nilalaman sa pamamagitan ng visual na paghihiwalay ng mga seksyon ng teksto.
• Hindi mo maaaring ilagay ang ibang block-level na mga elemento tulad ng isa pang <p> tag o isang <div> tag sa loob ng isang <p> tag. Ito ay ipinagbabawal ng HTML na pamantayan. Kung gagawin mo ito, awtomatikong isasara ng browser ang tag, at hindi ito wastong ipapakita.

<a> na tag

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

• Ang <a> tag ay ginagamit upang lumikha ng mga link.

  Ang <a> tag ay ginagamit upang lumikha ng mga link sa ibang mga pahina, panlabas na mga site, o mga file. Ang href attribute ay ginagamit upang tukuyin ang destinasyon ng link.

• Ito ay maaaring gamitin para sa mga link ng teksto o imahe, at ang paggamit ng target="_blank" ay magbubukas ng link sa isang bagong tab.

• Ang target na attribute ay ginagamit upang tukuyin kung paano ipapakita ang naka-link na destinasyon.

  • _self (default): Binubuksan ang link sa kasalukuyang window o tab.
  • _blank: Binubuksan ang link sa bagong window o tab.
  • _parent: Binubuksan ang link sa parent frame.
  • _top: Binubuksan ang link sa buong window, hindi pinapansin ang anumang frame.

• Ang title attribute ay ginagamit upang magpakita ng tooltip sa isang link. Kapag ang isang user ay nag-hover sa link, ang tinukoy na pamagat ay ipinapakita.

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>

• Ang <a> tag ay ginagamit din upang tumalon sa mga tiyak na lokasyon sa loob ng parehong pahina. Upang magawa ito, magtakda ng isang id attribute sa target na elemento at gamitin ang id na ito sa href attribute ng link.

<span> na tag

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

• Ang <span> na tag ay isang inline na elemento.

  Ang <span> na tag ay isang inline na elemento, kaya't hindi ito nagbe-break ng linya kapag ginamit sa pagitan ng teksto, mga link, mga imahe, o iba pang mga inline na elemento. Ito ay natural na umaakma sa daloy ng pahina.

• Maaari mong ilapat ang tiyak na mga estilo sa bahagi lang.

  Kapag gusto mong mag-apply ng estilo sa isang bahagi lamang ng dokumento, maaari mong gamitin ang <span> na tag upang mag-assign ng CSS class o ID at mag-apply ng mga estilo sa isang partikular na saklaw.

• Ang <span> na tag ay isang di-semantikong elemento.

  Dahil ang <span> na tag ay walang tiyak na kahulugan o estruktural na papel, ito ay ginagamit lamang para sa mga styling o scripting na layunin. Kapag kailangan ng semantic na diin, mas angkop gumamit ng mga semantic na tag tulad ng <strong> o <em>, na ipapaliwanag mamaya.

<br> na tag

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

• Ang <br> na tag ay isang inline na elemento.

  Dahil ang <br> na tag ay isang inline na elemento, hindi nito kinukuha ang buong bloke, at ito ay lumilikha ng line break sa teksto kung saan ito inilalagay. Habang ang <p> na tag ay nagdaragdag ng margin sa itaas at ibaba upang paghihiwalayin ang mga talata, ang <br> na tag ay lumilikha ng line break nang hindi nagdaragdag ng anumang margin.

• Ito ay isang self-closing na tag, kaya hindi kinakailangan ng closing tag (</br>).

• Mas mainam na iwasang magamit ito ng labis, at gumamit ng <p> na mga tag o CSS para sa paghahati ng talata o pag-aayos ng layout.

  Kapag nag-aayos ng teksto sa mga talata, mas angkop gumamit ng <p> na tag. Inirerekomenda rin na gumamit ng CSS para sa pag-aayos ng layout. Halimbawa, gamit ang white-space na property sa CSS ay maaaring ipakita ang mga line break at espasyo sa teksto kung paano sila lumilitaw.

<hr> na tag

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

• Ang <hr> na tag ay isang block-level na elemento.

  Ang <hr> na tag ay ginagamit upang magpasok ng isang pahalang na linya upang biswal na paghihiwalayin ang mga seksyon ng nilalaman. Maaari rin itong gamitin upang ipahiwatig ang isang temang pahinga, na nagbibigay dito ng kahulugan batay sa konteksto.

• Ito ay isang self-closing na tag, kaya't hindi kinakailangan ang closing tag (</hr>).

• Maaari mong i-customize ang kulay, haba, at kapal nito gamit ang CSS.

Mga semantikong tag na may kaugnayan sa teksto

Mula sa <h1> na tag hanggang sa <h6> na tag

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

• Ang mga <h1> hanggang <h6> na mga tag ay mga heading na ginamit sa HTML.

  Ang <h1> na tag ay kumakatawan sa pinakamahalagang heading at karaniwang ginagamit bilang pangunahing pamagat ng buong pahina. Karaniwan ang paggamit lamang ng isang <h1> na tag sa bawat dokumentong HTML.

  Ang <h2> na tag ay ang sunod na pinakamahalagang heading pagkatapos ng <h1> at ginagamit para sa mga pamagat ng seksyon o kabanata sa loob ng pahina.

  Ang <h3> na tag ay kumakatawan sa mga subtitle o mas maliliit na seksyon sa ilalim ng <h2>.

  Ang <h4>, <h5>, at <h6> na mga tag ay kumakatawan sa mga lower-level na heading, na ginagamit para sa mas detalyadong mga item o pamagat ng seksyon.

• Ang mga heading tag ay nagpapahiwatig ng kahalagahan ng teksto at nakakatulong sa paglikha ng lohikal na istruktura ng isang pahina. Gumagamit din ang mga search engine ng mga heading tag upang maunawaan ang nilalaman ng pahina.

<strong> na tag

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

• Ang <strong> tag ay isang HTML tag na ginagamit upang ipakita ang kahalagahan o diin ng teksto at karaniwang ipinapakita ito sa bold.

• Ang <strong> tag ay isang semantic tag, at ang pangunahing layunin nito ay upang magdagdag ng kahulugan.

  Maaari nitong ipakita na ang teksto ay may kahalagahan sa konteksto. Halimbawa, maaari nitong ipakita ang kahalagahan ng teksto sa mga search engine, na ginagawa itong kapaki-pakinabang para sa SEO. Ipinapakita rin nito ang kahalagahan ng teksto sa mga gumagamit na may screen readers. Sa kabilang banda, ang <b> tag, na tatalakayin sa ibang pagkakataon, ay simpleng tag upang gawing bold ang teksto at hindi ito nagbibigay ng semantic na diin.

<em> na tag

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

• Ang <em> tag ay isang HTML tag na ginagamit upang ipakita ang kahalagahan o diin sa teksto at karaniwan itong ipinapakita sa italics.

• Ang <em> tag ay isang semantic tag, at ang pangunahing layunin nito ay magbigay ng kahulugan.

  Tulad ng <strong> tag, maaari nitong ipakita na ang teksto ay may kahalagahan sa konteksto. Ang <strong> tag ay karaniwang nasa bold, habang ang <em> tag ay karaniwang nasa italics. Parehong kinikilala ng mga screen reader at search engine para sa semantic na diin, ngunit ang <strong> ay nagpapakita ng mas matinding kahalagahan, habang ang <em> ay nagpapakita ng emosyonal na diin. Dagdag pa rito, ang <i> tag, na tatalakayin sa ibang pagkakataon, ay basta gawing italics ang teksto at hindi ito nagbibigay ng semantic na diin.

<mark> na tag

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

• Ang <mark> tag ay ginagamit upang ipakita na ang tiyak na teksto ay may kahalagahan sa konteksto. Kapaki-pakinabang ito para sa pag-highlight ng mga resulta ng paghahanap o mahahalagang punto.
• Sa default, ang teksto na nasa loob ng <mark> na tag ay ipinapakita na may dilaw na background, na biswal na binibigyang-diin ang kahalagahan nito.

<del> na tag

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

• Ang <del> tag ay ginagamit upang ipakita na ang teksto ay nabura o binago. Ang tag na ito ay kapaki-pakinabang para sa pagpapakita ng kasaysayan ng mga pagbabago o rebisyon sa teksto.

• Ang teksto na nasa loob ng <del> tag ay karaniwang ipinapakita na may strikethrough. Ipinapakita nito sa biswal ang tinanggal na nilalaman.

  Ang teksto na nasa loob ng <del> tag ay kinikilala rin na tinanggal ng mga screen reader. Ito ay nagpapahintulot sa nilalaman na hindi agad nakikita upang maunawaan pa rin.

<ins> na tag

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

• Ang <ins> na tag ay ginagamit upang ipakita ang bagong idinagdag o binagong teksto sa isang dokumento. Ang tag na ito ay kapaki-pakinabang para ipakita ang kasaysayan ng pagdaragdag at pagbabago ng teksto.

• Sa mga browser, ang tekstong nakapaloob sa <ins> na tag ay karaniwang ipinapakita na may salungguhit. Ito ay biswal na nagpapahiwatig ng idinagdag na nilalaman.

  Ang tekstong nakapaloob sa <ins> na tag ay kinikilala rin bilang bagong idinagdag ng mga screen reader. Ito ay nagpapahintulot sa nilalaman na hindi agad nakikita upang maunawaan pa rin.

<abbr> na tag

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

• Ang <abbr> na tag ay isang inline na elemento na ginagamit upang ipakita ang mga daglat o akronim. Ang paggamit ng tag na ito ay nagbibigay ng buong kahulugan ng mga daglat at nakakatulong sa pagpapabuti ng SEO at accessibility. Ito ay lalong nakakatulong sa mga mambabasa na hindi pamilyar sa daglat at sa mga gumagamit ng screen reader upang mas maunawaan ang nilalaman nito.

Mga tag na may kaugnayan sa palamuti ng teksto

<b> na tag

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

• Ang <b> na tag ay isang inline na elemento na ginagamit upang gawing bold ang teksto. Tulad ng iba pang tag na aming ipapakilala, ito ay ginagamit para sa pansariling pag-emphasize ng teksto at hindi para sa semantic na pag-eemphasize.

<i> na tag

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

• Ang <i> na tag ay isang inline na elemento na ginagamit upang gawing italic ang teksto.

<u> na tag

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

• Ang <u> na tag ay isang inline na elemento na ginagamit upang magsalungguhit ng teksto.

<small> na tag

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

• Ang <small> na tag ay isang inline na elemento na ginagamit upang ipakita ang teksto sa mas maliit na sukat. Ito ay karaniwang ginagamit upang ipakita ang karagdagang impormasyon o anotasyon na pangalawa sa pangunahing nilalaman.

<s> na tag

1<s>Strikethrough text</s>

• Ang <s> na tag ay isang inline na elemento na ginagamit upang gumuhit ng guhit sa ibabaw ng teksto.

<sub> na tag

1H<sub>2</sub>O

• Ang <sub> na tag ay isang inline na elemento na ginagamit upang ipakita ang subscript na teksto.

<sup> na tag

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

• Ang <sup> na tag ay isang inline na elemento na ginagamit upang ipakita ang superscript na teksto.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video