If you want to develop for the web, the first thing you will learn is HTML. In fact, this ridiculously simple language is the foundation of the web. And, as a full-stack developer, you need to know it. So, in this HTML Tutorial, we start from the ground up and assume you are first approaching web development. In maybe a little more than 10 minutes, you will have the basics of HTML.
If you are here as part of the Full-Stack Developer Course, you already have everything you need. Not reading the course? You should! Start here.
If you are not, no problem: to follow this HTML tutorial you only need a PC with Notepad and a browser installed. However, that’s probably not the smartest way to go. You should at least have an HTML editor like Visual Studio Code.
The Basics of HTML
What is HTML?
HTML is the acronym of Hyper-Text Markup Language. All these fancy words tell a simple concept: you use HTML to describe the content of web pages.
HTML means Hyper-Text Markup Language.
Still, what does it mean to describe the content of web pages? Well, imagine a page on a website. Just to give you an example, this page where you are reading this article about HTML basics. Indeed, this page uses HTML to tell your device two things:
- The actual content of the page (e.g. the words you are reading, the images you are viewings, even the ads).
- The role of each part of the page (e.g. this is a paragraph, this instead is a header)
Now that we have a general idea of what HTML does, we can unpack its fancy acronym in a more formal way.
Hyper-Text is just an academic term to describe web pages. Instead, Markup Language means it is a language meant for the PC (and not for the humans). However, it is not like a programming language. Markup means it is a language that describes the role of the content (e.g. this is a paragraph, this is a header). This is in contrast with programming languages, they tell the PC “how to do things”.
Remember, the best way to appear as a newbie to literally any programmer is to say HTML is a programming language. Just don’t do that, please!
Role, not style!
Remember, HTML tells the role of each piece of content. It tells this is a paragraph, this is a header, this is a menu and so on. It doesn’t tell anything about the style (e.g. this is black, this is bold, this is yellow).
Even if you can use HTML to apply styles, this is not the best practice since early 2000. For styles, you use CSS, another language that references part of your HTML code and applies style properties to them. Do not worry, we will see that in another tutorial.
HTML Files
Pretty much like anything, HTML files have their own extension. In fact, like Microsoft Word files end with .docx and music files often end with .mp3, HTML files end with .html. This tells the computer it should HTML to understand its content.
Now, you will use for sure the HTML language inside .html files. Still, remember this is not the only place where HTML is used. In fact, you often find it bundled with some other languages, such as PHP or Javascript. Applications do that so that they can pair the markup potential from HTML with the logic from the other language.
As we are learning HTML basics, we will use only .html files for now.
HTML Basics: Understanding Tags
What is an HTML Tag?
HTML is made of tags, those are the basics of HTML. A tag is a descriptor of your content. It is what tells your PC if it is a paragraph, a header, or something else.
HTML contains various tags, each describing a different piece of content. However, they all have the same logic. In fact, each tag is comprised of two parts: the opening tag and the closing tag. Each tag has a name, appearing both in the opening and closing sections, and can have some properties.
The tag we are using, p, indicates a paragraph. Everything it encloses, in this case, My first paragraph, will be treated as a paragraph. In short, to use any tag, you should use:
- The tag name between
<and> - The content you want to enclose in this tag
- Again the tag name, this time between
</and>
Some tags, however, do not need an opening and a closing, because they are self-closing. For example, it is the case with the <br> tag, which simply adds a line break. You don’t need anything inside a line break, so you don’t need to close it. To be more explicit, you can add a trailing slash to tell this tag is self-closing (<br/>).
Tag properties
HTML tags are simple enough: they have a name between triangular brackets, some content after it, and a closing tag at the end. Yet, we can add some more flavor to them with properties.
Properties allow you to modify the behavior of some tags (but not all of them). For example, imagine you want to create a link to another page. A piece of text that, if clicked, will direct the user to another page. You don’t want to simply tell “Hey, this is a link”, you want also to tell where the user should be directed.
Easy enough, you can do it. The <a> tag we use for links has a property href (hypertext reference) just for that. In fact, it would be pointless to create a link without it. You write properties inside the opening tag before you end it with the triangular brackets.
Each property can be assigned a value, which you should enclose in quotes. Thus, this is our final result.
<a href="https://accelerates.it">A cool website</a>The code above will display just as “A cool website” on the page, but if clicked the magic will happen.
Nesting tags
You can put tags one inside the other. That’s the whole point of HTML after all, it is part of the HTML basics. In fact, it makes sense to have a link inside a paragraph. For example, you can do something like this:
<p>This paragraph contains a <a href="https://accelerates.it">link to a cool website</a></p>However, you can’t turn this into a wasteland. You should close the tags in the opposite orders in which you have opened them. In other words, the last tag to be opened is the first to be closed.
In our example, we first open <p>. However, we then open <a>, so the last tag we opened is that <a>. As such, we need to close with </a> before we can close </p>.
This makes sense, after all, you can’t have a link that is a little bit inside the paragraph and a little bit out of it. So, something like the following code is utterly wrong.
<p>This code is just <a href="https://ictshore">not</p>correct</a>The Tags
At this point, you know all the basics of HTML you need to start learning its tags. To do that, we are going to use our index.html file inside our repository that we created in the previous lesson.
If you are not following the Full-Stack Developer Course (even if you should), you can just create a file named index.html. If you are using notepad to edit, when you save it, save it as “All files” (and not as text). Otherwise, you will get index.html.txt, which won’t work. If you created in Visual Studio Code you are set to go.
Now, you can use Visual Studio Code (or notepad) to check the HTML code in your file. Instead, to see the result, you can open it in the browser (just copy and paste the path of the file into your URL bar).
The Basics of HTML Documents
An HTML file (or document) can contain many different tags. However, it will always start with some basic structure, which is the following.
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>The very first thing you should have in the file is <!doctype html>. This is not a real tag, it is just something that tells the PC you are going with HTML. More than that, it tells you are going with HTML version 5, the latest version.
Then, we have the <html> ... </html> tag. This encloses the entire web page.
Inside this tag, at the very beginning, we have the <head> ... </head> tag. This tag will contain meta-information about the page. In other words, things about the page that you won’t actually see on the page. For example, the page title, the reference to CSS files for style, or information for search engines.
Finally, the <body> ... </body>. This is what contains the actual page, such as paragraphs, headers, images, and so on. You should put everything inside here.
HTML Page Title
We will see in the details what to put inside the header of the page in the next tutorial. However, we can see now that we can put the title of the page in it. How to do that? Simple, use the <title> tag.
Try using the following code.
<!DOCTYPE html>
<html>
<head>
<title>Bakery Store</title>
</head>
<body>
</body>
</html>Save the file (in my case the file is at the path E:\Development\full-stack-course\index.html). Then, try to open this path in the browser and look at the name it appears on the tab. It will be “Bakery Store”!
Of course, you can put any title you want. As we will see when we face Search Engine Optimization, don’t make it too long otherwise it will discourage search engines. Even too short won’t be good, a half dozen words is just about right.
P: Paragraph
We already know <p>, it indicates a paragraph. So, we can enrich our page as below.
<!DOCTYPE html>
<html>
<head>
<title>Bakery Store</title>
</head>
<body>
<p>This isn't just another average bakery store.</p>
</body>
</html>H1-H6: The headers
You don’t have just one way of making a header (i.e. a title) in HTML, you have 6. H1 indicates the most important header, and you should ideally have just one of them per page. Then you have H2 for example for section titles, H3 for sub-sections title, and so on, until H6. However, you will probably go rarely beyond H4.
To recap, the tags are: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
<!DOCTYPE html>
<html>
<head>
<title>Bakery Store</title>
</head>
<body>
<h1>Bakery store</h1>
<h2>Who we are</h2>
<p>This isn't just another average bakery store.</p>
<h2>Our products</h2>
<p>We make the finest bakery products in town</p>
<h3>Bread</h3>
<p>Check out our awesome loafs</p>
<h3>Burger buns</h3>
<p>Yes, we make burger buns as well</p>
</body>
</html>At this point, our page is getting some shape, check it out in the browser!
Obviously our page is pretty basic because we haven’t applied any style. But for now, we should focus on the content.
IMG: Images
We can add some images inside our page. We do that with the self-closing tag <img/>. This tag is self-closing because we specify the URL of an image with the src (source) property. Obviously, unless we tell the source, the image won’t load, so the source is a mandatory property.
Additionally, we can use alt to specify the alternative text. This text will be displayed instead of the image in case, for some problems, it doesn’t load. It is also the text voice-only devices such as Amazon Alexa will use. And, furthermore, it will help search engines understand the image and rank your website. So, spend some time writing the alt property. Here’s what an image looks like.
First, download an image and put it in the assets folder. In our case, we downloaded a Baguette from Wikipedia and named it baguette.jpg.
<img src="/assets/baguette.jpg" alt="A baguette"/>And so, our entire page can look like this.
<!DOCTYPE html>
<html>
<head>
<title>Bakery Store</title>
</head>
<body>
<h1>Bakery store</h1>
<h2>Who we are</h2>
<p>This isn't just another average bakery store.</p>
<h2>Our products</h2>
<p>We make the finest bakery products in town</p>
<h3>Bread</h3>
<img src="https://en.wikipedia.org/wiki/Baguette#/media/File:Baguettes_-_stonesoup.jpg" alt="A baguette"/>
<p>Check out our awesome loafs</p>
<h3>Burger buns</h3>
<p>Yes, we make burger buns as well</p>
</body>
</html>However, the image won’t load. That’s because we are viewing our page as a simple file. To view the image, we have two options:
- Quick fix: Change the source to the full path, starting with
file://(in our case it is file:///E:/Development/full-stack-course/assets/baguette.jpg). - Better option: Install Visual Studio Code Lite Server extension. Then, inside Visual Studio Code, open index.html, and in the bottom-right of the page click on “Go Live”.
DIV: A container without a soul
The <div> tag is just a tag you use to group things together. It doesn’t do anything on its own, and we are not going to use it right now. It will be important when we learn CSS because you can group things together and apply a style to the whole group.
<div>Some content</div>Emphasis on Text
In most pages on the web, the text is the most important part. Sometimes, we want to highlight some important words, and we have several ways to do it.
<b>text</b>to make the text bold<i>text</i>to make the text italic<strong>text</strong>this text has “strong” importance, and it will be the browser to decide how to render it. It often translates to bold.<em>text</em>emphasis on this text, it will be the browser deciding how to render it. In practice, it translates to italic.
I have sprinkled some of them on our page, here’s the result.
<!DOCTYPE html>
<html>
<head>
<title>Bakery Store</title>
</head>
<body>
<h1>Bakery store</h1>
<h2>Who we are</h2>
<p>This isn't just another average bakery store.</p>
<h2>Our products</h2>
<p>We make the <b>finest</b> bakery products in town</p>
<h3>Bread</h3>
<img src="/assets/baguette.jpg" alt="A baguette"/>
<p>Check out our awesome loafs</p>
<h3>Burger buns</h3>
<p>Yes, we make <i>burger buns</i> as well</p>
</body>
</html>Wrapping it up
Of course, there are plenty of more tags to learn. However, it is not the purpose of this HTML basics tutorial. Here you should only get an overview of what’s possible, understand the main concepts, and the most important tags.
In the upcoming HTML tutorials, we will go deep in every part and understand each tag, by diving deeper into its role, why to use it, and how to do it.
Bonus: check all the source files of the Full Stack Development Course on GitHub at alessandromaggio/full-stack-course. And, you can check the index.html file of this very HTML basics tutorial by looking at this commit.
