I often come across people who are completely baffled about the languages and terminology used online. HTML, CSS, Javascript, PHP… what are all these things?

It’s totally understandable that many non-technical people struggle with coding languages. After all, these are complex languages, and require time and dedication to learn.

I’m a firm believer that not everyone needs to learn how to code. If it’s something you’re not interested in, or you’d rather focus on doing your work, then it’s totally fine to outsource the heavy lifting of coding. But I also believe in empowering nontechnical people to manage their own websites, and as such it doesn’t hurt to learn the basics.

So for this Ask a SuperGeek, I thought I’d introduce you to one of the core languages of the web: HTML.

HTML stands for “HyperText Markup Language.” It’s a coding language used to call, or display, the elements of a website. Most HTML tags wrap around the piece of text that is seen by visitors to your website, and can determine things like what style a piece of text is displayed in. An example of a snippet of HTML code is:

HTML is the language for the basic building blocks of your website, and those things with h1 and p in them are called “tags.” They demarcate which text is linked to specific CSS code in the stylesheet, which in turn tells the web browser how to display the text between those tags. The opening and closing tags are very similar, with the exception of the inclusion of a slash in the closing tag.

Viewing and experimenting with code

There are a few ways that you can view the code ‘markup’ behind any website. These are tools in your browser that allow you to see behind the pretty façade and get an idea of the elements making up a site. These tools are great for learning code, because you get a real-time comparison of the code ‘back-end’ with the visual ‘front-end.’

View source
The first tool I wanted to mention is the “view source” command in the browser (“source” in Safari, “page source” in Chrome and Firefox). This can be accessed by right-clicking anywhere on the website and choosing it from the contextual menu. A new window will open, displaying all the code that the browser is using to display the page. This is just displayed as one big block of text, so may not be very easy to read for the uninitiated.

Inspect element (or Firebug)
For code learning, the web inspector, or “inspect element” tool is much more valuable than view source.

Webkit browsers, such as Apple’s Safari and Google’s Chrome, have built-in “developer mode” tools that are very useful for inspecting the different elements making up your site. For Firefox, there’s a free add-on called Firebug which will do essentially the same thing. A simple right-click on the page item you want to check reveals much about that item’s formatting, allowing you to troubleshoot problems.

When you choose to inspect a page element, a new pane at the bottom of the browser window will open up, showing (on the left hand side) all the code making up the page, with focus on the source code for the particular part you clicked on. On the right hand side, you can see all the CSS that applies to that particular element. You can then edit that CSS to test out different styles, before committing those changes to the stylesheet.

The inspect element tool also allows you to see page loading times, images and other resources used in the page, and more.

Learn more about using the web inspector here.

Beginners CSS and HTML tags

These are the tags I’d recommend getting familiar with first. For more information about their usage, I’d recommend going to W3 schools to learn more about them:

• div – division/section
• p – paragraph
• ul – unordered list
• ol – ordered list (numbered)
• li – list item
• a – link (for instance, a href=”http://www.linkdestination.com” or a href=”mailto:tessa@tessaneedham.com”)
• h1 – Heading 1 style (h2 for Heading 2 and so on)
• em – emphasis (italic)
• img src – place an image (for instance, img src=“http://www.imagelocation.com”)
• center
• blockquote

So go ahead! Get your hands dirty with HTML and have lots of fun in the process. 😃

Further resources for learning code

• W3 schools: learn pretty much any coding language and web development technology you can think of… and some you’ve never even heard of!
• Mozilla Thimble: write HTML and CSS in the browser and see the results instantly.
• Mozilla Webmaker: a resource for learning how to “make the web.”
• CodePen: write code, see how it turns out, and share it with others.