As an HTML newbie, I’ve been gradually implementing more features into my articles over time. Initially all I used were headers, images, and paragraphs; very basic web content. Soon after I implemented symbols, videos, tables, and captions. I don’t want to bloat the site too much, but some variety of elements helps. As I’ve learned more, I’ve done some major restructuring to the boilerplate files I use. The CSS has evolved and shrunk and the HTML has been organized to header, main, and footer sections instead of just main content sprawling out. One day I ought to start using a static site generator to deal with manually rewriting pages, but that’s a different topic.
There’s still a lot of HTML and CSS features that I haven’t learned about, that’s why it’s important to learn more so that I don’t end up writing horrible HTML. Just like programming, web development should be written as efficiently as possible. There are several useful looking elements such as code blocks, ruby (not the language) syntax, collapseable details, and more that I might use. I figured I should write a “tech demo” of some nifty HTML features so I can refer to them later.
I have applied some CSS to prevent the hideous default looks from displaying.
<details>
This element may come in handy, it allows you to click to expand or collapse the content within it. In fact, the table of contents uses this element but with a different colour scheme.
Details demo
Hello, this text is collapseable. It’s probably useful for supplementary information that would be too long if it was just in the main section. The text next to the toggle button is changeable by the <summary> element. Here’s a small table.
| hello | there |
|---|---|
| small | table |
<ruby>
The Ruby element is very niche in usage but is cool; it’s basically designed for East Asian languages. Maybe this is something I can use if I ever decide to write more advanced articles about languages.
生 日 快 乐<code>, code blocks, and <kbd>
If I decide to write about anything that involves computer commands or code, a bit of CSS and divs can get this:
The ls command can be used with the -a flag to show all files in the
current directory.
$ ls -a
./ ../ .config/ .bashrc .cache/ example.txt
Keyboard inputs can also be easily distinguished using the <kbd> element.
Ctrl + Shift + Esc is a shortcut to open Task Manager in Windows.
Miscellaneous elements
This is a collection of elements that seem less important but nevertheless can have their uses.
<mark>
This is used to highlight text.
<pre>
This element renders raw text without any formatting done by the browser. As a result, you can have ASCII art:
く__,.ヘヽ. / ,ー､ 〉
＼ ', !-─‐-i / /´
／｀ｰ' L/／｀ヽ､
/ ／, /| , , ',
ｲ / /-‐/ ｉ L_ ﾊ ヽ! i
ﾚ ﾍ 7ｲ｀ﾄ ﾚ'ｧ-ﾄ､!ハ| |
!,/7 '0' ´0iソ| |
|.从" _ ,,,, / |./ |
ﾚ'| i＞.､,,__ _,.イ / .i |
ﾚ'| | / k_７_/ﾚ'ヽ, ﾊ. |
| |/i 〈|/ i ,.ﾍ | i |
.|/ / ｉ： ﾍ! ＼ |
kヽ>､ﾊ _,.ﾍ､ /､!
!'〈//｀Ｔ´', ＼ ｀'7'ｰr'
ﾚ'ヽL__|___i,___,ンﾚ|ノ
ﾄ-,/ |___./
'ｰ' !_,.
<ins> and <del>
This allows code blocks to have diff file-like syntax colouring. I can’t think of when I would ever use this, but who knows. Not to mention, the static site generator I use does automatic syntax highlighting.
if (m)
showhide(m->stack);
else for (m = mons; m; m = m->next)
showhide(m->stack);
- if (m) {
+ if (!m) {
arrangemon(m);
restack(m);
} else for (m = mons; m; m = m->next)
arrangemon(m);
Pure HTML is capable
Just these few elements are probably the most I’ll ever use for this website. Unless I want radical changes and add features such as posting comments (as if anyone would comment) or reading user input, I’m not going to need other elements that HTML supports. This is adequate, and if I can do all of my web development without becoming too complex that’s great.