Best html tag to use to display chat text messages?

I realize this question is somewhat old, but I think it's an interesting case.

Using a div HTML element is possible, but not the best solution when it comes to semantics. Keep in mind that div is the most generic HTML element. It says nothing about your markup's content other than it should be divided from the rest somehow.

A better approach would be to use a mix of more descriptive HTML 5 elements, and overwrite their default styling with something that looks like a chat bubble.

Consider this example, adapted from this article

<ul class="chat">
  <li class="message">
    <figure class="sender">
      <img src="https://example.org/avatar.png" alt="" class="avatar" />
      <figcaption>Example sender name</figcaption>
    </figure>
    <blockquote>
      <p>Text message</p>
    </blockquote>
  <li>
  <!-- more chat messages ... -->
</ul>

Example

<div class="chat-popup" id="myForm">  <form action="/action_page.php" 
  class="form-container">    <h1>Chat</h1>    
  <label for="msg">Message</label>    <textarea 
  placeholder="Type message.." name="msg" required></textarea>    
  <button type="submit" class="btn">Send</button>    <button 
  type="button" class="btn cancel" onclick="closeForm()">Close</button>  
  </form></div>

Example

{box-sizing: border-box;}/* Button used to open the chat form - 
  fixed at the bottom of the page */.open-button {  
  background-color: #555;  color: white;  padding: 16px 20px;  
  border: none;  cursor: pointer;  opacity: 0.8;  
  position: fixed;  bottom: 23px;  right: 28px;  
  width: 280px;}/* The popup chat - hidden 
  by default */.form-popup {  display: none;  position: 
  fixed;  bottom: 0;  right: 15px;  border: 3px solid 
  #f1f1f1;  z-index: 9;}/* Add 
  styles to the form container */.form-container {  max-width: 
  300px;  padding: 10px;  background-color: white;}
  /* Full-width textarea */.form-container textarea {  width: 100%;  
  padding: 15px;  margin: 5px 0 22px 0;  border: none;  
  background: #f1f1f1;  resize: none;  min-height: 200px;}/* When the 
  textarea gets focus, do something */.form-container textarea:focus {  
  background-color: #ddd;  outline: none;}/* Set a style for the submit/login button */
  .form-container .btn {  background-color: #04AA6D;  color: 
  white;  padding: 16px 20px;  border: none;  cursor: 
  pointer;  width: 100%;  margin-bottom:10px;  
  opacity: 0.8;}/* Add a red background color 
  to the cancel button */.form-container .cancel {  
  background-color: red;}/* Add some hover effects to buttons */.form-container .btn:hover, 
  .open-button:hover {  opacity: 1;}

Example

function openForm() {  document.getElementById("myForm").style.display 
  = "block";}function closeForm() {  document.getElementById("myForm").style.display 
  = "none";}

This tag defines a paragraph of text.

Some text

This is an inline tag that can be used to create a section in a paragraph that can be targeted using CSS:

A part of the text <span>and here another part</span>

And compared to creating a new paragraph, it does not add additional spacing.

Some text<br>A new line

That’s typically the only thing that browsers do. This is the CSS applied by Chrome:

code {
    font-family: monospace;
}

Chrome gives pre this default styling:

pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0px;
}