Text Formatting in HTML: Bold, Italic, and More
Learn to make your text stand out by adding importance and emphasis, and understand why it matters for more than just looks.
Hello WorldThe <strong> Tag for Importance
The <strong> tag is used to indicate that its content has strong importance, seriousness, or urgency. Browsers typically render this as bold text. It's not just for looks; it tells screen readers and search engines that this text is significant.
The <em> Tag for Emphasis
The <em> tag (for "emphasis") is used to stress a word or phrase, subtly changing the meaning of a sentence. For example, "I am so happy" emphasizes the degree of happiness. Browsers usually display this as italic text.
Combining and Nesting Tags
You can combine tags by nesting them. For instance, to make text both important and emphasized, you can write <strong><em>Critical Warning!</em></strong>. Just be sure to close them in the reverse order you opened them.
Semantic vs. Presentational Tags
You might see older tags like <b> (bold) and <i> (italic). While they look the same, they are purely presentational. <strong> and <em> add semantic meaning, which is better for accessibility and SEO. Always prefer the semantic tags.
Practice Zone
Interactive Test 1: Match the Tags
Drag the correct tag to its semantic purpose.
Arrastra en el orden correspondiente.
Arrastra las opciones:
Completa el código:
Interactive Test 2: Complete the Code
Rellena los huecos en cada casilla.
<p>This is very important.</p> <p>I am really tired.</p>
Practice Example: Code Editor
Create a paragraph that correctly uses both a `strong` tag and an `em` tag inside it.
Bringing Your HTML to Life
HTML provides the structure, but its true power is unlocked when combined with CSS for styling and JavaScript for interactivity. Here’s how they connect.
1. The DOM: Your Page's Blueprint
The Document Object Model (DOM) is a tree-like representation of your HTML. JavaScript can access this tree to change content, styles, and structure dynamically—no page reload required.
// JS finds the h1 and changes its content
document.querySelector('h1')
.innerHTML = 'Hello, <strong>DOM</strong>!';Hello, DOM!
2. Linking CSS for Styling
To style your page, you link an external CSS file from the <head> section. You can target specific tags, like making all <strong> tags a certain color.
<head>
<link rel="stylesheet" href="styles.css">
</head>
/* styles.css */
strong {
color: #c026d3; /* Fuchsia */
}This text is important.
3. Adding Interactivity with JavaScript
JavaScript is usually added just before the closing </body> tag. This ensures the entire DOM is loaded before the script tries to interact with it, preventing errors.
<body>
<button>Click Me</button>
<script src="app.js"></script>
</body>Practical Takeaway: HTML is the skeleton, CSS is the clothing, and JavaScript is the brain. Understanding how they connect through the DOM is the cornerstone of modern web development.
Text Formatting Glossary
- <strong>
- Marks text as having strong importance. It provides semantic meaning and is typically displayed as bold.
- <em>
- Adds emphasis to text, which can alter the meaning of a sentence. It provides semantic meaning and is typically displayed as italic.
- <b>
- (Bring Attention To) A presentational tag that makes text bold without implying importance. Use
<strong>instead for semantic meaning. - <i>
- (Idiomatic Text) A presentational tag that makes text italic (e.g., for a technical term or a thought). Use
<em>instead for semantic emphasis. - <p>
- The standard tag for paragraphs of text. It's a block-level element, meaning it starts on a new line.
- <h1> - <h6>
- Heading tags used to define a hierarchy of titles and subtitles on a page, with <h1> being the most important.