HTML Concepts

Table of Contents

HTML Template
HTML Attributes vs DOM Properties
Quotes for HTML attribute values
HTML Boolean Attribute

HTML Template

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TITLE</title>
</head>

<body>
  <h1>HEADING</h1>
  <p>CONTENT</p>
</body>

</html>

HTML Attributes vs DOM Properties discussion

<input id="the-input" type="text" value="Name:">

There are three attributes: id, type and value.
Once the browser parses this code, a HTMLInputElement javascript object will be created.
There are some properties in this object like accept, align, attributes etc.
The attributes defined in HTML go into the object's attributes property.

DOM nodes like HTMLInputElement will have the attributes corresponding properties.

elem.id    // reflected for elem.attributes.id
elem.type  // reflected for elem.attributes.type
elem.value // uses elem.attributes.value as the initial value

https://stackoverflow.com/questions/6003819/what-is-the-difference-between-properties-and-attributes-in-html#answer-6004028

Quotes for HTML attribute values discussion

Quotes are optional, but it's recommended to consistently use double quotes.
In other words, quoting doesn't mean that the type of value is string or something.

<iframe src="www.example.com" width="100%"></iframe>

https://stackoverflow.com/questions/13056683/html-attribute-with-without-quotes

HTML Boolean Attribute discussion

The presence of a boolean attribute on an element represents the true value
The values "true" and "false" are not allowed on boolean attributes.

https://stackoverflow.com/questions/4139786/what-does-it-mean-in-html-5-when-an-attribute-is-a-boolean-attribute