Minmally mark regions of a document for an alternate view of it, while keeping its plain and simple view. One document, two views, compatible with any computer system and without need of special software.
Hypertext Markup Language is simply a means for creating links (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 address 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 is a set of keywords.
An HTML document is plain text, as plain as the buttons on a buttonboard. It can be typed and viewed with no website, no webserver, and no internet connection. Contrarily, there is usually an artificial requirement insisted upon by a computer program or some operating systems: the ".html" suffix for its filename.
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. 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.
This sample is also affected by the CSS rules of the stylesheet for this website. Turn off interpretation of CSS within the HTML viewer in order to see the default results of that HTML viewer. Or, create a new document with just the marks in the "Markup" section; no other HTML marks are needed, of course.
As an example, the heading has a marked location in it instead of before it, and it has a link to that location (a.k.a. a fragment link), too. That link is just the octothorpe "#" symbol, but could have been any other text.
A paragraph introducing an unordered list.
A list item region in an unordered list, with marked paragraphs.
Another paragraph in this list item.
Another paragraph, this one introducing an ordered list.
Another list item.
<h2>
<a id="example-one"></a>
<a href="#example-one">#</a>
</h2>
<p>As an example, the heading has a marked location in it instead of before it, and it has a link to that location (a.k.a. a fragment link), too. The link is just the octothorpe "#" symbol, but could have been any other text.
<p>A paragraph introducing an unordered list.
<ul>
<li>
<p>A list item region in an unordered list, with marked paragraphs.
<p>Another paragraph in this list item.
<li>Another list item, without a paragraph mark.
</ul>
<p>Another paragraph, this one introducing an ordered list.
<ol>
<li>A list item with a link to info about <a href="stylesheet.css.htm#sample-markup">styling samples of HTML markup</a>, which is a link to a location within another document.
<li><p>Another list item.
</ol>
<p>.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
<ol> or <ul>, with <li>.
<b> and <i>.
<img src="filepath">.
Marked regions of a document will be shaped with pre-defined spacing and drawn with pre-defined line thickness. Therefore, the whole point of markup is to mark regions of the document when helpful, such as a paragraph or a list.
For example, a paragraph is commonly drawn with margins before and after it, and each list item of a list is commonly drawn with indentation. Text written by hand is sometimes drawn with thicker lines or slanted, characteristics commonly known as bold or italic, and regions can be marked with HTML to be drawn similarly by a computer.
In other words, an HTML viewer draws lines of various characteristics at various locations, such as text, and places those drawn lines according to the type of regions marked within the document, such as paragraphs.
Marking a document when helpful keeps it readable in a plain text viewer without the need for an HTML viewer. The latter merely provides an alternate view of the document.
The markup of HTML is written with the angle brackets < and > encapsulating the name of the markup, just like using parentheses, f.e. <p> for beginning a paragraph region. In that way, the markup is easily identified from the written text, there is 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.
Perhaps obviously from the aforementioned pre-defined spacing, an HTML viewer ignores extra spaces and blank lines in the document. Any group of text characters inserted by the SPACE bar, the RETURN key or ENTER key, and the TAB key will be reduced to just a single space character in the HTML viewer. Therefore, extra spacing helpful for viewing as plain text can usually remain while still benefiting from the alternate HTML view of the document.
# A paragraph region: <p>.
Mark the beginning of each paragraph with <p> in order to have an HTML viewer display separated paragraphs of text.
Notably, any spacing characters at the beginning or ending of a paragraph will be ignored completely by an HTML viewer rather than be displayed. Specifically, no indentation will appear from any spaces typed after the beginning <p> mark and before the first word.
Optionally, the ending of a paragraph can be marked with </p>. However, there typically 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.
# Six sizes of headings: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
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>.
# A list and its list items: <ol> or <ul>, with <li>.
A numbered list is an ordered list, therefore its mark is the abbreviated name "ol", t.i. <ol>. A list with bullets beginning each list item is an unordered list, marked as <ul>.
A list item is marked with the abbreviated name "li", t.i. <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 is very unnecessary. A list itself must have its ending marked, f.e. </ol>, and that is also enough to signal its ending of the final list item.
# Thicker lines or slanted lines for text: <b> and <i>.
Sometimes text written by hand is drawn with thicker lines or slanted lines, whenever it is helpful or more comfortably legible or desired.
Similarly, a computer draws lines thicker for text within a marked region beginning with <b> and ending with </b>, commonly known as "bold". Text is drawn with slanting lines when within a marked region beginning with <i> and ending with <i>, for "italicize".
Of course, their ending marks are required because there is no reliable way for the computer to guess when to stop using thicker or slanting lines.
# An image: <img src="filepath">.
An image is referenced with a mark with the abbreviated name "img", and has no ending mark because it is simply removed and replaced with the image itself (when available). The source location of the image is recorded within the mark as a file path, or as a URL address.
<img src="an-image.jpg">
<img src="http://domain.tld/another-image.jpg">
A location mark is named "a" for address. An address has either an id attribute for naming a destination within a document, or it has a href attribute (hypertext reference) to a destination. Technically, an address mark can do both at the same time, but conventionally it is either one or the other.
The difference between being a destination and referencing a destination is declared within the beginning of the address mark <a>. An address mark must have an ending </a>.
<a id="a-name-for-this-location"></a>
The id can be any text without spacing characters. Conventionally, there is nothing between the beginning and ending marks of an address as a destination.
<a href="#a-name-for-some-other-location"> text or image </a>
A hypertext reference (a link) to some other location within the same document, often referred to as a fragment link. An octothorpe "#" precedes the name (id) of a location within a document.
<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-a-location"> text or image </a>
A hypertext reference (a link) to another document, and then to a specific location 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 "#" delimits the address of the document from the name of a location within that document.
Change the default characteristics of any mark with the style attribute for it. A colon associates a characteristic with its value, and a semicolon separates characteristics. Optionally use spaces around the colon or semicolon for clarity.
For example, set the width of a paragraph and center it horizontally.
<p
="
>For example, set the width of a paragraph and center it horizontally.
A document can be described at its very beginning, before any of its content. Many of the special marks for describing a document are without endings because they contain information about the document within the mark, after the name between the < and >. Some of the special marks do have endings, however, the text in between is never shown in the alternate view of the document.
<meta charset="utf-8">
Ensure Unicode characters formatted as UTF-8 are interpreted correctly by the HTML viewer. The <meta> mark has no ending mark, only attributes.
<title>name or subject of document</title>
Declare a title for the document, used as the name of the HTML view for the document. However, it is never shown within the document. The document <title> region requires an ending mark.
<link rel="stylesheet" href="site-stylesheet.html">
Provide the filepath of a CSS stylesheet for declaring the preferred characteristics of the HTML marks. The rel attribute declares the referenced document is a "stylesheet", and the href attribute has the filepath, potentially a URL. The <link> mark has no ending, only attributes.
If desired, an HTML document can be clarified with the optional <head> and <body> marks. The <head> marks the region for describing the document, with special marks exclusively for that pupose as aforementioned. After that, the <body> mark begins the region for the document content. Though, usually an HTML viewer can deduce those regions. All the types of marks that are for describing a document, if any are used, are conventionally placed before the actual content of the document.
Furthermore, an <html> mark can be inserted as the first mark, therefore before the head region, and its ending mark inserted at the very end of the document, therefore after the body region. In that way, the <html> mark is said to mark the whole document. However, it is completely optional because it is already assumed.
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 compensating for HTML viewers that intentionally fail to abide by the HTML standard. In other words, a page might be interpreted differently in some HTML viewers when without it. Such poorly programmed HTML viewers or web browsers ought to be replaced with other programs that display documents properly without that mark, because that mark officially has no defined implications.