Taking something apart is a great way to understand more about it. With that in mind, I thought I would write an article that attempts to deconstruct HTML by discussing its parts in order to communicate what it is more generally.
For starters, HTML is an acronym for Hypertext Markup Language. Hypertext is the connection of objects (information content) to each other. It allows users to go from one document to another with just a click. A website is usually made up of various information content that are linked to each other and to other documents on different websites by a series of hypertexts.
It’s a markup language, and that’s where the second half of its name comes from. It’s distinct from programming and scripting languages, which are more complex and are used by people to give instructions to computers or to automate tasks on a computer. In contrast, markup languages are used to define, process, and present content, as well as format the layout and style of the content in a document.
HTML code is inputted into a document to be displayed on the World Wide Web. It can be written in a simple text editor like TextEdit (Mac) or Notepad (Windows). Once written, it can be saved as an html file by adding the extension .html or .htm to the file name. As an html file, it is used as the basis of a web page and can be read and presented by a web browser.
An HTML document is made up of a series of codes called markup tags, which group and classify elements on a web page. Tags define the different parts of a page or the elements on the page, and they usually have to be opened <> and closed </>. The essential tags that every webpage needs is an <html> tag, a <head> tag, and a <body> tag. To illustrate the way that HTML code classifies and defines parts and items on a page, let’s take a look at how these essential tags perform this function to create the multitude of webpages that we interact with every day.
The picture above shows the HTML document for a simple webpage. Note that there are two different types of boxes: the shaded-in boxes (blue, green, and yellow) and the outlined boxes (red). The boxes each highlight the various components that make up the code. The blue box highlights the HTML component, so you’ll notice that it covers the entire document from start to end. Since the document begins with an opening <html> tag and ends with a closing </html> tag, that signifies that everything in between these two tags are part of the html component (!DOCTYPE declares the type of document and is always needed as part of the document so it’s also highlighted). These ‘components’ as I’m calling them may sound pretty obvious, but it’s useful to see that HTML code is in fact organized into a number of large sections, or else it’ll appear more chaotic then it really is.
Elements can contain other elements within them, and this is true in this case with the <head> element. In the image, the <head> tag is shaded in by the green box. The head element usually contains things like meta data for search engines that aren’t presented as visible content on the site. In this code, the head element contains a <style> element, which is outlined by the red box and defines the style of the page’s content. As we can see, the style element is opened and closed as most tags are. The opening and closing tags informs the browser of the parameters of a particular element: for instance, when the browser sees a <body> opening tag, it begins to present the content of the body defined in the HTML document, and when it sees the closing </body> tag, it knows that the body content has ended and it can move onto reading and presenting the next element. So, to put things into perspective: the <html> tag contains a <head> element, which contains a <style> element. The style element then classifies the parts of the page (header, nav, and section), and each part contains its own attributes, which defines additional parameters of the elements (colour, font, alignment, etc.).
The next part of the HTML document is the <body>, which is highlighted by the yellow box. This section will contain content that is visible on the webpage. Remember, markup tags work in the background to set the parameters, classify and define what you see on a webpage, but they don’t actually show up as content on a browser. It’s usually easy to spot the content that will actually be visible when it’s presented on a web browser because visible content won’t be enclosed in angle brackets the way tags are—rather, they’ll be surrounded by them. The tags on either side of the visible content prescribe its appearance and relation to the page.
In the sample document, the <body> is made up of several sections, which are outlined by the red boxes. div elements are empty containers that divide up sections of a page (visit my other post for more on the div element). While we won’t get into too much detail on them here, the essence of it in relation to how HTML functions is this: as inherently empty containers, the div elements in the body each use an id attribute to identify themselves as a previously defined element in order to take on and present its attributes. The reason for using the div element is that they are designed to contain content and can be used to take up blocks of space on a page at various widths and heights, so they’re perfect for sectioning out and visually compartmentalizing content on a webpage. Without the div tags in the body, the sections and content would simply be stacked on top of each other into one giant body, rather than being partitioned off into vertical and horizontal columns, with its content contained neatly inside.
HTML is formally recommended by the World Wide Web Consortium and is supported by all major browsers. If you’re ever curious about how a particular page is created, browsers allow you to view their codes by right clicking on a page to view its page source. Some can appear to have a pretty complex set of code, but by starting out with breaking them up into their larger components, it will become easier to read them and create your own.