Of all the computer languages you will read about on my blog, HTML (hypertext markup language) is the simplest. That's because it's not a full fledged programming language. You can't write logical statements using HTML like you can with a programming language like Javascript (where, for instance, you can have code that behaves one way if some condition is true, and another if that condition is false). Instead, HTML is used to mark up content so web browsers know what kinds of content they're dealing with.
For instance, you can use an <h2> tag to tell the browser to render the word "Skills" as a heading, and you can use an unordered list with list items (<ul> and <li>s) to mark up the skills themselves and render them as a bulleted list.
For the most part, that's all there is to HTML: you take content and wrap it in the appropriate tags. You'll get plenty of practice with that throughout your projects, but in the remainder of this reading, I will go over enough background about HTML to code effectively and sound like a pro on interviews.
There are certain things you simply need to know about coding in order to knowledgeably discuss HTML with others and to efficiently and accurately analyze and understand code.
There are three key HTML-related terms you need to be able to use correctly in order to come across as competent in interviews: element, tag, and attribute. Let's distinguish these with an example:
<div class="foo-class">
<p>This is a paragraph with <a href="https://somewhere.com">a link</a> in it</p>
<p id="second-paragraph">This is the second paragraph</p>
</div>The above snippet has four elements: 1 div, 2 paragraphs, and one anchor. If we look at the <div> element, it consists of an opening tag (<div>) some inner content (the two paragraphs), and a closing tag (</div>).
To generalize, an HTML element usually consists of some content (could be plain text or additional HTML elements) wrapped by opening and closing tags.
Tags, then, are used to mark off the beginning and end of an element. Both opening and closing tags consist of angle brackets and the tag name (< ... >), with closing tags distinguished by a forward slash (</ ...>).
Note that the reason I said that HTML elements usually consist of content wrapped by an opening and closing tag is because some elements are self closing and don't have inner content. For example, the element, which is used to embed images in an HTML document, has no inner content, and doesn't require a closing tag. So this image element is well-formed:
<p>This paragraph has an image: <img src="./images/foo.jpg"></p>.
Finally, attributes are for setting properties on an HTML element. In the example above, there are three attributes: class="foo-class", href="https://www.somewhere.com", and id="second-paragraph". HTML attributes consist of a name (e.g., href) and a value enclosed in quotes (e.g., "https://www.somewhere.com").
Some attributes, like class and id are valid on almost any HTML element. I will write future blogs on using classes and ids as hooks for CSS styles and JavaScript code. I present them to you now because they are core HTML attributes that can be used on all but a handful of elements (specifically, they can’t be used on: <base>, <head>, <meta>, <param>, or <title>).
Other attributes are specific to a particular element. The href attribute on our anchor element above is specific to anchor elements.
In the programming world, it's commonly said that HTML is about structuring content while CSS, which we'll cover in depth in the next blog, is about styling content. HTML tells the browser what content to represent, while CSS tells the browser how that content should appear.
When I say that HTML is about structuring content, I mean two things. First, I mean that an HTML document specifies each and every one of its elements. These can be visible elements (paragraphs and images) or ones that human users never see (for instance, <meta> elements appearing in the head of the document).
Second, HTML specifies the hierarchical relationship between elements in a document. Below, I have a snippet of HTML, followed by a chart depicting the hierarchical structure of that HTML:
<!DOCTYPE html>
<html>
<head>
<title>Sally Student | About me</title>
<link rel="stylesheet" type="text/css" href="./main.css">
<script type="text/javascript" src='./main.js'></script>
<meta charset="utf-8">
</head>
<body>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about_me">About me</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>
<header>
<h1>About me</h1>
</header>
<main>
<h2>My work</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</main>
</body>
</html>
Some of the elements from the HTML snippet appears in this diagram, which reveals the tree structure of our HTML code. This tree consists of a series of nodes (each represented by a box) which lie in hierarchical relation to one another. We call the <html> element the root element because it is the parent (or grandparent, or great grandparent, etc.) of all other elements in the document. The root element has children (<head> and <body>).
Looking at the <li> elements in the <nav>, we find our most nested elements. We have list items inside an unordered list inside a nav inside the body inside the root HTML element.
Nodes existing at the same level of the hierarchy (for instance, the <nav>, <header>, and <main> elements above) are called siblings.
Finally, notice how I use a level one heading (<h1>) in the <header> and then a level two heading (<h2>) in the <main>. Heading elements (h1, h2, h3, h4, h5, h6) are used to establish information hierarchy. Although these elements are often styled so that h1s are bigger than h2s are bigger than h3s etc., their main role is to indicate the relative importance of different content in the page. There should only ever be one h1 for the page, and it's used to indicate what the page is about. It's fine to have more than one h2 to h6, but don't skip headings or pick headings just for their sizes, which can be changed with CSS. For instance, don't have an h1, then two h2s, and jump to four h5s.
Last, but certainly not least, is playing videos with HTML. Before HTML5, a video could only be played in a browser with a plug-in (like flash). The HTML <video> element specifies a standard way to embed a video in a web page. To show a video in HTML, use the <video> element:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>The controls attribute adds video controls, like play, pause and volume. It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads. The <source> allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format. The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.