Hypertext Markup Language¶

Hypertext Markup Language, or HTML for short, is a markup language used to outline the DOM (Document Object Model) of a web page. Supplemented by Javascript and CSS, they are the languages which can be interpreted by web browsers. It is extended from SGML, or after HTML5, XML - which itself is extended from SGML.

Example¶

The following is an example of a HTML5 Hello World page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <title>Hello, World!</title>
</head>
<body>

<section>
    <h1>Hello, World!</h1>
</section>

</body>
</html>

Constructs¶

HTML has a number of simple constructs, that I will document here, that can be used to produce a simple web page. A number of these constructs come inherently from SGML.

Tags¶

SGML is a language built around tags. There are three types of tags - opening, closing, and self-closing tags. Combined opening and closing tags are used to form one node within the DOM, as is a singular self-closing tag. Previously (pre-HTML5) self-closing tags were syntactically shown by />, whereas no special syntax is required anymore.

Document Type Declaration¶

The first line of a HTML, or even as SGML or XML, document should be the document type, or DOCTYPE for short, declaration. Since HTML5's introduction <!DOCTYPE html> can simply be used as HTML from that point on is parsed as its own language, and cannot be parsed by a SGML parser. Prior to HTML5, a dtd file would have to be specified. The dtd file is used to describe the constructs that can be used within a SGML file.

Paragraph Text¶

Perhaps the most simple tag in HTML, is the paragraph text tag. Quite simply, they contain paragraph text and thats it. I think the best way to demonstrate, is an example: <p>Hello, World!</p>

Header Text¶

There is no better way to structure a document, than by use of headers. There are six sizes: 1-6. Again, the best way to demonstrate is by use of an example: <h1>Hi :D</h1>

Hyperlinks¶

Hyperlinks are links which reference another document from within a document. For example should I want to make a hyperlink to Donald Trump's Wikipedia page, with the text Donald Trump - I would write: <a href="https://en.wikipedia.org/wiki/Donald_Trump">Donald Trump</a>

Except as otherwise noted, the content of this page is licenced under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Mozilla Public License 2.0.