Zero to Hero Coding
Hey, I'm Vera and new to coding, but I started to learn how to create websites. I'll share with you my earned knowledge. Let's be a frontend developer together! :)
Meet HTML!
Looking for my new CSS post? Check it out here: Meet CSS!
As I wrote in my previous post, the most important concepts in frontend development are HTML and CSS. These two determine what you see on a website.
With this post I start a three-part series, this first post is about HTML, the second one is about CSS and followed by JavaScript as that’s the only programming language running in web browsers.
So let's begin and start to learn how to code!
What HTML is?
I know there are too many acronyms, but it's still easier to memorize them than what they shorten.
So HTML stands for HyperText Markup Language - this is the standard descriptor language. It is used to give websites structure with text, links, images, video clips and other elements - so basically HTML contains all the information of the website. Developers write pages in HTML, and the browsers read this to display the page on your screen.
Learn by examples - HTML tutorial
As it is easier to learn through examples, I am going to show you some of the basic HTML elements by small snippets.
Basic HTML skeleton
This code snippet below is the skeleton of an HTML file - in the first line the <!DOCTYPE html> declaration means that the page is written in HTML5.
As you can see, the main parts are the head and the body. These are called tags in HTML.
The stucture of an HTML Tag
All HTML elements begin with an opening tag, for example: <head> or <body> or <p>.
Most elements, these three for sure, require a closing tag with a slash: /, like: </head> or </body> or </p>.
These elements can have extra attributes as well which define how they behave or look like, for example:
<p class="textcenter">This is the content of the paragraph</p>
Here the class is the attribute with the value of textcenter, later on (in the next post) we will learn how to define this textcenter class in CSS.
PRO TIP: Although you can use HTML to style your content, you shouldn't do that because it will be hard to edit later on. Instead, you should use CSS (Cascading Style Sheets) for implementing your design.
So we can divide the HTML into two part. The first is the head - this part contains the elements which are invisible on your page, but you have to use them. You can write here the title of your website, the meta tags, the link tags and the style tags. (For clarification: the title is visible in the browser window, it is the name of the tab, but not on your page) These tags will be discovered in depth in one of the upcoming posts.
The second part, the body has the content. In the rest of the post, we are going to take a look at the elements that can be present in the body.
List of HTML elements of the body
Headings
Headings are one of the most used HTML elements. They serve as headlines, like the ones in newspapers or magazines. These are one of the most important tags when you optimize for Google searches! (Don’t worry, we will cover SEO topics as well!)
You have six heading elements: h1, h2, h3, h4, h5, and h6, h1 is the largest and h6 is the smallest. Usually pages have one h1, a couple of h2, and more (if any) from the rest.
PRO TIP: You can edit any of these embed codes. Just click on the "Edit on Codepen" sign in the upper right corner! Have fun! :)
Paragraphs and sections
<section>is the biggest container, an aggregation. (This is a new tag, it was introduced with HTML5.)<div></div>is a smaller container. It can be used to group elements for example for styling (using it with attributes).<p></p>stands for paragraphs (yes, it's that simple).
Ordered and unordered lists
You can do lists with <ol> (ordered list) or <ul> (unordered list) tags. And as you can see, these tags have <li> tags (these are the list items) between the opening and the closing tags. They are called the children of the ol or ul tags - so from <li> element’s point of view, the ol or ul is the parent element.
Tables
Here we have a table opening and a closing parent tag and between there are two children, the <thead> and the <tbody>. The <thead> defines the head of the columns of the table.
And these two children has children too, they are the <tr> which stands for the rows, and the <td> which defines a cell of a table what contains data. In the first part, you should use <th> (this is a cell of the table header) instead of <td>.
Next up
As the second part of this series I will write about the CSS, we are going to color, style, shape our HTML skeleton. I will love this, I hope that you will too.