4.12. Introduction to HTML: basic structure, tags and attributes: Button tags
Page 16 | Listen in audio
Introduction to HTML: Basic Structure, Tags and Attributes: Button Tags
HTML, which stands for Hyper Text Markup Language, is the standard markup language for creating web pages. It is a language that allows the structuring of content on the web in a semantic way. It is through HTML that we can define whether content is a paragraph, a header, a link, a list, an image, among others.
Basic Structure of HTML
An HTML document has a basic structure that includes tags such as <!DOCTYPE html>, <html>, <head> and <body>. The <!DOCTYPE html> tag tells the browser that this is an HTML5 document. The <html> tag is the root of the document and contains all other tags. Inside it we have the <head> tag, which contains metadata and information that is not displayed to the user, and the <body> tag, which contains the content of the page, that is, everything that is displayed to the user.
Tags and Attributes
Tags are the HTML elements that mark and define the structure of the content. They are composed of a name and are placed between angle brackets and angle brackets. For example, the <p> tag defines a paragraph. Furthermore, tags have attributes, which are additional information that modify or complement the tag's behavior. For example, the <a> tag, which defines a link, may have the href attribute, which specifies the link address.
Button Tag
The <button> tag is used to create a clickable button. It can contain text, images or any other HTML content. A button can be used on forms or anywhere in a document that requires interactive button functionality. See an example of using the <button> tag:
<button type="button">Click here</button>
In this example, the <button> tag is defining a button with the text "Click here". The type attribute is specifying that this is a button that can be clicked, but does not have an action associated with it by default.
It is important to note that the <button> tag must always be closed with the </button> tag. Furthermore, it can have several attributes, such as disabled, which disables the button, form, which associates the button with a form, and value , which defines a value for the button.
In addition, the <button> tag can be used in conjunction with JavaScript to create interactive functionality. For example, we can use the onclick event to execute a JavaScript function when the button is clicked.
Conclusion
The <button> tag is a powerful tool for creating interactivity on a web page. Whether it's submitting a form, opening a new link, or executing a JavaScript function, the <button> tag is an essential part of HTML. Learning how to use it correctly is an important step towards becoming a competent front-end developer.
<pre> and <code> tags would not be displayed as text, but as HTML code. To display HTML code as text in an actual HTML document, you would need to use HTML entities such as < for <, > for >, and & to &.
Now answer the exercise about the content:
_What is the purpose of the <button> tag in HTML?
You are right! Congratulations, now go to the next page
You missed! Try again.
Next page of the Free Ebook:
17Introduction to HTML: basic structure, tags and attributes: Tables in HTML
5 minutes
Earn your Certificate for this Course for Free! by downloading the Cursa app and reading the ebook there. Available on Google Play or App Store!
