HTML Basic

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

see Internet Basic for detailed overview

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

<head> - element representing metadata of HTML document

see Head for more

<body> - element representing the content of HTML document

 - syntax for HTML comment

Common Attributes

form attributes - see Forms
hyperlink attributes - see Hyperlinks

Global

id - unique element identifier

value must not contain whitespaces

class - CSS class name(s). see CSS Basic

title - tooltip, which will be displayed once user point a cursor on element

lang - language of element content

lang set on <html> helps screen readers to determine the proper language to announce for the page

hidden - hides an element from the page

however it is still accessible via JS

dir - text direction

ltr - left to right
rtl - right to left

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

Common Elements

Most Basic

<div> - default block element
<span> - default inline element

semantic elements - in many cases they should replace <div> & <span>. see Accessibility

Lists

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

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

<dt> & <dd> are siblings

Inline

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

<cite> - citation

<code> - is used for code fragments. it highlights content

for multi-line code fragments, it can be wrapped with <pre>
such content has monospace font

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

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>

Other

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

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

such content has monospace font

Common HTML Entities

  non-breaking space & & ampersand * &ast; asterisk < < / < less than > > / > greater than ‹ &lsaquo; chevron left › &rsaquo; chevron right " " double quotes ' ' single quotes ( ( opening parenthesis ) ) closing parenthesis \ \ backslash | | vertical bar (pipe) € € euro © © copyright ✗ ✗ cross

see Character Encoding for detailed overview