HTML Text, Links, Images & Semantic Tags Explained

Welcome to the Complete HTML Course. This post focuses on the part of HTML that users actually see. Text, links, images, and lists form the backbone of almost every website.

If you master these tags properly, you will be able to build real webpages instead of empty layouts.

Info!
Nearly 90% of HTML work in real projects revolves around these elements. Strong fundamentals here will save you years of confusion later.

Lesson 4: Text Elements (Headings & Paragraphs)

Text is the primary way information is delivered on the web. HTML provides specific tags so browsers and search engines understand what text is important and what is supporting content.

Headings in HTML

HTML includes six heading levels from <h1> to <h6>. These are not for size control. They represent content hierarchy.

<h1>Main Heading (Page Topic)</h1>
<h2>Section Heading</h2>
<h3>Sub Section</h3>
<h4>Detail Level</h4>
<h5>Minor Heading</h5>
<h6>Least Important</h6>

SEO Tip!
Use only one h1 per page. Search engines treat it as the main topic.

Warning!
Do not choose headings based on size. Use CSS for styling, not heading levels.

Paragraph Tag

The <p> tag is used for normal text blocks. Browsers automatically add spacing around paragraphs.

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

Tip!
Never use <br> repeatedly instead of paragraphs. It creates poor structure.

Lesson 5: Links in HTML

Links connect the entire web. They allow users to move between pages, files, and resources.

Basic Anchor Tag

<a href="https://www.maxoncodes.com">Visit MaxonCodes</a>

The clickable text is called anchor text. It should describe where the link goes.

Opening Links in a New Tab

<a href="https://www.maxoncodes.com" target="_blank" rel="noopener">Open in New Tab</a>

Security Tip!
Always use rel="noopener" with target="_blank".

Lesson 6: Images & Lists

Images in HTML

Images are inserted using the <img> tag. This tag does not have a closing tag.

<img src="https://cdn.maxoncodes.com/logo.png" alt="MaxonCodes Logo" width="200">

Accessibility Tip!
Alt text should describe the image meaningfully, not just the file name.

Lists in HTML

Lists help structure grouped information. They improve readability and accessibility.

Unordered List

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Ordered List

<ol>
  <li>Learn HTML</li>
  <li>Practice daily</li>
  <li>Build projects</li>
</ol>

Warning!
Never place text directly inside <ul> or <ol>. Only <li> is allowed.

What You Learned in This Post

Proper use of headings and paragraphs
Creating and securing links
Using images with accessibility in mind
Structuring content with lists

🎉 Great job!
You’ve successfully completed Beginner Post #2. Consistency is what turns beginners into pros. Practice daily, then move ahead with confidence.

Next Beginner Post

🚀 Level Up: Next HTML Lesson: Formatting, Tables & Forms →

Maxoncodes