To create a colored square in HTML, you typically use a <div> element styled with CSS to set equal width and height properties, along with a background-color. For example:

<div style="width: 100px; height: 100px; background-color: red;"></div>

Alternatively, you can use HTML Unicode symbols to insert pre-defined square shapes directly into your text without CSS. Common examples include:

• ■ (U+25A0) – Black Square

• □ (U+25A1) – White Square

• ▣ (U+25A3) – White Square Containing Black Small Square

• ◼ (U+25FC) – Black Medium Square

• 🟥 (U+1F7E5) – Large Red Square (color-specific)

These symbols can be inserted using their HTML entity codes (e.g., ■ for ■) or directly if your editor supports Unicode input.

To create a square border around text, wrap the text in a <span> or <div> and apply CSS:

.square-box {
  display: inline-flex;
  width: 50px;
  height: 50px;
  align-items: center;
  justify-content: center;
  border: 2px solid #333;
  box-sizing: border-box;
}

<span class="square-box">Text</span>

For list bullets, use the CSS property list-style-type: square; on an unordered list (<ul>).