We’re looking this time at step 2 of the Cloud Resume Challenge: HTML. As I mentioned in my intro post, I’ve been making websites for a long time and I’m pretty comfortable and familiar with HTML. I’ve never used it to build a resume though so let’s see how we do!
For the uninitiated, HTML stands for HyperText Markup Language. Its tags tell your browser how content from a website should be structured on a page, by describing what each element is intended to be (what’s a heading, what’s a paragraph, what’s an image, etc…) It doesn’t (or shouldn’t any longer) describe how the content on the page should be styled; that’s what CSS is for. We’ll cover CSS in the next post but, for now, I’ll have to be content with my site looking rubbish!
On the face of it, this should be a simple exercise. My resume will mainly be compromised of headings & subheadings, paragraphs, and lists of stuff I’ve done. These elements are represented by the <hx> tags for headings (h1, h2, h3 etc, in a descending hierarchy) and <p> tags for paragraphs, like so:
(In case you’re interested, the editor I’m using here is Visual Studio (VS) Code. It’s free and it’s ace 👍)
Lists are a little bit different. First you declare that you’re starting a list, using either the <ol> tag for ordered lists (1, 2, 3, 4….) or the <ul> tag for unordered lists (bullet point, essentially.) Each list item is then tagged with <li> for “list item”:
You’ll notice that each element is opened and then closed in the format <p> content </p>. This is almost always the case but there are some exceptions. I am, for example, going to break up my sections using the <hr> tag (for “horizontal rule”) to add a divider. As this describes an element in and of itself (i.e. it doesn’t format any other content), a closing tag is not required:
I want to link out to things like my LinkedIn profile and GCP cert etc, so I’ll do this using hyperlinks. By wrapping the text with <a> and adding a href (Hypertext REFerence) value to the opening tag, the text becomes a clickable link:
Finally, as I’m planning to actually publicly host the page, I’ll add information to the <head> tag at the top. Apart from the page title, modern web browsers will automatically assume a lot of this info anyway but I’m all about best practice here, so I’ll add the required info:
OK, so by adding all my content in this way I now have a functional and semantically structured webpage:
”But Chris,” you say, “that looks like crap.” This is true; time for step 3: CSS…