HTML, or Hyper Text Markup Language, is 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 is HTML? What’s it used for? And how does it differ from typical programming languages? Read on to find out.
What is HTML?
HTML stands for Hyper Text Markup Language. It is the standard markup language for creating Web pages and web-based documents.
All Web pages have a series of HTML elements consisting of tags and attributes that tell Web browsers how to display the content. For example, HTML tags tell a web browser how to display text, images, video, colors, hyperlinks, tables, etc.
It’s also worth noting that HTML is not a programming language. Because programming languages modify data, and markup languages like HTML determine how elements display on a webpage.
HTML Example
Have a look at the snippet code below.
<!DOCTYPE html>
<html>
<title>I’m the words in the tab at the top of the screen.</title>
<body>
<h1>I’m the heading you can see</h1>
<p>I’m some paragraph text. </p>
<p>I’m another paragraph.</p>
</body>
</html>
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 in HTML?
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.
For example:
<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.
- <html> and </html>: typically this comes next. It tells the browser: I’m using HTML for the next bit. (And not, for instance, JavaScript.) Every other element, attribute and code will sit within this. You won’t have two of these in the same document.
- <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 in HTML?
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 color 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:
<img src=”https://imagelocation.com”>.
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.
Learn HTML at Coding Dojo
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.
Want to learn HTML and become a frontend developer? Coding Dojo can take that a step further by teaching you how to become a full-stack developer. That means, when you start your search for your first coding job, you’ll be qualified to work on frontend, backend, or databases.
Coding Dojo also a lifetime career services team who will help you create a resume, identify jobs to apply for, prep for interviews, and more. Within 12 months of graduating, 91 percent of our coding grads find a job in tech, so all you need to do is find the right coding bootcamp schedule for you. Here are your options:
- Onsite Full-Time (14 Weeks)
- Online Full-Time (14 Weeks)
- Online Part-Time Accelerated (16-32 Weeks)
- Online Part-Time Flex (28 Weeks)