HTML (Hyptertext Markup Language) is the primary language used to code web page content.
Hypertext is text that has references, or links, to other content a user can access. Figure 1 shows an example of linked documents.
Markup Language refers to the labels and rules used to identify links and other parts of text documents. The HTML language uses hidden labels called tags. They are created with angled brackets, as in the following example:
<h1>Sample HTML Code</h1>
<li>h1: headings element</l1>
<li>ul: bulleted list element</l1>
<li>li: list item element</l1>
Semantics is the study of meaning. HTML should only be used to mark up the sementics of web pages. HTML elements identify document parts and structures so web browsers and search engines can understand them (Figure 2).
The HTML language is relatively small, and is limited to marking up document parts that that require graphic design or user interactions. Web developers use other languages to code those design styles and interactive features. To organize their work, developers follow a principle called separation of concerns. Code for each type of task is placed in different locations — usually separate text files — where they can be easily found and reused (Figure 3).
The current version of the HTML language is HTML5. Version 5 removed and redefined old elements that did not have a semantic use, and added some new ones. The HTML5 specification lists all allowed elements and rules for using them.
HTML documents are marked up using elements. An HTML Element identifies a specific part of a document, and consists of content surrounded by an opening tag and a closing tag. The tags are interpreted by programs like web browsers and search engines, and are hidden from the user's view.
Elements begin with an Opening Tag. The opening tag starts with a left-angled bracket, and is immediately followed by the name of the element being used. The opening tag may optionally include one or more attributes, and ends with a right-angled bracket.
Attributes are optional name-value pairs used to define additional properties for the element. The Attribute Name is followed by an equal sign and then its Attribute Value, usually enclosed in double quotations.
The content inside an element may include text, character references, comments, and nested elements. SVG graphic definitions and MathML formulas are also allowed, but are rarely used due to poor browser support.
Elements end with a Closing Tag. The closing tag starts with a left-angled bracket, and is followed by a forward slash, the element name, and a right-angled bracket.
A validator can be used to check if HTML syntax is written correctly.
Most errors are caused by simple typos or incorrect punctuation. Here are some common mistakes:
The element name does not exist in the specs, or is used where it is not allowed. The following example is wrong because "highlight" is not an element in the HTML5 specification.
Search the web for the real HTML5 element used to highlight text. You should find the name of the element is mark, not highlight.
Required closing tags are missing, or typed incorrectly. In this example, what should be </p> is written with the closing slash in the wrong place.
The example can be fixed by moving the closing slash from after the letter p to before the letter p.
Elements are not closed in reverse order. The first element opened should be the last element closed. The closing tags are reversed in the following example.
Swap the order of the closing paragraph and strong tags to fix this example.
The attribute name does not exist in the HTML5 specifications
Search the web for the real HTML5 attribute used to specify the language. It is lang, not language.
The rules for writing HTML5 are very flexible. The creators of the HTML5 language assumed the average person won’t learn a lot of technical rules.
The result can be valid markup that looks like a complete mess:
<BLOCKQUOTE> <p LANG= en>This is a blockquote & paragraph demo <BR>Line 2. This is the second line of the quote</Blockquote>
Since unorganized, inconsistent code can be hard to read and maintain, most recommend following a style guide with consistent rules for writing code. Different guides have different rules. Here is a common style guide:
<blockquote> <p lang="en">This is a blockquote & paragraph demo.<br> Line 2. This is the second line of the quote </p> </blockquote>
A code styling tool can be used to quickly fix formatting and style issues in code. A popular tool is Dirty Markup