Getting Under The Hood With HTML

Posted by Ben Wasser


"Without a moment's hesitation the pilot hops into the engine bay to manually control the throttle cable bracket while the co-driver climbs behind the wheel." - video description

Race car drivers not only have to know how to drive cars, they have to have a pretty good idea of how they work. Similarly, social media managers/gurus/ninjas should know a bit of the technology behind the tools and services they use on the job. The most simplistic of these technologies is probably HTML, which handles the integration and structure of elements on webpages. All websites use HTML, so it's a good place to start to learn how the web works.

HTML stands for HyperText Markup Language, which is a bit anachronistic in its modern use. Basically, if you want to put an element (like a logo) on a webpage, you'll use HTML to include it on the page and then handle the markup (positioning and style) with CSS, which is a newer technology used to increase the limited markup abilities of HTML.

HTML is composed of "tags" which instruct your web browser on how to interpret the webpage. These tags are represented by letters within angle brackets ('<' and '>'). A simple example is the tag for making a bit of text bold:

Code:
The <b>quick</b> brown fox


Result:
The quick brown fox
You see that the word we wanted to manipulate was surrounded by the tags (like the parentheses surrounding this parenthetical statement), with the closing tag getting a forward slash to denote that it's the trailing tag. The '<b>' tag stands for bold, just as '<i>' makes text italic.

Some tags are a little more complicated, like the tag for turning a bit of text into a link:


Code:
Check out <a href="http://storytellit.com">this</a> link!


Result:
Check out this link!


The acronyms used aren't that important, but the 'a' part signifies that it's a link tag (just like the 'b' signified a bold tag in the previous example), and the 'href' part is an attribute of the tag that lets you enter in the address the link will go to. It's important to know how this works instead of memorizing the exact letters used, as you can always just search for 'HTML links' later to remind yourself of the exact syntax. A similar tag is used for including images:

Code:
<img src="https://storytellit.com/static/storytellit_logo_2x-02.png">


Result:


The tag is the 'img' (for image) and the 'src' (source) is the attribute where you enter the direct link to the image file. The difference here is that we didn't use a closing tag because we weren't wrapping anything like we were in previous examples. Another example of a non-wrapping tag is for line breaks:

Code:
This sentence <br> takes <br> up <br> multiple <br> lines


Result:
This sentence
takes
up
multiple
lines


Sometimes you may see people write non-wrapping tags with a trailing forward slash like '<br />' which is just the proper but not necessary way of closing non-wrapping tags, so don't worry about it!

There are many more tags and some deeper complexities to learn, but this primer should have given you a brief introduction to HTML and shown you it's not as scary as it might first look. If you'd like to keep learning, I'd recommend starting here. Be sure to join us next week for our introduction to TCP handshakes and the OSI model(We're kidding (Unless you're into that sort of stuff)).