HTML Block-level at Inline na Mga Elemento
Ipinaliwanag ng artikulong ito ang HTML block-level at inline na mga elemento.
Ipinaliliwanag nito ang mga pagkakaiba sa pagitan ng mga block-level na elemento at inline na elemento, pati na rin ang mga pangunahing block-level na elemento at inline na elemento.
YouTube Video
Mga elementong block-level at mga elementong inline
Ang HTML ay may dalawang pangunahing kategorya ng mga elemento na tumutukoy kung paano sila ipinapakita sa screen: 'mga block-level na elemento' at 'inline na mga elemento'. Ang mga elementong ito ay may mahalagang papel sa layout ng pahina at direktang nakakaapekto kung paano sila nai-posisyon. Dito, ipapaliwanag namin nang detalyado ang mga katangian at paggamit ng bawat elemento.
Ano ang block-level na elemento?
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Block-Level Elements Example</title>
7</head>
8<body>
9 <div>
10 <h1>This is a Block-Level Heading</h1>
11 <p>
12 This is a paragraph.
13 Block-level elements start on a new line and
14 take up the full width of their container.
15 </p>
16 </div>
17 <section>
18 <h2>Another Block-Level Section</h2>
19 <p>This is another paragraph inside a section element.</p>
20 </section>
21 <section>
22 <h2>Unordered List And Ordered List</h2>
23 <ul>
24 <li>List Item A</li>
25 <li>List Item B</li>
26 <li>List Item C</li>
27 </ul>
28 <ol>
29 <li>List Item 1</li>
30 <li>List Item 2</li>
31 <li>List Item 3</li>
32 </ol>
33 </section>
34</body>
35</html>Ang mga block-level na elemento ay karaniwang sumasakop sa buong lapad ng pahina at lumilitaw sa hiwalay na linya mula sa iba pang mga elemento. Ang mga elementong ito ay maaaring maglaman ng iba pang block-level o inline na mga elemento sa loob nila at naglalarawan ng mas malaking istruktura ng isang dokumento.
Mga Tampok:
- Ang mga elemento ay nagsisimula sa bagong linya at lumalawak upang sakupin ang pinakamaraming posibleng lapad (karaniwan ay ang buong lapad ng parent na elemento).
- Ang mga ito ay pinaghiwalay mula sa iba pang mga block na elemento nang patayo, na may mga margin sa pagitan nila.
- Maaari silang maglaman ng ibang mga bloke o inline na mga elemento sa loob nila.
Narito ang sumusunod na mga block-level na elemento na ginagamit:.
- Ang
<div>tag ay karaniwang ginagamit upang bumuo ng mga layout. - Ang
<p>tag ay ginagamit upang tukuyin ang isang talata. - Ang
<h1>hanggang<h6>ay mga elemento na ginagamit upang tukuyin ang mga pamagat. Ang<h1>ay ang pinakamalaking heading, at ang<h6>ang pinakamaliit. - Ang
<ul>na tag ay lumilikha ng isang unordered na listahan. - Ang
<ol>na tag ay lumilikha ng isang ordered na listahan. - Ang
<section>tag ay tumutukoy sa isang seksyon sa loob ng isang dokumento.
Ano ang isang elemento sa linya?
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Inline Elements Example</title>
7</head>
8<body>
9 <p>
10 This is a paragraph with
11 <a href="#">an inline link</a> and
12 <strong>some bold text</strong>.
13 </p>
14 <p>
15 You can also include <em>italicized text</em>,
16 an <img src="images/image.jpg" alt="Sample image" width="100">,
17 and a <span style="color: red;">styled span element</span>
18 within inline elements.
19 </p>
20</body>
21</html>Ang mga inline na elemento ay inilalagay sa parehong linya ng iba pang mga elemento at karaniwang kumukuha lamang ng lapad na naaayon sa kanilang nilalaman. Ang mga elementong ito ay itinuturing na bahagi ng teksto at, hindi tulad ng mga block-level na elemento, hindi nila sinasakop ang buong linya.
Mga Tampok:
- Lumilitaw ang mga elemento sa parehong linya at nakalagay sa tabi ng iba pang inline na mga elemento.
- Ang lapad ay tinutukoy ng nilalaman ng elemento (teksto o mga imahe).
- Maaari silang isama sa loob ng mga block-level na elemento, ngunit hindi sa kabaligtaran.
Narito ang sumusunod na inline na mga elemento na ginagamit:.
- Ang
<span>na tag ay ginagamit upang bigyang-diin ang isang bahagi ng teksto na may tiyak na estilo. - Ang
<a>tag ay tumutukoy sa isang hyperlink. - Ang
<img>tag ay isang elemento na ginagamit upang i-embed ang mga imahe. - Ang
<strong>ay nagbibigay-diin sa mahalagang teksto (karaniwang ipinapakita sa bold). - Ang
<em>ay nagpapahiwatig ng tekstong binigyang-diin (karaniwang ipinapakita sa italics).
Mga pagkakaiba sa pagitan ng block-level na mga elemento at inline na mga elemento
- Paraan ng pagpapakita: Ang mga block-level na elemento ay ipinapakita sa isang bagong linya at sumasakop sa buong lapad ng pahina, habang ang mga inline na elemento ay ipinapakita sa parehong linya kasama ang iba pang mga elemento at ang kanilang lapad ay natutukoy ng kanilang nilalaman.
- Pamamahala sa mga panloob na elemento: Ang mga block-level na elemento ay maaaring maglaman ng iba pang block-level na mga elemento gayundin ang inline na mga elemento, ngunit ang mga inline na elemento ay hindi maaaring maglaman ng mga block-level na elemento.
- Papel sa layout: Ang mga block-level na elemento ay pangunahing ginagamit upang lumikha ng istruktura ng layout ng isang pahina, habang ang mga inline na elemento ay tumutukoy sa maliliit na mga elemento tulad ng teksto at mga link.
Pangunahing punto para sa pagkakaiba
Paglikha ng mga layout: Gumamit ng mga block-level na elemento tulad ng <div>, <section>, <article> upang tukuyin ang malalaking seksyon at mga content block.
Dekorasyon ng teksto at mga link: Gumamit ng inline na mga elemento tulad ng <span>, <a>, <strong>, <em> upang gawing dekorasyon ang bahagi ng teksto o magdagdag ng mga link.
Paghahalo ng block-level at inline na mga elemento
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Mixed Block-Level and Inline Elements</title>
7</head>
8<body>
9 <header>
10 <h1>Main Heading with Mixed Content</h1>
11 <p>
12 This is a paragraph that contains an
13 <a href="#">inline link</a> and
14 <strong>bold text</strong>. You can also have
15 <em>italicized words</em> here.
16 </p>
17 </header>
18 <main>
19 <section>
20 <h2>Subheading with Additional Inline Elements</h2>
21 <p>
22 Here is a section that includes inline elements such as
23 <span style="color: blue;">colored text</span> and an
24 <img src="images/image.jpg" alt="Example image" width="50">.
25 This text demonstrates how inline elements work within block-level elements.
26 </p>
27 </section>
28 <section>
29 <h2>Lists with Mixed Content</h2>
30 <p>
31 This paragraph precedes a list and has
32 <a href="#">a link</a> and <strong>bold</strong> text.
33 </p>
34 <ul>
35 <li>List item with <em>italic</em> text.</li>
36 <li>List item containing <span style="color: green;">styled span</span>.</li>
37 <li>List item with <img src="images/example.jpg" alt="Icon" width="20"> icon.</li>
38 </ul>
39 </section>
40 </main>
41</body>
42</html>- Ang mga elementong block-level tulad ng
<main>,<header>, at<section>ay ginagamit, at karaniwang ginagawa ito sa bagong linya, okupahan ang buong lapad ng kanilang parent na elemento. - Ang mga elementong inline tulad ng
<a>,<strong>,<span>, at<img>ay ginagamit, at nilalagay ito sa loob ng linya nang hindi inu-okupa ang buong lapad sa loob ng mga elementong block-level.
Ang pagsama ng inline na mga elemento sa loob ng block-level na mga elemento ay karaniwang gawain. Halimbawa, karaniwan nang maglagay ng mga link (<a>) o pagbibigay-diin (<strong>) sa loob ng talata (<p>). Gayunpaman, dahil hindi mo maaaring ilagay ang mga block-level na elemento sa loob ng inline na mga elemento, mahalagang gamitin ang mga ito nang wasto.
Buod
Ang mga block-level na elemento at inline na mga elemento ay dalawang pangunahing uri ng mga elemento sa HTML, bawat isa ay may sariling layunin. Ang mga block-level na elemento ang bumubuo sa pundasyon ng layout ng pahina, samantalang ang inline na mga elemento ay ginagamit upang palamutian at maayos na i-manipula ang nilalaman sa loob nito. Ang pag-unawa at tamang paggamit sa dalawang uri ng mga elementong ito ay nagbibigay-daan para sa mahusay na pag-code ng HTML.
Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.