Code Speed Dating: Meet HTML
Welcome to Code Speed Dating, where we’ll take a 5-minute-read approach to introducing different coding languages. After all, we’re busy folks, and don’t have time unless we like what we see…
Meet HTML: Structural, mature and stable
This week on Code Speed Dating, we meet a mature gentlecode that isn’t technically even a code. As its name suggests, HyperText Markup Language is a markup language that builds the frameworks of every website you load into your browser.
A markup language is a web page structuring language that uses <tags><like> <this> to articulate which parts of the page are structural, versus content.In other words, you never actually see the tags in the rendered web page. You just see the content, neatly organized and presented according to the placement of tags. Other popular markup languages include XML and XHTML, which allow for more customized, semantic tagging, like <blogcontent> for the main content section of your blog, so you know exactly what sections are what upon looking at your code.
What you need to know is that you’ll be using HTML or its similar markup language buddies in every web site you create! Essentially, we can look at HTML as the frame of a house (web site), defining the barriers between spaces and structure of rooms relative to each other. HTML has an incredibly important job, and does it very well.
In its most recent version, HTML5, we were given some really cool effects and added visual functionality from HTML, and even some interactivity. As you’ll see, in terms of cool design features, there is beginning to be a lot of blurring between languages like HTML, Cascading Style Sheets (CSS) and JavaScript.
Ok, what’s HTML look like?
I know you’re eager to get to the looks of this structural master, so let’s look under the hood. (And yes, I’m aware that this may be a little difficult to read, layout-wise. I’m working on it!)
Basic HTML structure
A web site, in its most basic form, consists of the following HTML markup tags. These are the essentials, and the content of your site goes between the <body> tags:
<html> <head> <title> Your page title goes here </title> </head> <body> The content of your web page goes here. </body>
</html>
For a more detailed breakdown of HTML tags and what they actually translate to in English, check out these links:
Page headers
Headers are an important part of HTML. They’re a quick way to set emphasized text prefacing different sections of your content.
<h1> This is an H1 header, which typically has the most pronounced presence </h1>
When your page loads, an <h1> tag will look like something similar to this:
This is an example H1 header
…and so on, and so forth.
Note: Keep in mind that appearances will vary greatly because all HTML elements can be styled using CSS! This is just how my particular blog’s header style is defined.
The Treehouse Web Design track
You can sign up for a free 7-day trial on Treehouse and see how you like the format — it was by far the best introduction to Web Design and HTML that I’ve experienced, but I’m always open to hear other folks’ experiences with it!
The Web Design track on Treehouse is home to both the basic and more advanced requirements of front-end web development, including HTML, Cascading Style Sheets (CSS), and JavaScript. (As I mentioned in my last Code Speed Dating, JavaScript is a lot more intricate and has earned its own separate track, the Full-Stack JavaScript track, which makes an excellent next step after the Web Design track.)
If you are interested in becoming a front-end web developer, the Web Design track should give you all the tools you need to get started! By the end of the track, you will have created a website that you can add to your online portfolio, and start showing off your new skills!
Careers using HTML
HTML is a prerequisite language for any designer or developer, front- or back-end, because it is the backbone of any web site. Front-end web developers will use HTML tags to structure out a page, then style it to make it more customized and attractive using Cascading Style Sheets (CSS). Pretty much any position with “web designer” in the title is going to expect some degree of expertise with HTML. Fortunately, it isn’t difficult to master, and we’ll be learning more about CSS in a future Code Speed Dating release.
On the back-end, HTML tags are the structural anchors that allow us to target certain parts of a web page to do cool things, or load in information dynamically. Knowing which tags do what is imperative, and generally makes our jobs a lot easier!
Freelancing? As I mentioned above, you’ll need to at least be comfortable with HTML in order to set up a client’s site, style it with CSS, and make it functional using JavaScript or other back-end languages.
What do you find exciting about HTML? Feel free to weigh in on what you love and hate about it, and what cool things you’ve done using HTML5 in the comments! As always, you can also keep the discussion going on the La Vie en Code Facebook page, or via Twitter @lavie_encode. Happy coding!
