Textual Tags
explain.html
explain.html
<!DOCTYPE html>
<html lang="en">
<head>
<!--
<title> defines the text shown in the browser tab.
It is NOT displayed inside the webpage.
-->
<title>Explaining HTML Text Tags</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!--
h1–h6 are heading tags.
h1 = most important, biggest
h6 = least important, smallest
-->
<h1>This is an H1 heading</h1>
<h2>This is an H2 heading</h2>
<h3>This is an H3 heading</h3>
<h4>This is an H4 heading</h4>
<h5>This is an H5 heading</h5>
<h6>This is an H6 heading</h6>
<!--
<p> is a paragraph tag.
Browsers automatically add margin above and below paragraphs.
-->
<p>This is a paragraph showing the usage of the <p> tag.</p>
<!--
<hr> creates a horizontal line (rule)
It's used to separate content sections.
-->
<hr>
<!--
<br> inserts a line break inside text.
Unlike <p>, it does not create a new paragraph.
-->
<p>This sentence has a line break<br>right here.</p>
<!--
<b> makes text bold only visually.
<strong> makes text bold AND gives it semantic meaning (important).
-->
<p><b>Bold text using <b></b></p>
<p><strong>Bold text using <strong> (more important)</strong></p>
<!--
<i> makes text italic visually.
<em> emphasizes text and is usually read with stress by screen readers.
-->
<p><i>Italic text using <i></i></p>
<p><em>Emphasized text using <em></em></p>
<!--
<mark> highlights text with a yellow background (default).
-->
<p>Highlighting this word with <mark><mark></mark>.</p>
<!--
<sub> makes text subscript (lowered).
Commonly used in chemical formulas.
-->
<p>Water formula: H<sub>2</sub>O</p>
<!--
<sup> makes text superscript (raised).
Used in math formulas and footnotes.
-->
<p>Square: x<sup>2</sup></p>
<!--
<pre> preserves whitespace and line breaks exactly as typed.
Useful for code blocks or formatted text.
-->
<pre>
This text is inside a <pre> tag.
Spaces and line breaks
are preserved exactly.
</pre>
<!--
<a> creates a hyperlink.
href = URL to navigate to
target="_blank" opens the link in a new tab
-->
<p>
Visit
<a href="https://developer.mozilla.org/" target="_blank">
MDN Web Docs
</a>
for HTML reference.
</p>
</body>
</html>
explain.html
explain.html
<!DOCTYPE html>
<html lang="en">
<head>
<!--
<title> defines the text shown in the browser tab.
It is NOT displayed inside the webpage.
-->
<title>Explaining HTML Text Tags</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!--
h1–h6 are heading tags.
h1 = most important, biggest
h6 = least important, smallest
-->
<h1>This is an H1 heading</h1>
<h2>This is an H2 heading</h2>
<h3>This is an H3 heading</h3>
<h4>This is an H4 heading</h4>
<h5>This is an H5 heading</h5>
<h6>This is an H6 heading</h6>
<!--
<p> is a paragraph tag.
Browsers automatically add margin above and below paragraphs.
-->
<p>This is a paragraph showing the usage of the <p> tag.</p>
<!--
<hr> creates a horizontal line (rule)
It's used to separate content sections.
-->
<hr>
<!--
<br> inserts a line break inside text.
Unlike <p>, it does not create a new paragraph.
-->
<p>This sentence has a line break<br>right here.</p>
<!--
<b> makes text bold only visually.
<strong> makes text bold AND gives it semantic meaning (important).
-->
<p><b>Bold text using <b></b></p>
<p><strong>Bold text using <strong> (more important)</strong></p>
<!--
<i> makes text italic visually.
<em> emphasizes text and is usually read with stress by screen readers.
-->
<p><i>Italic text using <i></i></p>
<p><em>Emphasized text using <em></em></p>
<!--
<mark> highlights text with a yellow background (default).
-->
<p>Highlighting this word with <mark><mark></mark>.</p>
<!--
<sub> makes text subscript (lowered).
Commonly used in chemical formulas.
-->
<p>Water formula: H<sub>2</sub>O</p>
<!--
<sup> makes text superscript (raised).
Used in math formulas and footnotes.
-->
<p>Square: x<sup>2</sup></p>
<!--
<pre> preserves whitespace and line breaks exactly as typed.
Useful for code blocks or formatted text.
-->
<pre>
This text is inside a <pre> tag.
Spaces and line breaks
are preserved exactly.
</pre>
<!--
<a> creates a hyperlink.
href = URL to navigate to
target="_blank" opens the link in a new tab
-->
<p>
Visit
<a href="https://developer.mozilla.org/" target="_blank">
MDN Web Docs
</a>
for HTML reference.
</p>
</body>
</html>