Basic HTML Elements

Apr 16, 2018
Jul 4, 2019

Development

The main purpose of this article is to make sure that all basic HTML Elements are decorated with CSS so as to not miss any possible elements when creating new themes for Hugo.

Headings

Let’s start with all possible headings. The HTML <h1> — <h6> elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

According to the HTML5 specification by W3C, HTML documents consist of a tree of elements and text. Each element is denoted in the source by a start tag, such as <body>, and an end tag, such as </body>. (Certain start tags and end tags can in certain cases be omitted and are implied by other tags.)

Elements can have attributes, which control how the elements work. For example, hyperlink are formed using the a element and its href attribute.

Basic text formattting

this is in italic and so is this

this is in bold and so is this

this is bold and italic and so is this

~~this is strike through text~~

~~The world is flat.~~

Links

http://someurl

somebbob@example.com

Reference Link

I get 10 times more traffic from Google than from Yahoo or MSN.

Footnotes

This is a footnote.¹

List Types

Ordered List

First item
Second item
Third item

Unordered List

List item
Another item
And another item

Todo List

this is not checked
but this is checked

Nested list

First item
Second item
- Second item First subitem
- Second item second subitem
  - Second item Second subitem First sub-subitem
  - Second item Second subitem Second sub-subitem
  - Second item Second subitem Third sub-subitem
- Second item Third subitem
  1. Second item Third subitem First sub-subitem
  2. Second item Third subitem Second sub-subitem
  3. Second item Third subitem Third sub-subitem
Third item

Horizontal Rule

Definition List

term: definition
second term: second definition

HTML also supports definition lists.

Blanco tequila: The purest form of the blue agave spirit...
Reposado tequila: Typically aged in wooden barrels for between two and eleven months...

Block quotes

Use it if you’re quoting a person, a song or whatever.

You can use italic or lists inside them also. And just like with other paragraphs, all of these lines are still part of the blockquote, even without the > character in front.

To end the blockquote, just put a blank line before the following paragraph.

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.

My goal wasn't to make a ton of money. It was to build good computers. I only started the company when I realized I could be an engineer forever.

— Steve Wozniak

According to Mozilla's website, Firefox 1.0 was released in 2004 and became a big success.

Table

First Header	Second Header
Content Cell	Content Cell
Content Cell	Content Cell

ID	Make	Model	Year
1	Honda	Accord	2009
2	Toyota	Camry	2012
3	Hyundai	Elantra	2010

Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

Other stuff — abbr, sub, sup, kbd, etc.

GIF is a bitmap image format.

H₂O

C₆H₁₂O₆

X ⁿ + Y ⁿ = Z ⁿ

Press X to win. Or press CTRL+ALT+F to show FPS counter.

As a unit of information in information theory, the bit has alternatively been called a shannon, named after Claude Shannon, the founder of field of information theory.

Multimedia

Images

alternate text

Videos

[[embed url=http://www.youtube.com/watch?v=6YbBmqUnoQM]]

Hacks

smallest still: `<h6>` header

the footnote text. ^[return]