If HTML were a written language, it would be just the letters.
If HTML were paint-by-numbers artwork, it would be the canvas.
<html>
<body style="font: sans">
<!-- nothing to see yet -->
<Hello & Goodbye!> ♥
</body>
</html>
- What HTML is
- Example
- What HTML is not
- Styles
- Scripts
- DOM
- "Semantic" HTML
HTML is a "markup" language - which basically means that it's a language for writing messages, books, and research papers.
HTML doesn't do much of anything on its own, but it creates a place for other things to go.
HTML was intended for the web of papers being shared by researchers, not the world of web apps as we know it today.
In today's web it is the "scaffolding".
You can think of it as the initial lines and numbers of a paint-by-numbers canvas - it gives other things a place to go.
It is an extremely small language - smaller than any other language you'll learn.
In fact, there are less than 10 things to learn:
| # | HTML thing | Looks like... |
|---|---|---|
| 1 | HTML definition | <!DOCTYPE html> (exactly this) |
| 2 | Text | Literally, whatever... (cats jumps on keyboard => valid html) |
| 3 | Tags | <foo /> or <foo></foo> (angle brackets) |
| 4 | Attributes | <foo bar="baz" /> (the bar="baz" part) |
| 5 | Comments | <!-- literally, whatever... --> (begins with <!-- , doesn't ends until -->) |
| 6 | Escapes | & or ♥ (a few dozen by name, thousands by number) |
| . | ... | ... |
| 7 | exceptions | <script>, <style>, <svg> and a few others are treated special (like comments) |
Likewise...
| Syntax | Use |
|---|---|
<!DOCTYPE html> |
Defines the type of html |
<tag></tag> |
HTML tag |
<tag /> |
Self-closing HTML tag |
<tag attr="value"> |
Tag attributes |
©♥ |
HTML escape |
<!-- comment --> |
Comment block |
Plain Text |
Everything else is text |
- Do nothing for
<!DOCTYPE html> - If you see
<!--(including the space) ignore everything until--> - If you see a tag, make a mental note of it.
- If you see one of the exceptional tags, ignore (including other special tags and comments) until the closing tag
The entire language, demonstrated in a single example:
<html>
<body style="font: sans">
<!-- <Hello & Goobye!> ♥ -->
<Hello & Goodbye!> ♥
</body>
</html>- NOT a programming language. You cannot add numbers. You cannot create a loop. Absolutely no programming.
- NOT used to specify how something should look. You do not color, shape, or size something with HTML (exception: email)
- NOT something to brag about.
If you knew what HTML was, you wouldn't put it on your resume.
(and if you knew enough to brag about, no one reading would understand)
Specifically, HTML is NOT:
- DOM
- JavaScript, WebGL, or Web Assembly
- CSS or SVG
It is a language, but it isn't "code". You cannot use it to add or loop.
CSS provides instruction for the:
- shape
- size
- color
- and appearance
JavaScript provides instruction for:
- how to listen
- how to respond
- what to do in between
The "Document Object Model" is a fancy word for... Web App.
For the most part, HTML has no well-defined meaning.
There are many guidelines and common conventions, and when you follow the guidelines that is called "semantic HTML".
| Tag | Semantic Usage |
|---|---|
<ul> |
Unordered List (a bullet, or unlabeled, list) |
<ol> |
Ordered List (a numbered, lettered, or otherwise labeled list) |
<li> |
List Item (a simple item, such as short text or small image, in sequence) |
<table> |
Spreadsheet-like data, organized in a fairly straight-forward copy-paste fashion |
<section> |
A well-defined portion of text, such as "Section 1.2 b" in a text book |
<footer> |
The type of information you'd include at the end of a physical article or book |
| ... | ... |
| much more | There are dozens of others |
The primary reason to use semantic HTML is to make it easy for screen readers and other assistive technology (ex: Siri, Google, Safari Reader Mode) understand how to present content to a user despite your styling.
See also https://www.w3schools.com/html/html5_semantic_elements.asp.
If you actually are familiar with Semantic HTML, then you would be putting words like "Accessibility" and a11y on your resume.
If it sounds cool... DON'T DO IT!
HTML is boring. Anything that makes it not boring typically breaks web pages and web apps.
Ever tried to load a page on your phone, but you can't get to it because it's scaled wrong and has so many popups for cookies and subscribe widgets and such that you literally can't read the information on the page? Cool stuff, huh?
