What is the abbr and code element in html?

We use the abbr and code element to indicate a word abbreviation and a section of computer code, respectively.

The <abbr> Element for Abbreviations

The <abbr> element is used to denote an abbreviation. When using <abbr>, you should use the title attribute to provide the expanded text that the abbreviation represents.

points about <abbr>

It is a phrasing element.
You don’t have to wrap every abbreviation in <abbr>, only when you think it would be helpful for visitors to be given the expanded meaning. Common words like “laser” or “scuba” might not need it.
It’s common practice to include an abbreviation’s expansion (via title or parentheses) only the first time it appears on a page.
Some browsers (like Chrome) display the title of abbreviations as a tooltip on mouseover. They might not display the abbreviation itself any differently by default unless you apply CSS.
In older HTML versions, there was also an <acronym> element for acronyms, but it’s often confused with <abbr> and is not included in HTML5. The <abbr> element is now used for both abbreviations and acronyms.

Example

<!DOCTYPE HTML>
<html>
<head>
  <title> </title>
  <style>
    abbr[title] {
      border-bottom: 1px dotted #000;
      cursor: help;
    }
  </style>
</head>
<body>
  <p>The <abbr title="HyperText Markup Language">HTML</abbr> is the standard markup language for creating web pages.</p>
  <p><abbr title="World Wide Web Consortium">W3C</abbr> Recommendation.</p>
  <p>She has a <abbr title="Doctor of Philosophy">PhD</abbr> in Computer Science.</p>
</body>
</html>

The HTML is the standard markup language for creating web pages.

W3C Recommendation.

She has a PhD in Computer Science.

Here, the <abbr> elements are used to mark abbreviations, and the title attribute provides the full form, which browsers may display as a tooltip. CSS is used to add a dotted underline to the abbreviations.

The <code> Element

The <code> element is used to denote a fragment of computer code. It indicates that the enclosed text is code or a file name.

points about <code>

It is a phrasing element.
It reduces in a monospaced font by default, making it look like code.
If your code needs to display < or >, use the < and > character entities respectively.
The <code> element can be used inline within a paragraph or within a <pre> block for longer code segments were preserving line breaks and spacing is important.

Code Example:

<!DOCTYPE HTML>
<html>
<head>
  <title> </title>
  <style>
    pre code {
      display: block; /* To ensure proper wrapping within <pre> */
    }
  </style>
</head>
<body>
  <p>The function <code>console.log("Hello!");</code> is used to display output in JavaScript.</p>
  <p>To create a paragraph in HTML, you use the <code>&lt;p&gt;</code> tag.</p>
  <p>Here's an example of a function:</p>
  <pre><code>
function calculateArea(length, width) {
  return length * width;
}
  </code></pre>
</body>
</html>

The function console.log("Hello!"); is used to display output in JavaScript.

To create a paragraph in HTML, you use the <p> tag.

Here’s an example of a function:


function calculateArea(length, width) {
  return length * width;
}

In the first paragraph, <code> is used inline. The second paragraph shows using <code> with HTML entities for tags. The third example demonstrates using <code> within a <pre> block for a multi-line code snippet. The CSS ensures that the <code> block behaves correctly within the <pre> element.

HTML5 Topics

Page Content

Tutorials