HTML All You Need to Know: 10 Mins Read for a Month of Knowledge

HTML is the core technology behind most websites, it’s the baseline for web designers and developers to work on many future projects. Here is a quick read to fully understand what HTML is and how you can use it.

If you haven’t felt familiar with the word HTML yet, then here is a solid example you might have seen somewhere around while surfing the net, which looks like this. And that’s your HTML, a markup language that is the core foundation of the World Wide Web. Thus, it’s also the baseline to get to know other coding languages like CSS and JavaScript, which serve in building websites.

‍

In this article, we’ll take a close look at what HTML is, and explore how it works. Moreover, we’ll walk you through its function and how you can use it.

‍

HTML - What is it?

HTML means HyperText Markup Language, created by Tim Berners-Lee. Tim is also famous for being the inventor of the World Wide Web. To visually imagine, hypertext is text with links that you can click on to go to another web page, or some specific part of the current page. And markup languages are coding languages that use tags or plain text with markings to define the portion of a page. Those can be headers, footers, other elements and even tables and images.

‍

HTML is one of the crucial tools in webpage creation. It provides the structure of a page and how text, images will appear on a site accordingly. Then developers (and sometimes designers) use CSS to set up visual elements. This includes colors, format and layout. After that, you can continue with Javascript to make all the elements behave according to the user's interaction. To be clear, this is where you make buttons bigger when users hover their mouse over, or anything the same.

‍

For HTML, you’ll need a text editor to write and make sure your code is functional. They will reduce the errors and debug as you’re inserting tags and other elements. You can either use a text editor like Notepad, Brackets or Atom to do the work.

‍

When to use HTML?

Currently, HTML is still the default coding language for website and documents. Only through HTML can a browser understand the content of a webpage, and allow your site to have all kind of materials. Thus, HTML also provide navigation of a site through hypertext.

‍

Therefore, once knowing how to use HTML means you’ve already had half the knowledge of how to run a website (or at least order a professional to do it for you). One of the most common usage of HTML is for:

Web development: To design how web elements like texts, hyperlinks and media files displayed on a browser, most developers will use HTML.
Navigation: Currently you can navigate websites and insert links from website to website due to HTML usage on embed hyperlinks.
Website documentation: For organizing and format documents, HTML makes it much more accessible & easier.

‍

The Components of HTML Document

‍

Until now, an HTML document consisted of tags and other elements to allow your browser to know what to display. Tags will look like <this>, and the letters in between the brackets are known as elements. So that’s our start, but there will be so much more to know. A basic structure of an HTML page will need:

‍

Document type declaration (DTD)

If you see <!DOCTYPE html> appears at the start of a document, it’s the components that tells what HTML version was applied to produce the page.

HTML root element

The <html> written right below the DTD is the container for the entire page, which holds all other elements. You should add it to define the language of the document.

Head

<head> is enlisted below <html> and <body>, contains data to well describe the page, including:

The <title> or the name of the webpage. This should match the headline tag that appears in the body content
The <style> defines how elements should show up. It will allow you to define the color, text alignment, background color, and so on.
The <link> indicates the resources that will be connected to the HTML page.
The <meta> contains keywords, author, and page description.
The <base> refers to the default URL.

‍

Body

And last but not least, you must have the <body>. This takes up the most of your document, and must be filled with information to display on screen. The <body> will contain:

Header: Title, heading, logo, navigation and search bar.
Main content: this is where you put your article, author information and so on.
Sidebars: This is where you show a website widgets.
Footer: Contact information, navigation and other links to your social networks can be shown here.

‍

But how does HTML work?

We’ve already known what HTML is, what it takes to create an HTML document. Now let’s get to the more technical part, how it works.

‍

To keep it simple, just imagine this. You’ve written your HTML document already, and now after saving it with an extension .html or .htm, you bring it to a browser. Since you’ve already included all the tags and elements, Google Chrome, Firefox or Safari and other browsers will be able to read this format. Now it’s ready to be seen online and visually.

‍

The main advantage of HTML?

Yes, you’ll still wonder how knowing HTML affects your work as a developer, designer or even a business owner. Here are some solid reasons why you should look into it!

It's the beginning of web development: Luckily it’s easy to learn, and even if you have zero idea of coding, HTML is still the first best option to begin with. As developers and web designers, just this reason is strong enough to get you started.

‍

It’ll support future work on CSS and JavaScript: It;s one of the 3 core web technologies, so it wouldn’t hurt to know what you’re dealing with. Thus, finding tutorials for HTML is also way too simple.

‍

Versatile: No matter you’re creating a website or mobile app, HTML is the core for you. Of course HTML is not everything, but it’s the spine for you to get most of your projects done.

‍

HTML is still your foundation!

Even for low-code or drag-and-drop web developers, learning HTML is still crucial and extremely relevant. By learning HTML, you’ll get a closer look on how websites are built and how elements work together to form great results.