HyperText Markup Language (HTML)
So what is HyperText Markup Language (HTML)?
HTML is the standard markup language for creating web pages. It is the language of the web, and it is used to describe the structure of a web page.
HTML is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image link to somewhere else, can italicize words, can make the font bigger or smaller, and so on.
For example, if we want to make a word appear bold, we can wrap it in a <b> tag.
<b>Hello</b>This results in a nice bolded word, Hello.
HTML can also be used to create more complex structures, such as lists, tables, and forms. To start, though, let’s watch a brief video introduction to HTML.
HTML and CSS for Beginners
A Peek behind the Screen
Just like <b> can make text bold, there are a plethora of other tags. For example:
<code>can make text monospaced (look like a code editor).<iframe>(inline frame) can embed another HTML document within the current document.<ul>can make an unordered list, with each list item wrapped in a<li>tag.
We’ve used all of these tags (and more) to create the sections above! Note how each of these tags uses associated words or abbreviations to describe the content they contain.
You don’t need to memorize all of these tags! You will be introduced to many of them throughout your training, and you will learn more about them as you go along.
Knowledge Check
These knowledge checks will help you review the content that comes before them. They are not submitted, and do not affect your progress in any way, but they are a good way to test your understanding of the content.
What are HTML tags?
- Select an answer to view feedback.
HTML Elements
You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
There are some HTML elements that do not have a closing tag. These elements often look like this: <br /> or <img />, but some can also be used without the closing forward slash such as <br> or <img>. These are known as void elements or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags.
HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet.
Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum.
Critical Thinking
Looking at the two elements mentioned above, <br /> and <img />, what do you think the purpose of each is? Remember, HTML elements are often abbreiations of an associated word.
What do you think the <br /> element does?
- Select an answer to view feedback.
What do you think the <img> element does?
- Select an answer to view feedback.
Knowledge Check
Why are void elements like <br /> or <img /> essential in HTML?
- Select an answer to view feedback.
HTML Structure
HTML pages are made up of a series of elements. These elements are used to create the structure of the page. Every HTML page has a basic structure, which is the same no matter what the page is for. This is called “boilerplate code” - sections of code that are repeated in multiple places with little to no variation.
The DOCTYPE
Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply <!DOCTYPE html>.
The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">However, you probably won’t ever want to be using an older version of HTML, and so you will always use <!DOCTYPE html>.
The HTML Element
The <html> element is the primary element of an HTML page. It wraps all the content on the page. This is what is known as the “root element” of the document, meaning that every other element in the document will be a descendant of it.
This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the html element should be included on every HTML document.
<!DOCTYPE html>
<html lang="en">
</html>What is the lang attribute?
The lang attribute specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation.
Above, lang="en" specifies that the language of the page is English.
The Head Element
The <head> element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the <head>, you should not use any element that displays content on the webpage.
The Charset Meta Element
You should always have the meta tag for the charset encoding of the webpage in the head element: <meta charset="utf-8">.
Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser.
Sound complicated? It’s not! The charset meta element is simply a way to tell the browser what character encoding the page is using. UTF-8 is a popular choice, and is the default encoding for HTML5. Most of the time, you will not need to worry about this.
The Title Element
Another element you should always include in the head of an HTML document is the title element:
<title>My First Webpage</title>The title element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab. The title for this page should be something like “HyperText Markup Language (HTML) | Per Scholas.”
If you did not include a title element, the webpage’s title would default to its file name, which isn’t often very meaningful for users. This would make it very difficult to find your webpage if the user has many browser tabs open.
There are many more elements that can go within the head of an HTML document. However, for now it is only crucial to know about the two elements you have covered here. You will introduce more elements that go into the head throughout the rest of the curriculum.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Webpage</title>
</head>
</html>The Body Element
The final element needed to complete the HTML boilerplate is the <body> element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on. This is where you will do the vast majority of your work.
Here is that HTML boilerplate, all put together:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Webpage</title>
</head>
<body>
<!-- Content of the page -->
</body>
</html>This is how most of your webpages will begin.
Knowledge Check
What is the purpose of the <html> element?
- Select an answer to view feedback.
Building your First Webpage!
That was a lot of information! Let’s put it all together and build a simple webpage. Continue by following along with the video below.
Challenge Yourself
Once you have watched the video and completed your first webpage, build some muscle memory by deleting the contents of the index.html file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory.
Run your boilerplate through this HTML validator . Validators ensure your markup is correct. These are excellent learning tools, as they provide feedback on syntax errors you may be making often and are not aware of, such as missing closing tags and extra spaces in your HTML.
“Syntax”? What is that?
Syntax is the set of rules that define how a language is structured. For example, the syntax of the English language is the set of rules that define how English is structured.
In the context of programming, syntax is the set of rules that define how whatever language you are using is structured. The angle brackets, for example, that are used to wrap the HTML elements are part of the syntax of HTML.
A Look Ahead: CSS
CSS, or Cascading Style Sheets, is another language that describes the style of an HTML document. CSS describes how HTML elements should be displayed.
HTML and CSS work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great!
Knowledge Check
What are the primary responsibilities of HTML and CSS in creating a webpage?
- Select an answer to view feedback.
A Look Ahead: JavaScript
HTML and CSS are primarily concerned with presenting information. They are not used to program logic or functionality.
JavaScript, which you will learn in a later section, is used to make webpages do things. There is quite a lot you can do with just HTML and CSS, and you will definitely need them both, but JavaScript will become your most-written language before long. The following lessons focus on giving you the tools you need to succeed once you reach JavaScript content.
Knowledge Check
What is one way in which JavaScript is different than HTML and CSS?
- Select an answer to view feedback.