Text is the backbone of the web, and HTML provides different elements to structure it properly. Three of the most important tags for handling text are:
<h1>for headings<p>for paragraphs<span>for inline styling
Let's break them down and see how they work!
Headings: <h1> to <h6>
Headings are used to define the structure of a webpage. The <h1> tag is the most important (main heading), while <h6> is the least important.
<h1>This is an H1 heading</h1>
<h2>This is an H2 heading</h2>
<h3>This is an H3 heading</h3>
SEO Tip
Search engines prioritize <h1> tags, so always use them wisely! Keep them unique and relevant.
Paragraphs: <p>
The <p> tag defines paragraphs in HTML. It automatically adds space before and after the text.
<p>This is a simple paragraph in HTML.</p>
Fun Fact
If you don't use <p>, your text will look like a chaotic blob. Avoid "text soup!"
Inline Text Styling: <span>
The <span> tag is used for styling small parts of text within other elements.
<p>This is a <span style="color: red; font-weight: bold;">red bold</span> word.</p>
When to Use <span>
Use <span> when you need to style part of a text without breaking its flow.
Combining <h1>, <p>, and <span>
<h1>Welcome to My Website</h1>
<p>Hello! My name is <span style="color: blue;">John Doe</span>, and I love coding.</p>
Fun Fact
<h1>is like a book title.<p>is like a paragraph in a novel.<span>is like highlighting an important word!
Conclusion
These three basic text elements help structure content properly. Use <h1> for headings, <p> for paragraphs, and <span> for inline styling. Mastering these will make your HTML cleaner and more effective!
0 Comments