HTML is not a programming language, but just by knowing HTML, you can build a whole website.
HTML is used to structure content, separate content, and specify different types of content. For example, you can specify some text to be very important.
<h1 id="unique-title">
I Am a very Important title.
</h1>
Most tags come in pairs: an opening tag and closing tag. Let’s dissect the opening one.
Code Dissection
<h1 id="unique-title"><
The left angle bracket tells the browser that the following text will be the tag word.
h1
HTML uses something called tags to specify, separate, and structure content. For the most part, the word describes what it does. The “h1” tag tells the browser that some text on the web page is important. The “h2” tag tells the browser that the text is second in importance to the “h1” text.
id
A tag can have any number of attributes attached to it that give the tag additional specificity and purpose. There are a couple different attributes you can attach to a tag, and some attributes are only meant for certain tags. The “id” attribute is used to give a tag a unique identifier, and it can be used on any tag.
=
Most attributes have names. The equals sign is used to attach the name to the attribute.
“unique-title”
The text in the quotation marks is the identifier. For the “id”‘ attribute, the text in the quotes must be unique for that tag. Eventually, you will get to see the “id” attribute in action, and it will make much more sense.
>
The right angle bracket that comes after the tag (and optional identifiers) closes the opening tag.
I Am a very Important Title
This is the text that is being specified as very important by the tag.
</h1>
The only difference between the opening tag and closing tag is the slash. The slash in the closing tag always goes right after the left angle bracket.
Here are a couple more tags that will help you get started on the project.
<html>
<head>
<title>Website Title</title>
</head>
<body>
<header>
<h1> Page Header </h1>
</header>
<div>I am content.</div>
<footer>
Copyright stuff
</footer>
</body>
</html>
<html>
The “html” tag surrounds all of your website’s html.
<head>
Most of the content in the head is invisible to website visitors. The head element contains instructions for the browser and other instructions. You’ll probably forget where it goes and what goes in it each time you build a custom website because it’s only used once on each page. Just remember that the head tag goes first.
You can only put a couple different types of tags in the head tag, like style, meta, link, and script.
<body>
The body tag comes after the head tag which makes sense. A head typically goes on a body. Everything else goes in the body tag, including the footer which doesn’t make much sense.
<header>
The header element goes inside the body element at the top. The header element contains your logo, page title, and navigation elements, but this is not set in stone. Pretty much every website you visit will have a logo and menu (Home, About, Contact, etc.). These elements usually go in the header.
<div>
This is the most frequently used tag in all of HTML.
Div is most likely short for “division.” That’s exactly what it’s for. It’s used to wrap around any content and divide up content. It has no other special purpose, like the head or body tags.
<footer>
This element goes inside the body element, at the very bottom. It’s placement doesn’t make much sense. The footer doesn’t contain any special elements, just some text, like the name of the website and copyright date.
The last thing to note is that before using CSS, your web page will look like a boring text file, even if you use all of the appropriate HTML tags. That is completely fine. Just remember that HTML is mainly for structure.