Lesson 1: HTML Basics
I often get asked how I learned to be a web developer. The truth is that I learned most of it on my own. I began by taking a HTML class in junior college as an elective, before that it had never crossed my mind to be in the field that I am in. That class sparked my interest and I began to develop and practice by my self.
There are a lot of resources out there, some of them I hate and some of them I like. None of the ones I like really offer a great solution for beginners to learn, but for reference I will list them.
- W3Schools — I don’t like W3Schools because they have no relation to the World Wide Web Consortium (W3C). The W3C is the community body that defines web standards so that developers can have an easier time developing. The W3C defines the standards that browsers implement so that developers don’t have to create different code for each browser. The W3C has asked W3Schools to change their name because of the lack of relation between the two organizations but W3Schools has refused. W3Schools can be great for beginners, but be cautious — not everything you see on W3Schools is accurate or should be used in the way they recommend.
- MDN (Mozilla Developers Network) — This is a great reference, and the most accurate I’ve seen. It provides up to date documentation on HTML elements and functionality. Unlike W3Schools, MDN takes part in the W3C and is an authority when it comes to web standards.
- CSS-Tricks — Created by Chris Coyier, who is one of the leading experts in web development. CSS tricks has great articles especially when it comes to CSS flex-box and grid (which might be covered in a future lesson)
- World Wide Web Consortium (W3C) — Very useful to verify standards and improve usability on your site, especially when it comes to accessibility. The documents on W3C are very long and are pretty dry, very useful bed time material if you need something to read to get to sleep. I would recommend this site to a mid-level developer that is trying to advance in their career.
Some Background
HTML is the language that renders the web, it creates everything you see on a web page. It stands for “Hypertext Markup Language.” It is similar to XML, if you don’t know what XML is don’t worry about it, just know that they are similar. Usually you will see references to CSS (Cascading Style Sheets) and JS (JavaScript) in documentation for HTML. CSS is used to add styling to an webpage and JavaScript is used to add non-native functionality to a webpage like showing an alert.
Let’s Get Started
First I will show you a basic HTML file and go over it’s parts:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World!</h1>
<p>My Name is Fred</p>
</body>
</html>The first thing you will see is the DOCTYPE declaration. This tells the renderer or browser the type of document to render, and the version of HTML. This is the syntax you should always use now. Before the latest version of HTML (HTML5) the doctype would let the browser know what version and functionality you wanted to use. Now you should always want to use HTML5 so you only need to remember this declaration:
<!DOCTYPE html>
You will notice that everything so far has an open and a close. Anything that looks like this: <...></...> is called an element or in slang it is called a tag. To open a tag you use <...> and to close it you add a backslash like this </...> Some tags are what we call ‘self-closing’ meaning that we mix the open and close tag together ie: <.../> Self closing tags are generally used when there is no possible content in the tag.
The <html></html> tag tells the browser where all of our web page content resides. Inside this tag you should always find two other tags: <head></head> and <body></body> The head tag contains meta-data, or data about the webpage that is not necessarily visible to the end-user, but useful to the browser. The body tag will contain all the tags and data that the user can see. You will notice that within the head tag there is a <title></title> tag. This tells the browser what to display in the tab that your web page is open in. There are a lot of other tags that can be in the head tag that we will cover at another time.
Inside the<body></body> tag you will find a <h1></h1> tag. This is a top level header tag. In general you should only find one of these on a page, and it is used to define what the page content is about. As you might guess there are also h2, h3, h4, and h5 tags that can be used to add headers to sections of content on the page. You should use headers in order, meaning that an h2 should only come after an h1 on your web page on so on. The <p></p> tag is a paragraph tag that is used to show content in paragraph form.
But What Does it Look Like?
If you save the index.html file you can now preview it in your browser by clicking on ‘File’ in your browser and then selecting ‘Open File’ in the menu. When you select it from your file system, your browser should open the file and render it’s contents.
What’s Next?
Next we’ll cover more tags and tag attributes, we might even get into some forms.
