# HTML
(HyperText Markup Language)
**Related:** [[CSS]] | [[JavaScript]]
[Living Standard](https://html.spec.whatwg.org/multipage/)
## Guides
[Cheat Sheet](https://htmlcheatsheet.com/)
[W3](https://www.w3schools.com/html/default.asp) | [[W3 HTML Tutorial]]
---
## Commonly Used
##### Comment
- not displayed by browser
- can be used in-line
```html
<!-- comment here -->
```
^4618c8
##### Line Break
```html
<br />
```
or
```html
<br>
```
^b9be28
(not sure difference)
##### Symbols
`👍` 👍
`✔` ✔
`✘` ✘ ^ab80ad
##### Collapsible Text
<details>
<summary>Optional Header</summary>
More information here
</details>
```html
<details>
<summary>Optional Header</summary>
More information here
</details>
```
^1061a8
##### Headers
```html
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
```
^ae3ea5
##### Paragraphs
```html
<p>This is a paragraph.</p>
```
##### Bold
```html
<strong>bold text</strong>
```
^39e437
##### Italics
```html
<em>this is italicized</em>
```
^7d048b
##### Bold and Italics
```html
<em><strong>really important</strong></em>
```
**Note:** The order of the `em` and `strong` tags might be reversed depending on the Markdown processor you're using.
##### Lists
```html
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
```
^33c5e1
Renders as:
<html>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
</html>
```html
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
```
^58e007
Renders as:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
```html
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item
<ul>
<li>Indented item</li>
<li>Indented item</li>
</ul>
</li>
<li>Fourth item</li>
</ul>
```
Renders as:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item
<ul>
<li>Indented item</li>
<li>Indented item</li>
</ul>
</li>
<li>Fourth item</li>
</ul>
##### Code
```
<code>insert your code here</code>
```
^4ed4bd
##### File Path Info
[file path info](https://www.w3schools.com/html/html_filepaths.asp)
```html
<img src="picture.jpg">
<img src="images/picture.jpg">
<img src="/images/picture.jpg">
<img src="../picture.jpg">
```
## [[API]]
[[API#HTML]]
`=this.file.outlinks`
## Details
```dataview
LIST
FROM "Tech/Developer/Details"
WHERE contains(developer-detail-owner,"HTML") or contains(file.outlinks,this.file.link)
```
---
## [[CSS]]
Can link to external CSS file
Example:
```html
<link rel="stylesheet" href="/html/styles.css">
```
---
## Pros/Cons of HTML as a Coding Language
### Benefits of HTML [^1]
- Benefits of using HTML include creating well-structured, standards-compliant web pages that are easy to maintain and update.
- HTML is also easy to learn and is a great starting point for those new to web development.
- HTML is used to structure and present content on the web and is typically used alongside CSS and JavaScript.
- Additionally, HTML5 provides better multimedia and interactive content support, making it a powerful tool for creating engaging web experiences.
- HTML5 is the latest version and includes new features like video and audio elements, local storage, and 2D/3D graphics. HTML5 is designed to be more user-friendly and efficient than previous versions of HTML.
### Cons of HTML [^1]
A few potential drawbacks exist to using HTML as a web development language.
- First, because HTML is a markup language, it is not as expressive as a programming language like JavaScript or PHP, which means that complex web applications or pages can be more challenging to develop in HTML.
- Additionally, HTML is not a very secure language, so web developers must carefully encode any user input to prevent security vulnerabilities properly.
- Finally, HTML can be somewhat challenging to learn for newcomers, as it has a lot of different elements and syntax rules
[^1]
[^1]:https://www.simplilearn.com/best-programming-languages-start-learning-today-article
---
## Resources
[[Resource Index|All Resources]]
[APIs in HTML](https://www.smashingmagazine.com/2017/02/designing-html-apis/#:~:text=HTML%20APIs%20usually%20consist%20of,the%20page's%20JavaScript%20or%20CSS.)
```dataview
LIST
FROM [[]]
WHERE !contains(fileClass, "Primary") and contains(file.folder,"Resources")
Sort file.name
```
---
## Also See
[[Obsidian Display Features]]
[[Webpage HTML Export]]