1. <button>…</button>
Like some of the action-button input types introduced earlier (i.e., submit, reset, and button), the <button> element is used to display a button. It is a multi-purpose element for creating buttons and is intended to give authors more flexibility and creative control over the appearance of buttons. For example, text can be easily combined with an image on a button to give it more meaning. Table 5.11 lists the attributes the element supports, and Figures 5.38 and 5.39 show how the type attribute is used with the element and the result.
Notice the use of the <img> element and the associated attributes to add and size the green and red oval images. They have been used here to only- demonstrate the use of the <button> element and are discussed more fully in Chapter 6. The <button> element creates a submit-type button and displays its content on it, and the <img> element adds the image. The use of the alt attribute is important to make the button accessible, as it provides the text for the screen reader to read out. The sizes of the actual images were 24 x 24 pixels and created with transparent background in Photoshop.
TABLE 5.11
Attributes for <button> Element
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.