--- title: Basic HTML Elements description: Example test article that contains basic HTML elements for text formatting on the Web. date: 2019-01-15 categories: - "Development" tags: - "HTML" - "CSS" - "Basic Elements" --- 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 `

`—`

` elements represent six levels of section headings. `

` is the highest section level and `

` is the lowest. # Heading 1 ## Heading 2 ### Heading 3 #### Heading 4 ##### Heading 5 ###### Heading 6 * ## Paragraph According to the [HTML5 specification](https://www.w3.org/TR/html5/dom.html#elements) by [W3C](https://www.w3.org/), HTML documents consist of a tree of elements and text**. Each element is denoted in the source by a [start tag](https://www.w3.org/TR/html5/syntax.html#syntax-start-tags), such as ``, and an [end tag](https://www.w3.org/TR/html5/syntax.html#syntax-end-tags), such as ``. (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. ## List Types ### Ordered List 1. First item 2. Second item 3. Third item ### Unordered List * List item * Another item * And another item ### 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

Second item Third subitem First sub-subitem

Second item Third subitem Second sub-subitem

Second item Third subitem Third sub-subitem

Third item

### Definition List 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...

## Blockquotes 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. > Quoted text. > This line is part of the same quote. > Also you can put Markdown into a blockquote. Blockquote with a citation.

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. ## Tables Tables aren't part of the core Markdown spec, but Hugo supports them. | ID | Make | Model | Year | | --- | --------- | ------- | ---- | | 1 | Honda | Accord | 2009 | | 2 | Toyota | Camry | 2012 | | 3 | Hyundai | Elantra | 2010 | Colons can be used to align columns. | Tables | Are | Cool | |:----------- |:-------------:| ------------:| | align: left | align: center | align: right | | align: left | align: center | align: right | | align: left | align: center | align: right | You can also use inline Markdown. | Inline | Markdown | In | Table | | ---------- | --------- | ----------------- | ---------- | | italics | bold | strikethrough | `code` | ## Code ```html Example HTML5 Document
Test
``` ## Highlighted Code {{< highlight html >}} Example HTML5 Document
Test
{{< /highlight >}} ## 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.