Best html tag to use to display chat text messages? - TagMerge
4Best html tag to use to display chat text messages?Best html tag to use to display chat text messages?

Best html tag to use to display chat text messages?

Asked 1 years ago
4 answers

You can use a simple div to show chat bubbles. I would personally use something simple, such as:

<div class="chat-bubble"></div>

All the content would be wrapped inside that div. I would then style the chat-bubble class in CSS to make it look how I want it to.

Here is a pretty neat walkthrough on making chat bubbles in CSS that should be a good starting point for what you're trying to do.

Source: link


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="" alt="" class="avatar" />
      <figcaption>Example sender name</figcaption>
      <p>Text message</p>
  <!-- more chat messages ... -->

Source: link


<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>  
{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;}
function openForm() {  document.getElementById("myForm").style.display 
  = "block";}function closeForm() {  document.getElementById("myForm").style.display 
  = "none";}

Source: link


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;

Source: link

Recent Questions on html

    Programming Languages