HTML. It means Hyper Text Markup Language. And it’s now the standard markup language for web pages and online applications. If you right click and then hit inspect on a web page, you’ll see those four letters at the very top of the code, before anything else.
But what exactly is HTML? What’s it used for? And how does it differ from typical programming languages? Read on to find out.
So, what is HTML?
HTML is pretty much everywhere, and almost every coder (newbie or pro) knows how to write in it. In short, it tells your computer what to show and where. Where should this menu go? Should this text be a title or paragraph? Is this a link? How big should this image be? But the biggest secret is, HTML isn’t really a programming language. It doesn’t run queries or do algorithms or any fancy mathematics. You mainly use it to build structures for your documents, using tables, sections, paragraphs and more. It’s a very organized and clever list of elements and attributes that make up the web pages, web apps, documents, and emails you see everyday.
Here’s an example
Have a look at the snippet code below.
<title>I’m the words in the tab at the top of the screen.</title>
<h1>I’m the heading you can see</h1>
<p>I’m some paragraph text. </p>
<p>I’m another paragraph.</p>
This is some code for a very simple document. If we paste this code into this HTML preview tool, then it’ll look like this. Pretty straightforward. But let’s break it down:
- <!DOCTYPE html>: This tells your computer what language the document is in (in this case, web page).
- <html>: This is the start of the document. Everything lives within this tag (more on this below).
- <title>: This is the title of the page. It’ll be what users see in the tab at the top.
- <body>: All of your content lives here.
- <h1>: This is the main headline for your document that your end users can see.
- <p>: This is the standard paragraph text. You’ll probably use this most of the time.
How does HTML work?
Pretty much every website will have a ton of different HTML pages (documents). Take our site as an example. We have a home page. A contact us page. And then we have a ton of blogs and articles. All of which have separate and unique HTML files. In the case of a web browser, it’ll read the HTML file and then render its content. (Show it to you.) Email providers will do the same with the HTML emails. So on and so forth.
But how does it know what’s what? The answer: Elements and attributes. HTML files use these to tell the browser what each section is and what it should look like. Let’s go a bit deeper.
What are elements?
Elements are the different types of sections in your code. They’re usually seen as tags, and are typically seen in three parts:
- Opening tag: <p>. This tells the browser what to do with the next bit of text.
- The text in between. (The user usually sees this.)
- Closing tag </p>. This tells the browser to stop doing something.
<p>There’s a tag at the start of this sentence. This writing you’re reading is the content. And there’s another tag at the end</p>.
There usually is always an open and close tag. This tells the browser what the content is, but also when it should stop being that. And if you’re a clever clogs and set up your CSS, then your HTML will know what style that section should look like (so font size, colour, etc).
So a simple tag is <b>which bolds things</b>.
Some of the elements you might use include:
- <!DOCTYPE html>: you’ll use this at the beginning of every HTML document. It defines the document as HTML. Don’t panic. You won’t need a close tag for this. Consider it a statement.
- <meta> and </meta>: you’ll put all of your meta information here (things about the document). For example, a meta description is the text that appears underneath a Google search result.
- <title> and </title>: fairly obvious, but this will be the title of your document.
- <body> and </body>: is the visible page stuff (all of the main content).
- <h1> and <h1>: this is a large heading. And can go from h1 all the way through to h6.
- <p> and </p>: this is paragraph text.
- <li> and </li>: this is a list. What we’re using now. Although we’re using <ul> (unordered list).
You may at some point see something called a <div>. This is a section that is styled with CSS. We’ve written a specific article on this topic, so we won’t go into the details on this now.
What are attributes?
Attributes are additional characteristics to your code. They typically live inside your tags and are broken down by two parts: the name and the value. The name tells the provider what the attribute is (so a text style change, for example), and the value is what it should be changed into (so the colour red). So if would were to change your paragraph text to red, it would look like this:
<p style=”color:red;””>This text is now red</p>
Some attributes are necessary. For example, when using an <img> tag (for an image), you’ll need to add an attribute to give this a source. So that the tag will end up looking like this:
We can then add some more attributes, so say restrictions on the height and width of the image. It’ll then look something like this.
<img src=”https://imagelocation.com;” width=”200″ height=”400″>
Without them, the image would resort to its original size, which may not look too great on your document. Or, it’ll use whatever CSS you have set up.
Join our bootcamp
If you’re eager to learn more, then Coding Dojo bootcamps will teach you all of the necessary skills you need to get into coding. From scratch. .