HTML just happens

HTML just happens

Hypertext Markup Language is simply a means for creating hypertext in addition to the basic markup for plain text. Hypertext is when various contents (f.e. texts) reference each other and each are instantaneously ("hyperly") retrievable from the point of reference. The destination and the point of reference are each an "anchor". The destination anchor is within the same document or within another document.

In other words, the term "hypertext" refers to the interconnectedness of the various parts of the document or with other documents. The term "markup" means it can be added as easily as typing. The term "language" simply means it can be interpreted somewhat consistently.

# > requirements

Typically the only requirements for a document to be interpreted as HTML is having an ".html" extension on its filename and using it with an HTML viewer, f.e. a web browser.

Every computer since before the turn of the century (pre-2001) has had a basic text editor and an HTML viewer, straight out of the box, no extra costs. An HTML document is plain text, as plain as the keys on the keyboard, and can be typed and viewed without a website or a webserver.

Essentially, HTML documents are backwards-compatible, forwards-compatible, and cross-platform compatible with any operating system on any computer.

Start typing something, and then mark it up when helpful. Perhaps indicate the beginning of a new paragraph, or markup a numbered list or an unordered list. Maybe mark some text as a heading for a section. Or nothing at all, just leave it unmarked.

# > basic markup

The markup of HTML is written with the angle brackets < and > encapsulating the name of the markup, just like using parentheses. In that way, the markup is easily identified from the written text, there's no confusion what is text and what is markup. Technically, the names of the markup are case-insensitive, and can be typed as uppercase, lowercase, or a mix. Therefore the SHIFT-lock can be active for easily typing the angle brackets and the name in between.

An HTML viewer places and decorates the text according to the marks used within the text. It also is supposed to ignore extra spaces and blank lines, such as the text characters inserted by the space bar, the RETURN key or ENTER key, and the TAB key. Those are all consider to be equal and redundant spacing characters. Any group of those various spacing characters will be reduced to just a single character, the same as what is typed with the space bar on the keyboard.

# > paragraphs

Mark the beginning of each paragraph with <p> in order to have an HTML viewer display separate paragraphs of text. Additionally, any spacing characters at the beginning or ending of a paragraph will be ignored completely by an HTML viewer rather than be displayed.

Optionally, the ending of a paragraph can be marked with </p>. However, there is no need because an HTML viewer will automatically assume a paragraph ends at the mark beginning the next paragraph, or at the mark beginning a heading, or at the mark beginning a list.

Notably, the mark for ending a paragraph works only when there is a mark for beginning that paragraph. In other words, the ending means nothing without declaring a beginning, and that goes for any mark that can have an ending.

# > headings

There are six sizes of headings, the first is the largest and the sixth is the smallest. The fourth heading is usually the same size as the document text. They are named "h1" to "h6", f.e. <h1>. Headings must have their endings marked, f.e. </h1>.

# > lists

A numbered list is an ordered list, therefore its mark is named "ol". A list with bullets beginning each list item is an unordered list, marked as "ul".

A list item is marked as "li". A list item is assumed to end at the mark beginning the next list item, or at the mark for the ending of the list itself.

Optionally, the ending of a list item can be marked, but it's very unnecessary. A list itself must have its ending marked, f.e. </ol>.

# > bold and italic text

The mark for bolding text is named "b", and the mark for italicizing text is named "i". Of course, their ending marks are required to indicate when to stop bolding or italicizing.

# > images

An image is marked as "img", and has no ending mark. The source of the image is within the mark as a file path, or as a URL address.

<img src="an-image.jpg">
The source of the image is located relative to the document itself, t.i. in the same directory.
<img src="http://example.com/another-image.jpg">
The source of the image is a URL address.

# > hypertext markup

A location mark is named "a" for anchor. An anchor is an id for a destination, or it has a hypertext reference to a destination. Technically, an anchor can do both at the same time, but conventionally it's either one or the other.

The difference between being a destination and referencing a destination is declared within the beginning of the anchor mark. An anchor must have an ending mark.

<a id="a-name-for-this-anchor"> optional text or image </a>
The id can be any text without spacing characters. Conventionally, there is nothing between the beginning and ending marks of an anchor as a destination.
<a href="#a-name-for-some-other-anchor"> text or image </a>
A hypertext reference (a link) to some other anchor within the same document, often referred to as a fragment link. The octothorpe "#" indicates the name after it is of an anchor.
<a href="a-document-name.html"> text or image </a>
A hypertext reference (a link) to a document located in the same directory. Conventionally, the document name is for a different document.
<a href="a-document-name.html#a-name-for-an-anchor"> text or image </a>
A hypertext reference (a link) to a document, and then to a specific anchor within that document.

An hypertext reference can link to any document of any type on any computer, therefore it also can be a URL address. The octothorpe "#" indicates an anchor within an HTML document.

# > formalities

An HTML document can have descriptive marks at its very beginning, before its content. For example:

<meta charset="utf-8">
Ensure Unicode characters formatted as UTF-8 are interpretted correctly by the HTML viewer. The "meta" mark has no ending mark.
<title>site index</title>
Declare a title for the document, used as the name of the view. Never shown in the document. The "title" mark requires an ending mark.
<link rel="stylesheet" href="site-stylesheet_CHjn.html">
Declare a hybrid CSS+HTML stylesheet for styling the document with CSS. The "link" mark has no ending mark.

If desired, such an HTML document can be clarified with the optional "head" and "body" marks. The "head" mark would be before the descriptive marks for the document, and the "body" mark would be after them and before the document content. Though, usually an HTML viewer can deduce those sections because all the descriptive marks are conventionally placed before any content. Besides, the descriptive marks are never shown.

Furthermore, an "html" mark can be inserted before the "head" section, and its ending mark inserted after the body section. In that way, the "html" mark is said to contain the "head" and "body" sections. However, it's completely optional.

Before everything, at the very beginning of the document, even before the "html" mark (if any), there can be the <!DOCTYPE html> mark. There is no ending mark for it. The HTML standard declares a doctype is used only as a hack for HTML viewers that fail to abide by the HTML standard. In other words, a page might be interpretted differently in an HTML viewer without it, but will probably look fine anyway.

More in:
hybrid CSS+HTML stylesheet