Skip to content

Instantly share code, notes, and snippets.

@kieranbarker

kieranbarker/index.html

Created June 28, 2023 11:23
Show Gist options
  • Save kieranbarker/60698490ff80331c7120bde02ddc110d to your computer and use it in GitHub Desktop.
Save kieranbarker/60698490ff80331c7120bde02ddc110d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<header>
<h1>Hypertext Markup Language</h1>
</header>
<main>
<p>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML"><b><i>Hypertext Markup Language</i> (HTML)</b></a> is the most basic building block of the Web. While <a href="https://developer.mozilla.org/en-US/docs/Web/CSS"><i>Cascading Style Sheets</i> (CSS)</a> describes a web
page&rsquo;s appearance/presentation, and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"><i>JavaScript</i> (JS)</a> describes a web page&rsquo;s functionality/behaviour, <strong>HTML defines the meaning and structure of web content.</strong> <i>Hypertext</i> refers to web pages connected by hyperlinks, while <i>markup language</i> means we use
special tags to describe different types of content, known as <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">HTML elements</a>.
</p>
<p>
Even the simple web page you&rsquo;re viewing right now contains <b>22</b> different HTML elements:
</p>
<ol>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"><code>a</code></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside"><code>aside</code></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b"><code>b</code></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body"><code>body</code></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code"><code>code</code></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em"><code>em</code></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h1"><code>h1</code></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h2"><code>h2</code></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head"><code>head</code></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header"><code>header</code></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html"><code>html</code></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i"><code>i</code></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li"><code>li</code></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link"><code>link</code></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main"><code>main</code></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta"><code>meta</code></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol"><code>ol</code></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p"><code>p</code></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre"><code>pre</code></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong"><code>strong</code></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title"><code>title</code></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul"><code>ul</code></a></li>
</ol>
<aside>
<p>
<b>Fun fact!</b> I wrote the following JavaScript code to find the unique HTML elements on this page. Try <a href="https://developer.chrome.com/docs/devtools/console/javascript/">running it in the DevTools Console</a>:
</p>
<pre><code>Array.from(
new Set(
Array.from(document.querySelectorAll("*"), el =>
el.tagName.toLowerCase()
)
)
);</code></pre>
</aside>
<h2>Semantics</h2>
<p>
<strong><a href="https://developer.mozilla.org/en-US/docs/Glossary/Semantics"><i>Semantics</i></a> is the most important concept when it comes to HTML.</strong> This means you should use an HTML element for <em>the type of content it represents,</em> not its visual appearance. Remember, styling is for CSS! This is important for a few reasons:
</p>
<ul>
<li>
<b>Accessibility:</b> screen readers rely on semantic HTML to help visually impaired users navigate the Web.
</li>
<li>
<b>Searchability:</b> semantic HTML helps search engines understand the structure of web pages, making them easier to crawl and index.
</li>
<li>
<b>Readability:</b> chunks of semantic HTML are much easier for developers to parse than endless <code>div</code> elements with no semantic value.
</li>
</ul>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment