The Foundation of A Website
How you view a website in your browser is very different from what a developer sees when he’s actually building the website. This is because websites are made up of different languages.
A developer writes sets of code that communicate with web browsers and servers. The browser and server then translate that code into a beautiful and functional website.
The difficult aspect of the web development process is organizing all the available languages and putting them in an ordered list based on importance; because they all serve a purpose. If we take away all the bells and whistles, stripping a website down to it’s foundation, we’re left with two languages: HTML and CSS.
HTML is the foundation of a website. Regardless of the end goal of a build, HTML is an essential element that provides the structure upon which the remainder of the website is developed.
The history of HTML can be traced back to 1945 when engineer Vannevar Bush described a hypothetical machine in his essay, “As We May Think”. Bush proposed that this machine, called a “memex”, would benefit human-kind by allowing us to store our “memories” in various documents. According to Bush, these memories could then be linked together by association.
In the 1980’s, CERN physicist Tim Berners-Lee proposed a concept that would enable researchers to automatically share documents with other research and educational facilities through the world. He developed an internet-based hypertext system, known today as HTML. 9 years later, Berners-Lee’s vision came to life, giving birth to the World Wide Web.
HTML became available publicly in 1991 and consisted of 18 original elements. Today HTML is in its 5th edition and is made up of short codes that fall in to three categories: tags, elements, and attributes.
Remember how we said that HTML is the foundation of a website? Well, tags are the foundation of HTML.
Tags are used to open and close HTML elements with angle brackets, like this:
Opening tag: <element>
Closing tag: </element>
Elements give each tag a specific purpose or function. A typical element is structured with the opening tag and closing tag and content in the middle.
There are also a few elements that are self-closing (or empty) and the br element is a good example of this. In HTML, br stands in for a line break, functioning as a self-closing or empty element.
Elements are used to create the overall structure of a website, and deliver content and images. A website coded to proper standards will start off with this basic structure:
To add content to a website, more elements are simply added in between these particular tags.
Titles: The website’s title is placed inside the <head> </head> tags and is exceedingly important because it’s the element that is displayed in search results, as well as your browser’s window.
Meta data: Also placed inside the aforementioned head tags, meta data are pieces of information that search engines read in order to understand and index a website.
Very logically, body tags then follow head tags. The “meat and potatoes” of a website is located within the body. Every element specified here is customized to each individual website, although there are common elements shared by every website.
With HTML, there are 6 different headings that can be used. SEO best practices suggest to use headings like you would in an outline.
Each heading is applied by putting h1, h2, or h3 between opening and closing brackets. Although header tags extend to h6, the first three carry the most SEO value.
An h1 is used for the article’s main topic and should include your targeted keyword. Your h2 is used as a subheading and so on!
In order to gain the most from each of your header tags, they must be grammatically correct and easily-readable.
Learn more about H1, H2, and H3 Header Tags for SEO!
In order for articles to be formatted correctly, the paragraph text is wrapped in “paragraph tags,” also known as “p tags.”
While this may seem a tad rudimentary, once CSS styling begins during a website build, the placement and look of each paragraph could differ dramatically from the next. P tags are used to ensure consistency.
Images use self-closing tags. To use an image, it has to be uploaded to a server so that it has a location to be loaded from. Once it’s uploaded, you insert the location of the image into the image element, and it’ll appear on the site.
Links or a’s (anchors) work similarly to any other text tag, but with some slight variation. The text that you want to display in the link, goes in between the opening and closing a tag. The essential element of the the link though, is the href attribute, which specifies what URL or location the link should take the user to.
There are many other HTML elements and tags that are used in web development, but these would be the ones that we’ve covered here are the most basic and essential tags that will be on every website. These are the key HTML elements that create the proper structure and functionality of your web page, so that both people and search engines properly understand and can use the page.
In their simplest form, attributes provide more information regarding an HTML element. As examples, the “src” in an image tag, or the “href” in the link tag are both considered attributes. The src stands for source, and when you put it together with the img tag, it means image source, or the location of the image that should be loaded. In a link, “href” is short for hypertext reference, essentially telling the link which reference to open once the link is clicked.
We’ll go over CSS more in-depth in a future post, but wanted to give a quick preview into what CSS is, its importance and how it is related to HTML.
CSS is a styling language and appropriately named cascading style sheets. CSS takes plain-text HTML and makes it “pretty”. While HTML controls the structure of the document, CSS handles colors, fonts, borders, positioning, margins, and a plethora of other characteristics for those HTML building blocks. They’re like peas and carrots. Or something.
CSS is a really in-depth and powerful language with many features and capabilities, and is currently on its third version, CSS3.
While your waiting for our post on CSS, you should check out CSS Zen Garden. CSS Zen Garden shows excellent examples of just how powerful CSS really is, and how CSS can make the same HTML look completely different.
CSS Zen Garden invites users of any experience level to download two files used on the project; the HTML and CSS file. From there, they can modify the CSS file with their own styles and interpretation of how the HTML document should look, as long as they don’t edit the HTML file itself. It’s a great experience to go through the library of people’s interpretations of the same screen.
We’re excited to talk more about web development languages and we hope you’ll stay-tuned for the next article in our series!