This lesson introduces HTML, common HTML terms, and elements. By the end of the lesson, you’ll have created your first HTML page!
HTML stands for Hyper Text Markup Language. HTML provides the structure for web content. In addition to structure, HTML provides the meaning of the page content. When working on websites, you’ll come across the phrase “semantic HTML.”
Semantic HTML is the use of HTML markup to convey and reinforce the meaning of a page. You’ll understand this concept further as you dive into learning HTML. For now, just understand that HTML tags are used for page structure and conveying meaning about the content.
Throughout this course, you’ll keep your HTML (structure) and your CSS (style) separated. HTML will always represent the structure and the content and CSS will always represent the appearance of that content.
When you start learning HTML there may be lots of terms and definitions that are unfamiliar and possibly intimidating. As you progress in learning and using HTML, the terminology and syntax will become more familiar. The three most common HTML terms you should start familiarizing yourself with are: Elements, Tags and Attributes.
Tags and Attributes will be covered in a later lesson. For now, let’s examine HTML Elements.
Throughout this course, you’ll see the term element used regularly. An element is an individual component that can be combined to form the HTML document/webpage once the browser parses it into the Document Object Model (DOM). You’re going to be working extensively with the DOM later in this course, but for now just know that the pages you look at are composed of individual HTML elements.
Let’s explore some commonly used elements.
<h1> through <h6><p><ul><ol><li><strong><em><a><img><main><aside><nav><header><footer><div><span>There is lots to learn in regard to proper use of HTML semantics- the practice of giving the HTML you write proper meaning and structure. Additionally, there is a wealth of information about how to properly set up the underlying skeleton of your webpage.
All HTML documents have a required structure that includes the following declaration and elements: <!DOCTYPE html>, <html>, <head> and <body>.
The entire code goes inside the <html> element. Everything contained within the HTML will fit within this section. Next is the <head> element which identifies the top of the document, including any metadata (accompanying information about the page).
The content inside the <head> element is not displayed on the web page itself. Instead, it may include the document title (which is displayed on the title bar in the browser window), links to any external files or any other beneficial metadata.
All of the visible content within the web page will fall within the <body> element. Take a look at this code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a web page.</p>
</body>
</html>Code language: HTML, XML (xml)This is the structure that you should practice using in all of your HTML files that you create. In this example, the body only contains a single header and paragraph. As you build out your page, you would include more elements in both the head and the body, as you’ll see in later projects.
Here are some basic guidelines to follow as you work on your page:
<tag1> <tag2> you’d want to close them in the reverse order by closing </tag2> and then </tag1>.<strong><em>some text that would be bold and emphasized</em></strong>The way that you use heading tags on your page is important and there is lots of conflicting information on the topic. Generally, you’ll want to follow these best practices:
<h1> tag for the page. This should be your main heading.<h2> tags<h3> tags, and so onAvoid using the heading tags for styling purposes. Instead, use these to convey order and meaning. Get in the habit of thinking of the headings as creating the skeleton of your page. These act as the document outline.
It’s a good idea to make sure that you don’t include too much information in each heading block. If your paragraphs are looking really big, see if you can split it up into sub-sections. Alternatively, if you’re using sub-headings you’ll want to make sure that each one has at least 2 or more sentences. Both of these considerations will improve the readability of your site.
While these are best practice suggestions, the content (and layout) of the site should always be the main focus. The layout of an “About” page will be structured differently than a blog post. Being mindful of these things from the start will help you make content-driven decisions when building your own site or working with a client.
Now that you have a basic understanding of HTML, let’s practice by creating a page.
You’ll start creating an introduction page. For now, you’ll be adding HTML and content only. As you add each of these elements, make sure that you’re adding things that fit the goal of the project. For example, instead of just listening out random items you should make a list of hobbies or interests.
<title> in the <head>At this point, your HTML should look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>All About Me</title>
</head>
<body></body>
</html>Code language: HTML, XML (xml)<body> Remember, the content you add should be between the opening <body> and closing </body> tag. Include the following HTML elements:<h1> heading<h2> and if necessary, <h3><p> element.<strong> and <em> tags to format some text<p>
My first unordered list!
<ul>
<li>Unordered list item!</li>
</ul>
My first ordered list!
<ol>
<li>Ordered list item 1</li>
</ol>
</p>Code language: HTML, XML (xml)It’s alright if you don’t finish this all at once! Keep working toward it.
Understanding how to comment your code is important in web development. Any content wrapped within a comment will not be displayed on the web page. Comments help keep our files organized, allow us to set reminders, and provide a way for us to manage our code. Comments become especially useful when there are multiple people working on the same files.
Additionally, comments allow you to effectively “turn off” a line, or lines, of code. You’ll see this used throughout this course. HTML comments start with <!-- and end with -->. Any code contained within those characters won’t be interpreted/displayed by the page. Note that there are two ”-” characters on each side even though it looks like there is only one.
Here is an example of commented HTML:
<! – I'm a multi-line HTML comment!
Build good habits and practice commenting/uncommenting from the start!
To comment in HTML you use <! – [comment goes here] and end it with – >Code language: HTML, XML (xml)Before moving on, add some comments to your code!