HTML MADE EASY Web Design for Beginners
Open a text editor of your choice and begin your HTML code with this bit of code:
That’s what’s called a «declaration«. It doesn’t do anything to your webpage but the folks who set the rules for HTML want it at the start of every HTML file.
Opening and Closing Tags
HTML code is referred to as tags. Most tags have both an opening tag and a corresponding closing tag. After the declaration every HTML file begins with this opening tag:
Every HTML file ends with the corresponding closing tag:
Notice the / in the closing tag? All closing tags must have this slash. You know why? Because it’s a closing tag, that’s why.
Below the opening html tag come the opening and closing head tags:
The head tag doesn’t affect what appears on the web page, it’s job is to hold certain other types of tags, one being the title tag:
The text between the title tags will appear in the browser’s title bar:
Everything that is seen on a web page is found between the opening and closing body tags:
Look Ma, I’m Making my first webpage
Notice that the closing html tag was added to the code. This means we are finished (at least for now), so save your code by giving the file a name and adding the .html like so: index.html
Important note:
The file name of your HTML code can be anything you want but you must name the homepage index.html or else your site’s web address will not work.
Curious to see how the webpage looks? Click on the file to open it in your browser. To edit the code, open the file from your text editor, be sure that «All Files» is selected from the editor’s dialog box.
The next lesson will introduce you to more tags and what they do. So let’s move on to lesson 2
- BEGINNER COURSE
- Introduction
- Lesson 1: Tags
- Lesson 2: Block Tags
- Lesson 3: Inline Tags
- Lesson 4: Attributes
- Lesson 5: Graphics
- Lesson 6: Links
- Lesson 7: Lists
- Lesson 8: Tables
- MORE.
- Uploading Webpages
- Color Chart
- Making Contact Forms
- Pages With Frames
- Questions Answered
- Web Graphics
- Resources
- Free Software
DID YOU KNOW.
You can register a website address (called a domain in tech talk) even before you have a website. In fact the longer you wait the more difficult it will be to get one that isn’t already taken. More Info
DID YOU KNOW.
There is more to building a website than just making it. It also needs web hosting so that it can be seen on the internet. More Info
Disclosure
Some links on this webpage earn this site a commission. © 2019 HTML Made Easy Beginner’s Course For Making A Website
Contact | Privacy Statement
Anatomy of an HTML Tag
This article is part of the Beginner Web Developer Series. The series is targeted to people who’d like to start serious web development, as well as people who are already web developers and want to solidify their knowledge of fundamentals while possibly filling in some holes. If you find yourself tinkering with HTML, CSS, or Javascript until you sort of get it to work, this series is for you. The material in this series is closely tied to my top-rated Coursera course.
As mentioned in one of the previous articles, HTML is a language. Each language comes with its own grammar or, as it’s referred to in the context of programming, its own syntax.
Come On and Tag Along! 😁
Since HTML is a tag-based language, it’s no surprise that at the core of HTML is the HTML tag. Let’s look at the syntax of an HTML tag.
Usually, an HTML tag consists of an opening and a closing tag that surrounds some content, marking up or annotating that content as shown below.
In this case, the tag p , which stands for paragraph, is communicating to us that the content in the gray area should be treated as a paragraph.
Technically speaking, p by itself is called an element, and, together with the angle brackets, it’s called a tag. However, while technically incorrect, people aren’t usually careful to make that distinction and use these terms interchangeably.
Permitted Content
Most HTML tags have a closing tag. As you just saw, the opening tag
has a closing tag
. However, not all of them do. For example, as shown below, the
and
tags only have an opening tag ( br stands for line break, and hr stands for horizontal rule). They don’t have a closing tag at all.
In fact, the following code snippet would be invalid HTML:
Obviously, just because it’s allowed, doesn’t mean your code formatting should be as crazy as what I did there. With that type of formatting, you are risking being “admired” by your fellow developers who have to read it later.
Instead, use the extra spaces to make it easier to read the code:
. id="myId" style=". " class=". " something-else=". " even-this=". "> Who wrote this code? It's SOOOOO beautiful! 😍 . Quotable Quotes
Enclosing the value of an attribute in quotes is technically not required in all circumstances. Nevertheless, it’s best practice to always surround the value of the attribute in either single or double quotes.
It doesn’t matter whether you use single or double quotes. They are equivalent in HTML.
A more interesting case arises when the attribute value itself contains quotes. In other words, the value content actually contains either single or double quotes. For example, the following code would be problematic:
If you leave the code as is shown above, the browser will see the value of the attribute onclick as alert( . That’s because after the parser sees the opening » , it looks for the matching » to terminate the opening quote. The browser will then likely get confused as to what to do with the rest of the value and interpret it as a bad attempt at another attribute insertion. Not good.
The solution is to interchange double and single quotes such that you close the quotes in the opposite order of opening them. So, if the last quote was a single quote, it must be closed first. Which quotes you start with doesn’t make any difference:
You can not nest these as many times as you want. Two levels is as far as you can take it (as shown). If you required yet another set of inner quotes, you’d use the HTML character entity reference (e.g., " ), but that’s for another article. In practice, it’s rare to find more than two levels of nested quotes that you, as the HTML author, would want to manually specify.
Summary
Let’s give a quick summary of what we’ve covered in this article:
- Most HTML tags have an opening and closing tag, but not all
- Tags that don’t have a closing tag are not allowed to wrap content
- Self-closing tags (e.g., ) are not allowed in modern HTML
- If a tag has a closing tag, always use it, even when it’s technically optional
- When nesting tags, you must close the inner opened tag before you attempt to close the outer tag
- Attributes are name-value pairs that provide some additional information about the tag
- Where spaces are allowed, extra spaces are ignored by browsers, including tabs, new line characters, etc.
- When the attribute value itself contains quotes, interchange outer and inner quotes such that the last type of opened quote is terminated first
Questions?
If something is not clear about what I wrote in this article, please ask away in the comments below!
Opening and closing tags – HTML
HTML code is made up of elements. Many elements (but not all) are made up of opening and closing tags.
The opening tag is made up of the element’s symbol wrapped in angle brackets, like this (this example is for a paragraph element):
The closing tag is made up of the element’s symbol preceded by a forward slash and wrapped in angle brackets, like this:
The text you want to display on your web page is placed between the opening and closing tags, like this:
Text goes between the opening and closing brackets.
By default, browsers will render the text differently depending on which element is being used. Here are some examples of different elements you can use to wrap text:
This text will be rendered as big and bold in the browser.
This text will be rendered in a normal font size.
This text will be rendered in a small font size.VS Code Tip
In VS Code, the closing tag is automatically inserted for you after you type the opening tag.
You can also use an Emmet shortcut to generate both tags. You can simply type the symbol of the element and then press Enter or Tab to automatically create the opening and closing tags for the element. For example, if you type p and then press Enter or Tab, VS Code will insert in your file.
Lastly, VS Code will offer suggestions as you type below your cursor. For example, if you type the letter h , you will see a menu pop up with several suggestions that start with the letter h, such as h1 , h2 , h3 , and more. You can use the arrow keys to select the one you want and then press Enter or Tab to generate the tags for that option. You can also use your mouse to click on the option you want.