HTML - Phrase Tags

Ethan D. -

Types of Phrase Tags

<em> Tag

The <em> tag emphasizes text within an HTML document. The text inside the <em> tag is usually in italic to visually separate it from the surrounding text. This tag shows a stressed emphasis on the text, suggesting it should be read with a different tone or rhythm compared to the rest of the content.

Example usage

<p>This is an example of <em>emphasized text</em> using the <em> tag.</p>

<strong> Tag

The <strong> tag indicates important text within an HTML document. The text inside the <strong> tag is usually in bold to visually highlight its significance. This tag means that the text is very important or urgent, and it should be given more weight than the surrounding content.

Example usage

<p>This is an example of <strong>important text</strong> using the <strong> tag.</p>

<code> Tag

The <code> tag represents a piece of computer code within an HTML document. The text inside the <code> tag is usually in a monospace font, which is a fixed-width font that aligns characters vertically. This tag is commonly used to show code snippets, programming language keywords, or file names.

Example usage

<p>To declare a variable in JavaScript, use the <code>let</code> keyword followed by the variable name.</p>

<kbd> Tag

The <kbd> tag represents user input or keyboard keys within an HTML document. The text inside the <kbd> tag is usually in a monospace font, similar to the <code> tag. This tag shows that the text represents a key press or a combination of key presses that a user should input.

Example usage

<p>To copy text, press <kbd>Ctrl</kbd> + <kbd>C</kbd> on Windows or <kbd>Command</kbd> + <kbd>C</kbd> on Mac.</p>

<samp> Tag

The <samp> tag represents sample output from a computer program within an HTML document. The text inside the <samp> tag is usually in a monospace font, similar to the <code> and <kbd> tags. This tag is used to show output or results generated by a program or script.

Example usage

<p>After running the program, the output will be: <samp>Hello, World!</samp></p>

<var> Tag

The <var> tag represents a variable in programming or mathematical expressions within an HTML document. The text inside the <var> tag is usually in italic to visually separate it from the surrounding text. This tag shows that the text represents a variable or a placeholder that can change or be substituted with actual values.

Example usage

<p>The formula for calculating the area of a rectangle is: 
<var>area</var> = <var>length</var> × <var>width</var>.</p>

Combining Phrase Tags

You can combine phrase tags in HTML to apply multiple semantic meanings to a text. By nesting one phrase tag inside another, you can convey more specific information about the content. This is useful when you need to emphasize or highlight certain parts of a code snippet, user input, or program output.

Example: Using <strong> tag inside a <code> tag

<p>To declare a constant in JavaScript, use the <code><strong>const</strong></code> keyword followed by the constant name.</p>

In this case, the <code> tag shows that "const" is a piece of code, while the <strong> tag emphasizes its importance as a keyword.

Example: Combining <em> tag inside a <var> tag

<p>The formula for calculating the volume of a cylinder is: <var>volume</var> = π × <var><em>r</em></var>² × <var>height</var>, where <var><em>r</em></var> is the radius of the base.</p>

Here, the <var> tags represent variables in the formula, while the <em> tag inside one of the <var> tags emphasizes the importance of the radius variable.

By combining phrase tags, you can create more meaningful and semantically rich HTML markup that better conveys the structure and significance of your content to both human readers and assistive technologies.