HTML | Notion

Contents
References
Hyper Text Markup Language, or HTML, is the backbone of the web, providing the content, as well as the structure of that content, that you see displayed in your web browser.
HTML consists of a series of elements and attributes which are used to mark up all the components of a document to structure it in a meaningful way.

HTML Elements

Untitled

Void elements include <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <source>, <track>, and <wbr>, among others.

Inline Elements

Do not start on a new line.
Only take up as much width as necessary.
Used mostly to format text within block-level elements.

Common inline elements:

<span> </span> <a href="#">Link</a> <strong>, <em> <img>, <input>, <label>

Block-Level Elements

Start on a new line and take up the full width available.
Often used to structure the main layout of a page.

Common block elements:

<div> </div> <p> </p> <h1> to <h6> <ul>, <ol>, <li> <header>, <footer>, <section>, <article> <table>, <form>, <nav>

Attributes

Attributes provide information about the element.

Attributes only appear in the opening tag.

Attribute	Description	Example
`id`	Provides a unique identifier for an element within the entire document.	`<div id="main-content">`
`class`	Assigns one or more class names to an element, used for applying CSS styles or JavaScript behavior.	`<p class="highlight important">`
`style`	Applies inline CSS styles directly to an element. (Generally discouraged for large-scale styling).	`<span style="color: blue; font-size: 16px;">`
`title`	Provides advisory information about the element, often displayed as a tooltip on hover.	`<img src="logo.png" title="Company Logo">`
`data-*`	Allows you to store custom data private to the page or application. Used with JavaScript.	`<div data-product-id="123" data-category="electronics">`
`hidden`	Boolean attribute. If present, indicates that the element is not yet, or is no longer, relevant.	`<div hidden>This content is hidden</div>`
`contenteditable`	Boolean attribute. If true, allows the user to edit the content of the element directly in the browser.	`<p contenteditable="true">Edit me!</p>`
`tabindex`	Specifies the tab order of an element (for keyboard navigation) and whether it is focusable.	`<button tabindex="1">Focus First</button>`
`lang`	Specifies the primary language of the element's content. Overrides the `lang` on `<html>`.	`<p lang="es">Hola Mundo</p>`

Structure of HTML Document

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
  <!-- You can also include CSS, meta tags, fonts, etc. here -->
</head>
<body>
  <h1>This is a Heading</h1>
  <p>This is a paragraph.</p>
  <!-- All visible page content goes here -->
</body>
</html>

Explanation of Each Part:

Section	Description
`<!DOCTYPE html>`	Declares the document type and version (HTML5 here).
`<html lang="en">`	The root element; contains all other HTML elements. `lang` defines the main language of the document.
`<head>`	Contains metadata (title, charset, CSS links, etc.) not displayed on the page.
`<meta charset="UTF-8">`	Defines character encoding.
`<meta name="viewport"...>`	Helps site responsiveness, enabling content to render well by default, no matter the viewport width.
`<title>`	Sets the page title shown in the browser tab.
`<body>`	Contains all visible content (text, images, links, etc.).

<aside> 💡

Use the <link> tag, with the rel="icon" attribute/value pair to identify the favicon to be used for your document. A favicon is a very small icon that appears on the browser tab, generally to the left of the document title.

</aside>