DEV Community

loading...
Cover image for HTML Basics

HTML Basics

Adam Alberty
Web developer from Slovakia.
・2 min read

What is HTML

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.
Html doesn't care about looks of the page (that's what CSS is for) or interactivity (that's the job of JavaScript), it simply structures the content of your webpage.

Basic syntax

This is a basic HTML syntax code snippet.

<p>I'm a paragraph</p>
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

Self-closing element example.

Semantics

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>
Enter fullscreen mode Exit fullscreen mode

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

Simplicity

Html is quite easy to learn because it is not a full-fledged programming language (like JavaScript or Python). You can learn it in about 2 weeks for basic usage like making simple websites.

Html in itself isn't that interesting. What is interesting, however, is combining it with CSS and JavaScript. Then you can make really nice, good-looking and interactive websites.

Learning resources

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:

I plan on posting more here, so stay tuned and let me know if you liked it or tell me what I should change.

Discussion (0)