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 detailed overview

<body> - element representing the content of HTML document

 - syntax for HTML comment

Basic Elements

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

Semantic Elements

semantic element - the one, which explains the meaning of content it contains by tag's name

almost all elements except <div> & <span> are more or less semantic. usage of semantic elements is much preferable due to accessibility

Page Layout

<header> - introductory content on top. typically contains logo, navigation
<main> - main content
<footer> - content on bottom. typically contains copyright, links to related pages

<nav> - navigation
<aside> - sidebar

Content Structure

<section> - is more generic. groups related content
<article> - is more specific. represents standalone piece of content

<h1> -> <h6> - headings of different levels

hints: it is good practice to only have 1 <h1> on a page, due to SEO

<p> - paragraph

Inline

<strong> - marks text with greater importance than surrounding text

by default is bold

<b> - is used for text less important than the one wrapped with <strong>, but still requiring user's attention

by default is bold
tag name comes from "bold", but in following versions of HTML it is called "bring attention"

<em> - emphasis element

by default is displayed in italic

<i> - marks text, such as terms, scientific names, foreign words, etc.

by default is displayed in italic
tag name comes from "italic", but in newer versions of HTML it is called "idiomatic"

<cite> - citation. e.g. name of a painting, movie, article
<s> - strikethrough element. marks content that is no longer relevant
<u> - historically was used for underline, but nowadays is almost unneeded

tag name comes from "underline", but in newer versions of HTML it is called "unarticulated"

neither of the foregoing inline elements should be used just for styling, since they bring special semantic meaning
for pure decorating CSS should be used instead:
font-weight: bolder equals <strong> & <b>
font-style: italic equals <em> & <i>
text-decoration: underline equals <u>
text-decoration: line-through equals <s>

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

<code> - is used for code fragments, both inline and multi-line

by default is emphasized with gray background and gets monospace font
for multi-line code fragments, it is often wrapped with <pre>

<time> - marks date and/or time

datetime - attribute, which translates date and/or time into machine-readable format, what can be useful for SEO. e.g. datetime="08:00"

<var> - marks variable in mathematical expression

Lists

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

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

<dt> & <dd> are siblings

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

Embedded 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

<br> - line break

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

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

such content gets monospace font

<figcaption> - figure caption. is used to add caption for self-contained content. e.g. for an image
<figure> - wrapper for content and caption for it

<figure>
  <img src="/lion.jpeg" alt="Lion lying on his side" >
  <figcaption>Unlike most big cats, lions are the only cats that live in social groups called prides</figcaption>
</figure>

more elements can be found in respective articles

Global Attributes

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

tabindex - attribute, which indicates whether element can be focused on and how soon

0 - default value
<n> - specifies the tabbing order of an element
-1 - element can't be reached with tab. however such element can still be focused via JS

accesskey - specifies a shortcut key to activate or bring focus to an element

works especially well with <a>, <button>, <form>

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

until-found - element will be hidden only until revealed. e.g. with browser's cmd+F page search

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

attributes for specific elements can be found in respective articles:
form attributes - see Forms
hyperlink attributes - see Hyperlinks
etc.

Common HTML Entities

* *		non-breaking space
&	&	ampersand

< / <	<	less than
> / >	>	greater than

&lsaquo;	‹	chevron left
&rsaquo;	›	chevron right

"	"	double quotes
'	'	single quotes

\	\	backslash
\|	\|	vertical bar (pipe)

€	€	euro
©	©	copyright
✗	✗	cross

see Character Encoding for detailed overview

* *		non-breaking space
&	&	ampersand

< / <	<	less than
> / >	>	greater than

&lsaquo;	‹	chevron left
&rsaquo;	›	chevron right

"	"	double quotes
'	'	single quotes

\	\	backslash
\|	\|	vertical bar (pipe)

€	€	euro
©	©	copyright
✗	✗	cross

* *		non-breaking space
&	&	ampersand

< / <	<	less than
> / >	>	greater than

&lsaquo;	‹	chevron left
&rsaquo;	›	chevron right

"	"	double quotes
'	'	single quotes

\	\	backslash
\|	\|	vertical bar (pipe)

€	€	euro
©	©	copyright
✗	✗	cross

* *		non-breaking space
&	&	ampersand

< / <	<	less than
> / >	>	greater than

&lsaquo;	‹	chevron left
&rsaquo;	›	chevron right

"	"	double quotes
'	'	single quotes

\	\	backslash
\|	\|	vertical bar (pipe)

€	€	euro
©	©	copyright
✗	✗	cross