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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!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 licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Mozilla Public License 2.0.