Before moving on to creating your HTML5 web pages, let’s take a look at the basic building blocks, the building blocks of a web page.
An HTML5 document, like any HTML document, is made up of elements, and elements are made up of tags. Typically, elements have a start and end tag, which are enclosed in angle brackets. For example:
<div> element text </div>
An element is defined here div that has a start tag <div> and an end tag </div>. In between these tags is the content of the div element. In this case, the content is the simple text “Text of the div element”.
Elements can also consist of a single tag, for example, an element <br /> whose function is line break.
<div> Text <br /> of the div </div>
Such elements are also called void elements. Although I used a trailing slash, it is optional according to the spec, and is equivalent to using a non-slash tag: <br>
Each element within the start tag can have attributes . For example:
<div style = "color: red;"> easywptutorials.com Provides you best programming tutorials </div> <input type = "button" value = "Click">
There are two elements defined here: div and input. The element div has a style attribute . After the equal sign is written in quotes attribute value: style=”color:red;”. In this case, the value “color: red;” indicates that the text color will be red.
The second element is an input element consisting of one tag and has two attributes: type(indicates the type of the element – button) and value(defines the text of the button)
There are global or general attributes for all elements, such as style, and there are specific ones that apply to certain elements, such as type.
In addition to the usual attributes, there are also Boolean or Boolean attributes. Attributes like these may not matter. For example, a button can have an attribute disabled:
<input type = "button" value = "Press" disabled>
The disabled attribute indicates that this element is disabled.
Global Attributes
HTML5 has a set of global attributes that apply to any HTML5 element:
- accesskey: defines a key for quick access to an element
- class: specifies the CSS class to apply to the element
- contenteditable: determines if the content of the element can be edited
- contextmenu: defines the context menu for an item that is displayed when the item is right-clicked
- dir: sets the direction of text in an element
- draggable: determines if the element can be dragged
- dropzone: Determines if dropzone data can be copied when dropping to an item
- hidden: hides the element
- id: unique identifier for the element. Elements must not have duplicate identifiers on a web page
- lang: defines the language of the element
- spellcheck: Indicates whether or not a spell check will be used for this element
- style: sets the style of an element
- tabindex: Determines the order in which elements can be toggled using the TAB key
- title: sets an optional description for the element
- translate: determines if the content of the element should be translated
But, as a rule, of this entire list, three are most commonly used: class , id, and style .
Custom Attributes
Unlike the previous version of the markup language, HTML5 has added custom attributes. Now the developer or creator of the web page can define any attribute by himself, prefixing it with the data- prefix . For example:
<input type="button" value="Easywptutorials" data-color="red" >
An attribute is defined here data-color that has the value “red”. Although there is no such attribute for this element, nor in html in general. We define it ourselves and set any value for it.
Single or double quotes
It is not uncommon to find cases where both single and double quotes are used in the definition of attribute values in html. For example:
<input type = 'button' value = 'Click'>
Both single and double quotes are acceptable in this case, although double quotes are more commonly used. However, sometimes the attribute value itself may contain double quotes, in which case it is better to put the entire value in single quotes:
<input type = "button" value = 'Hello World button'>