HTML Basic

HyperText Markup Language (HTML) - markup language for creating webpages

Basic Page

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF=8" />
    <title>Example</title>
  </head>
  <body>
    <!-- content -->
    <script src="index.js"></script>
  </body>
</html>

element - HTML document is built with elements

  • <tag attribute>text content</tag> - a typical element includes an opening tag with some attributes, enclosed text content, and a closing tag
  • tag - is used for creating an element
  • attribute - extends an HTML element, changing its behavior or providing metadata
  • ancestors - parent elements
  • descendants - child elements


Document Type Definition (DTD) - specifies markup language for the browser

  • e.g. <!doctype html> - syntax. for HTML this is required preamble, whose purpose is to make browser use proper rendering mode
  • doctype is not a tag
  • for HTML5 default value is html. but prior HTML5, there were several versions of HTML, as well as XHTML


<html> - represents the root element of an HTML document. it contains <head> and <body> elements

  • lang - helps screen readers to determine the proper language to announce


<head> - element representing metadata of HTML document


<body> - element representing the content of HTML document

<!-- foo --> - syntax for HTML comment

Attributes

Global

id - unique element identifier

  • id's value must not contain whitespaces


hidden - indicates that the browser should not render the element

boolean attribute - attribute without value. the presence of such attribute represents the "true" value, and the absence - the "false" value

Lists

<ol> - ordered list
<ul> - unordered list
<li> - list item

<dl> - description list
<dt> - description term
<dd> - description definition

  • <dt> & <dd> are siblings

Common HTML Entities

&nbsp; non-breaking space & &amp; ampersand < &lt; / &#60; less than > &gt; / &#62; greater than ‹ &lsaquo; chevron left › &rsaquo; chevron right " &quot; double quotes ' &apos; single quotes ( &#40; opening parenthesis ) &#41; closing parenthesis € &euro; euro © &copy; copyright ✗ &#x2717; cross

HTML entities - see Character Encoding

Common Elements

Content

<iframe>

  • src
  • srcdoc - HTML code instead of link. it overrides src


<embed>

  • src
  • type - MIME type. e.g. application/pdf
  • toolbar=0 - such URL hash removes buttons from default PDF viewer


<object>

Interactivity

<audio> - is used to embed sound content

  • controls - adds browser's controls, such as for pause & resume, volume, seeking
<audio controls>
  <source src="media/lion.mp3" type="audio/mpeg" />
  <source src="media/lion.ogg" type="audio/ogg" />
</audio>

<video>

  • src
  • width
  • height
  • controls
  • autoplay
  • loop
  • playsInline
  • onPlaying
  • onWaiting


<details> - accordion
<summary> - accordion item title, i.e. visible text

<dialog> - modal

  • showModal & close - JS methods which open and close the modal

Inline

<sup> - superscript (upper text)
<sub> - subscript (lower text)
<cite> - citation

Other

<hr> - horizontal divider across the width of its containing element

<pre> - pre-formatted. displays all whitespaces as is
<code> - pre-formatted content

Common UI Components

Badge - a small icon to the top-right of the element
Chip - tiny text component with background or border

  • Tag - same as Chip

Loader
Hint
Backdrop - darken background layer. it can listen for a click if needed

  • is often used with full-screen loader, modal


Tooltip - helping text, which shows up, when mouse is over
Toast - notification in the corner or near the edge of screen

  • Snackbar - another naming

Alert - short, important message that attracts the user's attention without interrupting the user's task

  • can be combined with toast


Slider - a line with a range of values on it
Dropdown - select element
Switch - like switch for light in the room

  • Toggle - a moving part of switch. toggle can also be used interchangeably with switch

File Picker - component for choosing and uploading file from computer

Breadcrumbs - history of website dive
Hamburger - button with three parallel lines inside, indicating navigation menu
Menu - list of choices

  • Context Menu - menu on mouse right-click

Accordion - collapsible content. header is always visible
Modal

  • Dialog - another naming


Card
Tabs
Stepper
Mansonry - feed with several columns and elements of different height
Pagination

;