HTML — The First Building Block of Web Development
Every new developer should learn HTML first.
I’ve had more than one friend express interest in web development and ask me where to start. I usually ask if they’re familiar with HTML. They could be like me, who, up until a few years ago, only knew about it from the old days of MySpace, but then abandoned it for Facebook, and consequently forgot all about HTML. If my friend has no clue what HTML is, I recommend it as the starting line because without it, there’s nowhere else to really go. If my friend is somewhat familiar with HTML, then I recommend they get very familiar with it. It’s crucial to learning everything else. You need to know HTML to understand CSS and JavaScript, and related frameworks. In this article, I will discuss a brief history of HTML, the basic layout of a web page, and what the major elements are.
What is HTML?
HTML, or Hyper Text Markup Language, is the standard language for documents displayed in web browsers. HTML documents can incorporate Cascading Style Sheets and JavaScript. Web browsers receive these documents from a web server or from a local machine and transform the data into readable, multimedia pages.
A Brief History
Tim Berners-Lee is credited as the inventor of HTML. In 1989, he was working with CERN (European Organization for Nuclear Research) when he proposed an Internet-based hypertext system. He wrote the browser (what you see on the screen) and server (provides the data for the browser) software. The first version of HTML contained 18 elements, but since 1996, it has been consistently maintained. In 2000, it became an international standard for web browsers.
Basic Structure
HTML documents have a nested structure with elements defined within opening and closing angle brackets containing tags that look like this: <h1></h2>
Each type of element specifies the behavior of whatever goes between the opening and closing tags. Here is a simple example of nesting. You can see that there is an opening <html> tag, but the closing tag is at the bottom. This indicates that everything else is nested inside the <html> tags. The body tags are the same. Inside the body there are two elements. Both <h1> and <p> elements describe what kind of text it contains. <h> means ‘header’ and <p>means ‘paragraph. The browser translates the contents inside header brackets to a bigger text-size than it does with the paragraph tag.
In the browser, this excerpt of code doesn’t show any of the element tags. It only shows what’s contained in them. Elements can also have attributes. Attributes contain extra information about the element that you wouldn’t want showing up in the browser.
There are many different types of elements, and the image above shows just a few kinds. The right side is what the browser is interpreting from the HTML document on the left. Taking a look at the HTML, you will see a lot of information nested within the <head></head>element. This is a container for things you want on your page, but is not actual content. For example, if you had another page with CSS written to style your HTML, you would link that in this element and the CSS styles would show up in the browser. With multiple types of header tags, you can change the size of the text. There are specific tags for unordered lists and ordered lists. You can even create links to other pages with something called an href attribute. All of these notations are hidden on the browser.
Think of HTML as the skeleton to your webpage. A webpage needs to have a basic structure to hold content. CSS and JavaScript offer styling and functionality to the page, but without HTML, you can’t see any of it. That’s why HTML is the first building block of web development.
Erin Hancock is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web & App Development. The following article relates to the DGM 2120 Course and representative of the skills learned.
