Possibly the simplest HTML explanation that exists.
Becoming a programmer: Diary entry #6
OK, HTML. So what is it used for?
In short, HTML is what you use to add content to a web site and to label, group, and link that content meaningfully.
So what is HTML not used for?
HTML is not used to manipulate how the content on a web site looks. This includes things like the type and size of font, the colour of the background, or the layout of content on a page.
(A different language called Cascading Style Sheets (CSS) is used to apply style and alter the visual representation of a web page’s content.)
And, how does HTML work?
HTML stands for Hyper Text Markup Language. The two key components here being Hyper Text because it links between content (possibly the most important feature of the world wide web) and Markup because it literally marks up or labels content so it can be better understood, both by humans and computers.
HTML is formed by placing tags with pre-defined meanings around the content that you wish to display on your web site. Some content along with the tags that enclose it is known as an element. In turn, a web page is comprised of many elements.
HTML, is written in a simple text document, saved with a .html file extension. A web browser, say Mozilla or Chrome, is capable of reading these HTML files and renders these elements on the screen for your audience to view.
It is useful to note that HTML files can themselves reference other locations. For example, you don’t put an actual image in an HTML file. Instead, you place a link to where this image can be found. When the browser gets to an image element in the HTML file, it goes to the address that you include in the element, gets the image, and displays it on the web page.
So, how do elements and tags look?
There are opening and closing tags and they respectively open and close elements. An opening tag starts with a < and ends with a >. For example, <h1> is a top-level heading tag; <h2> is a second level heading tag; <p> is a paragraph tag; <nav> is a tag used to indicate a section of navigation links.
A closing tag starts with a </ and ends with a >. So, you would close the top-level header tag with </h1>. Putting this together, a top-level header element might look like this:
<h1>Possibly the simplest HTML explanation that exists</h1>
And a paragraph element might look like this:
<p>This article explains what HTML is and how it is used in a manner that aims to be understood by all.</p>
There are many HTML tags and they are updated every now and again so the labels (the tags) can be as accurate and meaningful as possible. The most recent version of HTML is HTML5 and you can easily find the most up-to-date list online.
It’s important to note that a number of elements don’t have both an opening and closing tag, but just an opening tag. They are known as ‘self closing’ elements or tags. The <img> element, used to reference images in an HTML file, is one of these.
It’s also useful to note that elements can have attributes. There are many of these and they provide additional information about an element. They are placed in the opening tag of an element. For example, the ‘href’ link attribute includes the actual address where the link leads to. For example:
<a href=”https://www.medium.com”>Click here to go to Medium</a>.
Great, and how do the different elements fit together?
When a web browser renders an HTML file — that is, when it displays a web page on your screen — it starts at the top of the HTML file and reads to the bottom. As it does this, it places each element it comes across in the HTML file on the browser window.
In many ways it is useful to think of elements as different types of boxes, with specific labels on them, that automatically resize to fit their contents. You can stack the boxes and you can even places boxes inside of other boxes. This is called nesting. You can even nest elements several layers deep, a bit like Russian dolls.
In the absence of CSS, which can manipulate the layout of content in the browser window, the elements are placed according to three factors.
First, the position of the element in the HTML file. The browser reads from top to bottom and places the elements on the screen as it reads them, one after the other.
Second, the display type of the element. An element type is inherently either block or inline. <h1> is a block element, for example; <span> is an inline element. A block element occupies the whole width of the element it is contained within (all elements are as a minimum contained within the initial box, the <html> box that starts and closes every html file). This means two block elements cannot be on the same line (unless you change their display type with CSS). An inline element occupies only the space between the tags and does not automatically force a new line.
Third, the direction of the language (think English vs Arabic, not Java vs JavaScript) that is set in the HTML file. If English, elements are added by the browser from left to right; if Arabic, from right to left.
In the diagram below, various types of elements have been given a border to indicate the structure and box-like nature of HTML as well as how the elements relate to each other.
In the diagram you can see how:
- the block elements fill the width of the elements that contain them (known as parent elements);
- the inline elements (indicated with dotted red borders) fill only the space occupied by their content;
- elements nest inside each other, like boxes inside boxes;
- inline elements populate the space from the left (see the image boxes).
OK, and is it important to label the boxes correctly?
A web browser can still display a lot of the content if it is incorrectly marked up, but endeavouring to use the correct tags for content is very useful as it makes understanding the content easier for both humans and computers much easier.
This helps search engines to more accurately index the content and to offer it to people who are looking for it. This is good for getting your content found and put in front of the right people. For example, the content inside the <h1> tags is quite likely a good indicator of the topic of a web page. Search engines like Google use this, along with other factors, to search and serve web content.
Importantly, using the correct HTML tags also helps make web pages more accessible for people with disabilities, such as those using screen readers to access content.
Anything else I should know?
There are a huge number of things this article does not cover. You just have to read more. But hopefully you now have a better high-level overview of how HTML works.
