Html stands for HyperText Markdown Language. It is a fundamental part of pretty much every webpage you see on the internet. You've probably heard this a million times, but it is essentially a skeleton of the website - it gives it a structure.
This is a basic HTML syntax code snippet.
<p>I'm a paragraph</p>
You can see that it starts with
<p> and ends with
</p>. These are called an HTML tags. The whole code snipped is called an html element. An html file is composed of these elements. This particular example is an element with 2 tags.
There are two types of elements. Self-closing elements and elements with closing tags.
<input type="text" />
Self-closing element example.
When working with Html, you want to look into semantics. Semantics is a really big topic in HTML5. It just means that your content is well structured.
Imagine that you have a header, main part and footer on your website. In old HTML, you would do it with an element called
div. This meant that your code was really messy. HTML5 solves this issue with semantic tags, which are not only great for code readability and maintenance, but also for good Search Engine Optimization.
This is a sample HTML code.
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <body> <header> <h1>My website title</h1> </header> <main> <section> <h2>Section title</h2> <article> <h3>Article name</h3> <p>Article content</p> </article> </section> </main> <footer> <p>This is a website footer</p> </footer> </body> </html>
You can see how the document is structured just by looking at it.
Here you can find a comprehensive list of html elements from MDN
There are so many great resources on How to learn HTML. I'm just going to list a few here that I personally find interesting:
- Freecodecamp's Responsive Web Design Course is a great place to start.
- Codecademy's Learn HTML Course (I haven't done this one, but it has a great feedback)
I plan on posting more here, so stay tuned and let me know if you liked it or tell me what I should change.