Introduction to <output>tag

The <output>tag in HTML is used to represent the result of a calculation or user action. This tag is commonly used in web forms to display the outcome of user input or interactive elements, such as calculators, quizzes, or forms that provide real-time feedback. The <output>tag is part of the HTML5 specification and is designed to improve the semantic meaning of web documents, making them more accessible and easier to understand for both users and search engines.

<!-- Output Example -->
    <form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
      <input type="range" id="a" value="50"> +
      <input type="number" id="b" value="50">
      = <output name="result" class="custom-output">100</output>
    </form>

/* CSS for Output */
    .custom-output {
        display: inline-block;
        background-color: #f8f8f8;
        padding: 5px 10px;
        border: 1px solid #ddd;
        border-radius: 3px;
        font-weight: bold;
        margin-left: 5px;
    }

Global Attributes