a
Creates a hyperlink to a page, section, file, email or protocol.
Platform under construction
HTML Inline Text Elements
Learn a, strong, em, code, span as part of the HTML element system: when to use it, how it fits inside a document and what mistakes to avoid.
Inline text
Inline text elements add meaning inside a sentence.
Inline elements work inside lines of text. They mark links, importance, emphasis, code, abbreviations and other small pieces of meaning.
The key is to choose elements for meaning. A word can look bold with CSS, but strong tells the document that the word is important.
Element group:
a, strong, em, code, span. Meaning and neutral hooks inside a sentence: links, importance, emphasis, code and span. Syntax in context
Inline elements should keep the sentence readable.
Use inline elements only around the words that need meaning. Do not wrap whole layouts in inline tags.
<p> Learn <strong>semantic HTML</strong> before styling. Open the <a href="#live-lab">live lab</a> and edit the <code>h1</code>. Use <span class="highlight">span</span> only when you need a neutral inline hook. </p>
Good versus weak
The difference is usually meaning, not only syntax.
Good
<p> Learn <strong>semantic HTML</strong> before styling. Open the <a href="#live-lab">live lab</a> and edit the <code>h1</code>. Use <span class="highlight">span</span> only when you need a neutral inline hook. </p>
Weak
<p> <b>semantic HTML</b> <span onclick="location.href='lesson.html'">live lab</span> h1 </p>
Rules that matter
Use these rules before publishing real HTML.
Links need href
A link without href is not a useful hyperlink.
Strong is meaning
Use strong for importance. Use CSS for visual weight alone.
Em changes tone
Use em when the stress of the sentence changes.
Code is for code
Use code for commands, tags, filenames and technical terms.
Span is neutral
Use span when you need a styling or scripting hook and no meaningful element is available.
Production thinking
HTML is also for accessibility, SEO, security and maintenance.
Why does this matter?
Beginners often ask why this is not just a div with styling. The reason is that HTML is read by browsers, search engines, screen readers and future developers. Clear meaning makes the page easier to use and maintain.
Accessibility
Real links are keyboard accessible by default and are announced as links. Clickable spans are not a substitute.
Production note
Inline markup is small, but it affects navigation, SEO anchors, documentation quality and conversion flows.
Live code lab
Change the code and run the example.
Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.
Mini assignment
Try this now.
- Change one tag, attribute or text value in the example.
- Run the preview and describe exactly what changed.
- Reset the lab and repeat the same change without looking at the original.
Practice assignment
Do this before moving to the next lesson.
- Change one meaningful part of the HTML, not only the visible text.
- Run the preview and check whether the result still makes semantic sense.
- Explain why the element or attribute you changed belongs in this exact place.
Try it yourself
Use inline meaning inside a paragraph
Self-check
Before you continue, prove that you own this lesson.
Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.
- Can you explain what problem this lesson solves in a real website?
- Can you identify the most important tag or attribute from this lesson?
- Can you name one accessibility mistake this lesson helps prevent?
- Can you write one good example and one weak example without copying the page?
- Can you explain when you would use this in production and when you would avoid it?