(This document is derived form Laurel Schwulst’s HTML Basics tutorial)
What is HTML?
HTML stands for“Hypertext Markup Language.” It’s used to structure a webpage and its content—all webpages are made up of HTML. The“hypertext” is the part of HTML that makes it unique from other text or writing tools, since hyperlinks connect content together. And for the record, HTML is not a programming language, but a markup language.
How does HTML, CSS & JavaScript relate to each other(image by Laurel Schwulst)
Elements
You know you’re looking at HTML when you see elements, such as head, body, h1, h2, h3, p, a, div, span, and so on. You use elements to enclose, or wrap, different parts of the content to make it appear or act a certain way. For example, you can create a paragraph by wrapping some text in the p(or“paragraph”) element:
Most elements are made up of two parts:
Opening tag
This begins the HTML element. It’s composed of the element in angle brackets.
Closing tag
This closes the HTML element. It’s exactly like the opening tag but it has a slash before the element.
However, not all elements have both an opening and a closing tag. These are called“empty” or“void” elements. Some examples include: img, br, hr, meta, input.
Elements can also have attributes. Attributes contain extra information about the element which don’t appear in the actual content. In the below case, the class attribute allows you to give the element an identifying name that can be later used to target the element with style information and other things…
Nesting elements
It’s natural to nest elements, or put them inside of each other. For example, here we’re bolding the word very:
<p>My cat is <strong>very</strong> grumpy.</p>
It will look like this in the browser:
My cat is very grumpy.
Here’s another example:
<ul>
<li>apple</li>
<li>peach</li>
<li>banana</li>
</ul>
You can nest multiple elements in another element, which can be called a“parent element” or“container”, and the nested elements can be called“children”. Normally, the nested element should be indented so your code will be clear and easy to read. In most of the text editors, the nested elements will be automatically indented and you can always fold it up.
However, it’s important to properly nest elements. The elements have to open and close correctly so that they are clearly inside or outside one another.
What is HTML?
Elements
Nesting elements
<p>My cat is <strong>very</strong> grumpy.</p><ul> <li>apple</li> <li>peach</li> <li>banana</li></ul><p>My cat is <strong>very grumpy.</p></strong>The basic HTML skeleton