Introduction to HTML
In this guide we're going to cover the real basics of HTML. We're going to look at elements, attributes, and some other important terms to help you get started.
To use HTML you will need some sort of text editor. I highly recommend Notepad++ to get started. Once you're comfortable you can move onto an Integrated Development Environment (IDE) such as Microsoft Visual Studio, which is free!
What is HTML?
HTML stands for Hypertext Markup Language, its not classed as a programming language but rather a markup language which is used to define how your browser is to structure the webpages you visit within a website.
It was created in the 1990s by a physicist called Sir Tim Berners-Lee who is famous for creating the World Wide Web. HTML has gone through many changes over the years but the basic idea remains the same. As of 2014 we currently are using HTML5.
HTML is made up of a series of 'things' called Elements, in which you can wrap, enclose or markup different bits of the content. This is how we make the content appear or act in a certain way. This is also why HTML is a markup language as we are annotating the elements to define their properties.
The tags used to enclose the content can create a hyperlink to another page, italicize text, bold text, colour text and soon. There are many different possibilities with HTML.
Let's take a look at the following piece of text:
I am a developer
If we wanted this line of text to stand by itself, we could define the content as a paragraph by enclosing it in the paragraph element.
<p>I am a developer</p>
The great thing about HTML elements is that they're not case sensitive so that can be written in uppercase, lowercase or a mixture of both. That said however, its commonly good practice to use only lowercase so it is consist across the HTML world!
What makes up a HTML Element?
The Opening Tag - This should consist of the name of the element which is wrapped in angled brackets.
The Closing Tag - This is exactly the same as our opening tag, the only difference is that it contains a forward slash to distinguish the two.
The Content - This is where the content of the element would go such as text.
The Element - Grouping all this together creates an Element.
You can also use elements inside of elements. This is known as Nesting. Using our example previously what if we wanted to italicize developer. To do that we need to use the Emphasis tag, <em>.
<p>I am a <em>developer</em></p>
When nesting elements you need to make sure they're nested correctly or some weird and wonderful things will happen. Don't get my wrong its quite funny when that sort of stuff does happen but it can be a little annoying when you have a lot of code to debug and find out what caused it.
Types of Element
Now we understand the basics of Elements lets look at the two different types; block level and inline elements. Gotta love these elements!
The difference between the two is very simple. A block-level element always starts on a new line and takes up the full width available, ie stretches out to the left and right as far as it can. Whereas, an inline element does not start on a new line and only takes up as much width as necessary.
Common block elements:
Headers (<h1> through <h6>)
Lists and list items (<ol>, <ul>, and <li>)
Common inline elements
Now not all elements follow the pattern of an opening tag, content, closing tag. Some elements consist only of a single tag, which is usually used to insert/embed something in the document at the place it is included. For example, the <img> element embeds an image file onto a page in the position it is included in. These are commonly known as empty elements or void elements.
Cool. I hope you have learned something thus far. Time to dive head first into Attributes!
What are attributes I hear you ask? Attributes allow us to give elements extra bits of information that we don't want to display in the actual outputted content. For example an Attribute can allow you to give an element a name so it can be identified and referenced in a stylesheet.
<p class="awesome-dev">I am a developer</p>
Above is an example of a 'class' attribute. It is used to define equal styles for elements with the same class name. So all elements with the same 'class' attribute name will have the same styling and format. This allows us to condense our code quite dramatically as we're not having to repeat our styling over and over again.
Sometimes Attributes can be written without values and this is perfectly normal. These are known as Boolean Attributes as they can only have one value which you would normally would find it the same as the attribute name.
Great job for getting this far! We've now looked at the real basics of HTML Elements but we still haven't touched upon a HTML Document. So my question to you is....
What does a HTML Document look like?
So HTML Elements are pretty useless on their own unless they are used together to form a HTML page.
<title>My first HTML Page</title>
<p>This is my page</p>
Here you can see different HTML tags doing different jobs. Carry on reading to find out more!
<!DOCTYPE html> - Doctype declares the document a HTML document and it helps browsers display webpages correctly.
<html></html> - This is the root element on a HTML page. It wraps all the content on the page together.
<head></head> - This pretty much acts like a container for all your page information that isn't content such as metadata, titles, links to stylesheets etc
<title></title> - This specifies the title for the document.
<body</body> - This contains all the content on the webpage be it text, images, videos, tables etc
The final bit I want to talk about it HTML comments. Comments are bits of code that a ignored by the browser so they do not display. It allows you to make notes and organise your document.
To use the comment feature you need to wrap it in the special markers <!-- and -->, for example:
<p>I'm a paragraph!</p>
<!-- <p>I'm a comment!</p> -->
Thank you for taking the time to read my little guide on an Introduction to HTML. I hope you have learned something along the way. If you have any questions please create a post in the forums on the club or contact me personally on Discord or the server!