HTML for Dummies Pt. 1

How do I make a website? Why shouldn’t I just use some application that lets me drag and drop sections of a my website where I want it to be? Well… because its not the smart way to design a website and will limit you on what you can accomplish as your website ages or if you want to update content. So what do all those cool programmers use to make website and how can I do it too? With this article, and future ones, I want to explain the many programming languages that front and back end users use to create and design websites as well as give less than technically inclined, or people interested in learning, an idea about the skills needed to build sites. Based on the title above, I want to focus on two well known and probably most used programming languages used for front end developers. So lets dive in with HTML and CSS and what these languages do.

HTML, or hypertext markup language, is the programming language used to give content structure and meaning. For example paragraphs, titles, images, audio, video etc. CSS, casscading style sheets, is again a programming language used to alter and edit the appearance of said content and giving it some flair. Again for example, using different fonts and colors. These two are independent of each other and it should remain that way. What I mean by that is that CSS should never be written in a HTML document and vise versa. HTML will always be the structure and content and CSS will change the appearance of said content. The purpose of this introductory article is to cover some of the common terms associated with HTML and CSS.  These terms being Elements, Tags and Attributes, so lets dive in!

Lets start off with what an Element is. An Element is a broad designator of structures and content of objects on a given page. Well what does that mean? Basically everything on the page could be considered an element. Just think of paragraphs, images, videos, anchors, and headings. All of these things are considered Elements on a page and are editable further with CSS in most cases. As you probably noticed, Elements are further identified by the greater than/less than brackets (< >). In total there are roughly 89 different Elements that you can use in HTML. Now what are Attributes you might be wondering?

Attributes make up the meat of elements. Essentially you can think of them as providing additional information about an element. The most common attributes are the id, which identifies and element, the class attribute, which classifies an element, the scr attribute, which identifies the source of embedded content, and the href attribute, which acts as a hyperlink for a linked source. All attributes are defined with the opening tag, which comes after the elements name, and generally includes a name and value. The attribute will be followed by an equals sign,=, and then the quoted(“”) value. Here is an example on what that looks like (the code works and is visible if you view the page source) Lampros Labs Information . Finally what are tags?

Tags are the bread and butter of every HTML document. The basic use of < > brackets surrounding an element creates a tag. Tags almost always come in pairs. It is a little hard to show this in WordPress but just imagine one tag is open and the other is closed. The opening tag represents the beginning of the element and the closing tag represents the end of it. The content that falls between these tags is the content of the element and it can be basically anything, from paragraphs to pictures.

I hope that this introductory article explained some of the basic concepts of HTML to you and was interesting an informative. In the next article in this series I want to go over some of the basic terms for CSS and what that entails. If you have a project or a question about what we do contact us through one of our CTA’s and we look forward to working with you and hearing about your ideas!


Leave a Reply