1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XHTML Club - Everyone Should Become HTML Experts</title>
<link rel="shortcut icon" href="/favicon.png"/>
</head>
<body>
<p><a href="/">← back to XHTML Club homepage</a></p>
<hr/>
<h1>Everyone should become an HTML expert</h1>
<p><small>Posted on April 6th, 2021</small></p>
<p>No matter your profession or level of technical skill - you should master the HTML programming<sup><a href="#ft1">1</a></sup> language. It's used everywhere on the internet and is very simple to grasp. Since HTML uses logical standards for rendering content it becomes fairly simple to pickup and learn. More on that later.</p>
<h3>Why should you bother to learn HTML?</h3>
<ol>
<li><a href="#easy">Easy to pickup and easy to master</a></li>
<li><a href="#understanding">Better understanding of website structure</a></li>
<li><a href="#freedom">Ability to attain your own web freedom</a></li>
</ol>
<h2 id="easy">1. Easy to pickup and easy to master</h2>
<p>HTML is not a difficult language to understand. I also believe it is fairly easy to <em>master</em>, since the core concepts and structure of HTML is so intuitive. Let's look at a made-up example and you'll see what I mean.</p>
<p>Let's pretend that you want to display a page on the big <em>world wide web</em> showcasing your skills at baking cupcakes. Similar to creating a text or Word document on your computer using an application, you probably have a general idea of how the content should be displayed:</p>
<ol>
<li>Recipe title</li>
<li>Ingredients</li>
<li>Details</li>
<li>(<em>optional</em>) Picture of said cupcakes</li>
</ol>
<p>Seems simple enough, right? That's because <em>it is</em>. We can now start to work our way through these items one piece at a time.</p>
<h3>Recipe title</h3>
<p>Since this is the <b>heading</b> of our document (or web page in this context) we will use the HTML heading tag(s):</p>
<pre><h1>My Amazing Cupcakes</h1></pre>
<p>Remember how I mentioned HTML being fairly intuitive? Using <code>h1</code> tags, you're telling the browser to render the content within this tag as a <strong>number 1 level heading</strong> → h-1. If you instead wanted to render your headings at smaller sizes (or give them less importance in the document) you can cycle through all available heading tags <code>2</code> through <code>6</code>. Feel free to <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements">learn more about HTML heading elements</a>.</p>
<h3>Ingredients</h3>
<p>A document item like a set of ingredients would normally best be rendered out into a list. HTML has us covered with that as well:</p>
<pre><ul>
<li>Some sugar</li>
<li>Some flour</li>
<li>Some butter</li>
<li>Chocolate</li>
<li>Frosting</li>
</ul></pre>
<p>Which would render like this in the browser:</p>
<ul>
<li>Some sugar</li>
<li>Some flour</li>
<li>Some butter</li>
<li>Chocolate</li>
<li>Frosting</li>
</ul>
<p>The <code>ul</code> tag stands for <em>unordered list</em> and the <code>li</code> elements inside reference <em>list items</em>. Starting to see a simple pattern here? If you wanted to set your list to display as a set of <em>ordered</em> items, just set the parent tag as <code>ol</code> instead of <code>ul</code>. I bet you probably already figured that out though ;) Feel free to learn more about <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul">unordered</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol">ordered</a> list items.</p>
<h3>Details (Instructions)</h3>
<p>Now, you could set the recipe details/instructions to be set as another <code>list</code> element, but for this example we are going to render them as paragraph elements:</p>
<pre><p>Mix all the ingredients together however you think is best. These cupcakes aren't a real recipe anyway!</p>
<p>Make sure you don't burn the cupcakes. That would suck.</p></pre>
<p>I know- you're probably shocked that HTML renders <code>p</code> tags as <em>paragraphs</em>.</p>
<h3>Picture (optional)</h3>
<p>The content above would be more than enough for users to read our document and understand how to bake our delicious cupcakes. But a picture is worth a thousand words:</p>
<pre><img src="path/to/your/cupcakes/image" alt="Delicious chocolate cupcakes"></pre>
<p>Yet more intuitive greatness from the HTML gods! An image is represented within an <code>img</code> tag. You use the <code>src</code> (source) attribute to point the browser to the image's location. The <code>alt</code> (alternate text) is a helpful snippet of text that describes what the picture contains (required for those with disabilities or accessibility issues).</p>
<p>That's it!</p>
<h2 id="understanding">2. Better understanding of website structure</h2>
<p>By becoming fluent in HTML, you gain a much better understanding on how all websites across the web are constructed. Though a greater understanding of HTML has many benefits, I find having the ability to troubleshoot bugs or issues through a browser's <code>devtools</code> to be the most beneficial.</p>
<p>No matter your current job or future career path, being able to mention your expertise of HTML can only be seen as an added bonus to your skill-set. Do not underestimate the power to build website skeletons!</p>
<h2 id="freedom">3. Ability to attain your own web freedom</h2>
<p>The other benefits of learning HTML posted above are great - but I believe the best reason to become an HTML master is the <em>web freedom</em> associated with it. You gain the ability to create, edit and share your own website without the help of any 3rd party builders or locked-in content management systems. Instead, your workflow might be something like:</p>
<ol>
<li>Open a text editor</li>
<li>Begin writing out your content with semantic HTML</li>
<li>Save file as `index.html`</li>
<li>Upload to your web host</li>
</ol>
<p>And with free hosting services such as <a href="https://netlify.com">Netlify</a> or <a href="https://m.do.co/c/74b3fd11c07a">DigitalOcean</a> it's not like you'll be breaking the bank to have that website live on the interwebs! (You could go down the rabbit-hole of increasing your web freedom by self hosting your content etc - but I'll save that for another day)</p>
<h2>Wrapping up</h2>
<p>There can only be positives to gain from jumping into HTML and eventually mastering the language. It's the core skeleton implemented across the web (no matter how complex the framework used to get there might be) and isn't going away anytime soon. Some might advocate for becoming fluent in Markdown or a similar formatted text language but I would strongly advocate for the real deal: HTML.</p>
<p id="ft1"><small>1. This is a common debate - but for simplicity sake I'm just calling it this.</small></p>
<div id="footer">
<h3>Support XHTML</h3>
<p>All content posted on this website will always remain free to everyone. No pay-walls, obtrusive ads or annoying tracking cookies. Basically zero bullshit or fluff. If you feel like you would like to support my efforts in continuously posting free (<em>and hopefully interesting</em>) content, then please consider <a href="https://btxx.org/pizza">donating</a>.</p>
<h3>Colophon</h3>
<p>This website is hand-coded with valid XHTML and hosted with <a href="https://nearlyfreespeech.net">NearlyFreeSpeech</a>. Reach out on <a rel="me" href="https://mastodon.bsd.cafe/@bt">Mastodon</a></p>
<p>
<a href="https://validator.w3.org/check?uri=https%3A%2F%2Fxhtml.club%2Feveryone-should-become-an-html-expert.html">
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" />
</a>
</p>
</div>
</body>
</html>
|
