Photo by Miguel A. Padrinan on Pexels

A Non-Developer’s Guide to HTML

Everyone who works on the web should have a basic understanding of how HTML works and what it’s used for.

Photo by Alexandru Acea on Unsplash

What Is HTML, and What Is It Used For?

HTML stands for Hypertext Markup Language. It is the standard language for documents that are designed to be displayed in web browsers — i.e. websites and web applications.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading.</h1>
<p>And this is a paragraph.</p>
</body>
</html>
Photo by NESA by Makers on Unsplash

The Basics of HTML

Let’s dive in a little bit deeper now, shall we?

Tags

HTML tags are used to distinguish HTML code from normal text. They provide browsers with instructions on how to display the content contained within them.

<tag>Content</tag>

Elements

An HTML element consists of both the opening and closing tags, along with any content that appears within them.

<p>This is a paragraph element.</p>
<body>
<h1>This is a heading.</h1>
<h2>This is a smaller heading.</h2>
</body>

Attributes

HTML attributes provide browsers with additional information about their corresponding elements.

<a href="https://www.medium.com">This is a link to Medium.com</a>
Image credit codepen.io

Additional Resources

Now that you’re all caught up on the basics, you’re ready to start writing some actual HTML code.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First HTML Page</title>
</head>
<body>
<h1>This is an H1 Heading.</h1>
<h2>
This is an H2 Heading.</h1>
<p>
And this is a paragraph.</p>
<ul>
<li>
This is a list element.</li>
<li>
This is a list element.</li>
<li>
This is a list element.</li>
</ul>
<a href=
"https://www.google.com">This is a link to Google.</a>
</body>

</html>

--

--

I'm a self-taught UI/UX designer and front-end JavaScript developer with 5+ years of experience in end-to-end digital design.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alex Sanchez-Olvera

I'm a self-taught UI/UX designer and front-end JavaScript developer with 5+ years of experience in end-to-end digital design.