Text Content Elements

Learn about HTML Text Content Elements, essential for structuring readable, semantic web content.

Loading...
Text Content Elements

Text content elements define and structure readable content in an HTML document. They ensure semantic clarity, improve accessibility, and help search engines understand the hierarchy and meaning of content on your web pages.

Common elements:

br

The <br> HTML element inserts a single line break. This is useful when you write addresses or poems in the document.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <p>
   This <br />
   gives a <br />
   line break.
  </p>
 </body>
</html>

The <br> HTML element does not contain a closing tag.

p

The <p> HTML element defines a paragraph.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <p>
   Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus ipsam quam, quidem quod nulla provident reprehenderit. Saepe atque nobis iusto labore earum hic dolores accusantium quia, fuga placeat fugiat, doloremque laborum, odio velit repudiandae nemo aperiam quaerat ratione quod veritatis exercitationem! Suscipit saepe omnis aliquam consequuntur adipisci facere laudantium atque.
  </p>
 </body>
</html>

The <p> HTML element includes both opening (<p>) and closing (</p>) tags.

hr

The <hr> (horizontal rule) HTML element is used to insert a thematic break in a web page to divide or separate document sections.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <h1>This is a heading.</h1>
  <hr />
  <h4>This is subheading.</h4>
 </body>
</html>

The <hr> HTML element does not contain a closing tag.

pre

The <pre> HTML element is used to define preformatted text.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
   <p>This is <pre>preformatted</pre> text.</p>
 </body>
</html>

Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks.

The <pre> HTML element includes both opening (<pre>) and closing (</pre>) tags.

blockquote

The <blockquote> HTML element defines a section that is quoted from another source and is used for long quotations. It should contain only block-level elements (such as p, div, header, etc.), not just plain text.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <p>Here's a quote from Octavia Butler:</p>
  <blockquote>
    First forget inspiration. Habit is more dependable. Habit will sustain you whether you're inspired or not. Habit will help you finish and polish your stories. Inspiration won't. Habit is persistence in practice.
  </blockquote>
 </body>
</html>

The <blockquote> HTML element includes both opening (<blockquote>) and closing (</blockquote>) tags.

The attribute for the <blockquote> element is cite.

ol

The <ol> (ordered list) HTML element is used to define an ordered list. The <li> element is used to define a list item.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <ol>
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
  </ol>
  <ol reversed>
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
  </ol>
  <ol start="5">
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
  </ol>
  <ol type="I">
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
  </ol>
 </body>
</html>

The <ol> HTML element includes both opening (<ol>) and closing (</ol>) tags. Attributes for this element are reversed, start and type.

ul

The <ul> (unordered list) HTML element is used to define an unordered list. The <li> element is used to define a list item.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <ul>
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
  </ul>
 </body>
</html>

The <ul> HTML element includes both opening (<ul>) and closing (</ul>) tags.

li

The <li> HTML element defines a list item and is used inside ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu>).

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <ol>
   <li>First</li>
   <li>Second</li>
   <li>Third</li>
  </ol>
  <ul>
   <li>First</li>
   <li>Second</li>
   <li>Third</li>
  </ul>
  <menu>
   <li>First</li>
   <li>Second</li>
   <li>Third</li>
  </menu>
 </body>
</html>

The <li> HTML element includes both opening (<li>) and closing (</li>) tags.

dl

The <dl> (description list) HTML element is used to create a list of groups of terms (specified using the <dt> element) and descriptions (specified using the <dd> element).

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <dl>
   <dt>HTML</dt>
   <dd>Hyper Text Markup Language</dd>
   <br />
   <dt>CSS</dt>
   <dd>Cascading Style Sheet</dd>
  </dl>
 </body>
</html>

The <dl> HTML element includes both opening (<dl>) and closing (</dl>) tags.

dt

The <dt> (description term) HTML element is used to display the term in a description list. It must be used along with <dl> (description list) HTML element and <dd> (description details) HTML element.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <dl>
   <dt>HTML</dt>
   <dd>Hyper Text Markup Language</dd>
   <br />
   <dt>CSS</dt>
   <dd>Cascading Style Sheet</dd>
  </dl>
 </body>
</html>

The <dt> HTML element includes both opening (<dt>) and closing (</dt>) tags.

dd

The <dd> (description details) HTML element is used to display the description of an item in a description list. Inside a <dd> element, you can insert paragraphs, line breaks, images, links, etc. It must be used along with the <dl> (description list) HTML element and the <dt> (description term) HTML element.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <dl>
   <dt>HTML</dt>
   <dd>Hyper Text Markup Language</dd>
   <br />
   <dt>CSS</dt>
   <dd>Cascading Style Sheet</dd>
  </dl>
 </body>
</html>

The <dd> HTML element includes both opening (<dd>) and closing (</dd>) tags.