Forem: Hildweig 🐬

Simple guide for HTML forms

Hildweig 🐬 — Sun, 07 Feb 2021 23:16:04 +0000

Introduction

How many websites users visit nowadays that doesn't have some sort of login or interaction with users? Imagine how boring websites would be if the only available content is the website's owner's content (Read-only)? If you couldn't comment nor like, if you didn't have an account, to begin with? HTML forms play a great role in enabling developers to easily create amazing interactive websites where users can purchase products, search for something, participate in surveys, and the list goes on. Now you surely realize how much these elements are necessary and the influence they have on the user experience, this is why you want to have a solid understanding of how to create them, and how to use them.

General idea about forms

In HTML the idea about forms is that you have a bunch of different forms elements available for you, and all of these are wrapped inside a big form container. You can have more than one form in your document, what is important is that your form elements are contained inside a form that serves a particular purpose. And to be able to send what users entered there is also a special element to send the data inside the form. Simple as that!

If you got the idea, let's get started!

1. The form container

Your big form container is the <form></form> element, it has an opening tag and a closing tag, and all your elements are in between. The form element has two attributes that you always need to have:

method: The method attribute tells the web browser how to send form data to a server. If you specify a value of POST, this means that the browser will send the data to the webserver. You want to do that if you are sending sensitive data. If the GET method is used, the data is sent inside the URL separated with a question mark. If you want to understand more about these methods I highly recommand you this course.
action: your forms are useless unless some kind of processing takes place after submitting. The action attribute helps us to specify where the data will be sent after the submission of the form, the value of the action is a URL. Simply put, after submitting your data will be sent and processed and the next page your user should access is the page that is specified in the action attribute!

<form action="/" method="get">
</form>

2. The form elements

HTML has a plethora of elements for basic things such as entering numbers, text, dates, email, password, as well as more complex elements such as menus, checkable elements, and so much more! Besides, for each of these elements, you can have some sort of validation that is already taken care of. So We have the flexibility to pick what suits us while a part of the troubles for the format etc is already handled.

2.1 The input element

The input element is the most commonly used form element because this element itself can "transform" and have a different behavior according to the type we specify for it to be. Look at this snippet and you will understand:

<input type="an_input_type">

So the shape and behavior and the way you interact with that input are related to the type it has. For the sake of simplicity I will show you the ones you need most of the times:

Input to enter a username:

When you want an input to enter a username, you can specify type="text", type="text" means that your user is allowed to enter any character but it has to be in a single line.

If you want to restrict the length to a minimum or a maximum number of characters use minlength and maxlength attributes:

<input type="text" minlength= "2" maxlength="30">

If you want to oblige the user to fill that field you can add the required attribute, it just comes as a single word without a value, having it in your input means that it is required, if not then it is an optional field.

<input type="text" minlength= "2" maxlength="30" required>

For a good user experience you can add a description about what that input is for, or the expected format, for that you can use the attribute placeholder:

<input type="text" placeholder="Enter username" required>

If your field is optional but you still want to have a default value, there is the attribute value, where you specify the default value.

<input type="text" value="UserHasNoName">

Of course, all these attributes work for different inputs not only the text type! And I gave you the username as an example, if you need to add a field to enter a single line text then this element is the most appropriate. You can see how these look here (spoiler alert: they won't look like a real form but we will eventually come to that):

Input to enter an email

The input of type "email" is the HTML element you should use for your email fields. It gives us the flexibility to control the format entered and ensure that it is valid, you can specify a minimum and maximum length, consider it required, change the pattern of the input that the email should follow... Just to say that it is perfect! You can also have a default value of course but I doubt you want to do that on a real-world website haha.

<input type="email" placeholder="Enter your email" required>

The way you change the email pattern is by specifying a regular expression, simply put, it is a "string" that can match your text with that string content (like a decoder). If you want to know more about it I highly recommend you this tutorial. And by the way, this attribute pattern also works for the input type of text, imagine if you have a country code with a specific pattern, this attribute is just perfect for more validation!

<input type="email" placeholder="Enter your email" pattern= "your regular expression here" required>

Input for your passwords

The input of type="password" is a single text input that masks the characters for you while your user is typing (no need for extra-work to make it like that!). Same as for the email you don't want to have that field empty so I highly recommand you to use the required attribute, and most of the type you would find passwords of a minimum length of 8 characters, you can also add the maximum length attribute in case you have some troller that would type 999 characters as a password.

<input type="password" placeholder="Enter your password" minlength="8" maxlength="50" required>

Input for numbers fields

If you want to ensure that the user can only enter numbers, use the input type="number".

The input type number has two nice attributes: min, and max, if your field concerns age and you don't want to have negative values then you can put the min ="0", same, for age if you want to have a maximum value that user can't exceed, you can add a default value with value ="your value", and make required if you want to and even have a placeholder, all what's available for inputs is available!

<input type="number" min="0" required placeholder="enter age">

You can see that there is arrows, when you click on them you either add (+1) starting from 0 if you click on the upper arrow, or (-1) if you click on the other arrow, of course you can change how much you want to increase/decrease by specifying an attribute called step. You add it to your input and specify how much you want to "step". If I want to increase my values with 10 each time, then step="10", but once you reach the minimum you can't go bellow if min is specified, same for the max.

<input type="number" min="1" required placeholder="Enter quantity" step ="10">

Input for dates

You've probably guessed it, your input will have the type "date". Users will be able to enter the date either from a calendar that shows up as an icon or from a textbox. Say you are having a hotel website and your users can reserve rooms for some time, one of the things you would probably need is to restrict dates, it's weird if someone can reserve for yesterday, so same as the number input, you have a min and max attributes, excepts this time these are dates that follow this format: "yyyy-mm-dd".
Here is an example:

<input type="date" 
       value="2021-02-07"
       min="2021-01-07" max="2021-12-31">

The picture on the left is how it looked when I clicked on the year to change it, pretty nice right? I also added a default value assuming the reservation is for today in case the user doesn't change it.

Input for files!

Yess, who guessed that we can upload files that easily! Just have the input with type="file" and your users will be able to enter files in the field. You can also add the attribute multiple to be able to enter multiple files at the same time in the same field, it comes just as a single word, and having it there means that the multiple selection is activated. Also, you can restrict the types of files users can enter, if there is more than one then you can just separate them with commas (,).

<input type="file" accept=".doc,.docx,.txt" multiple>

Input for searching

The search bars we see on websites are created using the input type="search", you can add a placeholder, a minlength or a maxlength if you want to, anyways here is an example!

<input type="search" placeholder="search">

Input for choosing colors

This one I found it twice or so on a website where the owner showed a beautiful Pomodoro with a cat and you can change the cat color and the background, it was pretty cool so even if it's not used that much I thought "why not?", you can add a default value using the value attribute if you want to. Here is how you can add a field to select colors:

<input type="color" value="#A5D9D6">

Checkboxes

Checkboxes look like squares that users can "check". Let's say you have a list of toppings that clients can include in their pizza. They can select one or multiple toppings at the same time using checkboxes, and for each one, you would have something like this:

<input type="checkbox" id="mushrooms" name="topping">
<label for="mushrooms">Mushrooms</label>

The first line is the input element, this is precisely our checkbox.
Since you can't have any text with it (not even a placeholder), you need a way to show what that checkbox represents, and we do that using an element called "label". Most of the time, form elements are associated with a label element. The attribute "for" will link with the element by having the same value as the id attribute in the input. Besides, not only they are visually linked, but they are programmatically associated with it too. Another advantage is that, when you click on the label, you will automatically activate/focus on the input as well. If your users use a touch screen device, this will make things a little bit easier for them.
The name attribute will help us to identify the data we send to the server. In fact, in all your form elements you should always add the name attribute, I left it up to now to not condense the information, but now you know that in your elements you would have an id and a name too. The value of the name attribute can't be an empty string and should be unique, but for checkboxes, they can be the same.
The id and name can have the same value, but each id should be unique with other ids, same for the name attribute.
There is an attribute called "checked", that you can specify if to have a checkbox checked by default. Here is another example with two checkboxes:

<form method="post" action="/">
  <input type="checkbox" name="topping" id="cheese" checked>
  <label for="cheese">Cheese</label>

  <input type="checkbox" name="topping" id="mushrooms">
  <label for="mushrooms">Mushrooms</label>

  <input type="checkbox" name="topping" id="olives">
  <label for="olives">Olives</label> 
</form>

If you noticed, I have the same name, since later since they are about toppings, I can get the values programatically in a list by using that name, so all my toppings selected would be extracted at once. But the ids are different.

Radio buttons

Radio buttons are useful when you want your user to select only one option. Here too, the name for each radio button is the same but the ids are different. And you can also have the checked attribute to have one checked by default. To create a radio button, you specify the value "radio" in the type attribute:

<form method="post" action="/">
  <input type="radio" name="gender" id="male">
  <label for="male">Male</label>

  <input type="radio" name="gender" id="female" checked>
  <label for="female">Female</label>

  <input type="radio" name="gender" id="other">
  <label for="other">Other</label> 
</form>

Note that if you have other radio buttons with another name, it won't be a problem, the "only one" concerns radio buttons with the same name.

Other input types

The list of types that exist is so long so I don't want to kill you with new information, the ones I showed you are the most used inputs but if you are curious about other types here is a list, hope it will help you! Also, you don't need to push yourself to remember them immediately, it will come with time and practice, the more you use them, the more you'll remember them, worst case Google is your friend!

Submitting your form

Now that you have a bunch of input elements you can use inside your form it's time to show you how you can submit your data and send it to the server. There is an specific type of input called "submit" that allows us to exactly do that. By default the word is "Submit" but if you want to change it, you can do it by entering the word you want to display with the attribute value:

<input type="submit" value="Send">

2.2 The button element

While the input of type submit is always found inside forms, buttons can be found anywhere in an HTML document. In our case, we're only interested in using it inside the form to send our data. To do that, we add to the button the type attribute with the value of submit.

<button type="submit">Submit</button>

The main advantage of having a submit with a button instead of input is that you can create a more complex component, it can have an icon, and more if you want, while the input can have only the text it has in the value attribute.

2.3 Textarea element

We saw earlier that <input type="text"> allows us to enter a single line text. Now we want to be able to enter a real text with multiple lines. The <textarea><textarea> element comes with an opening tag and a closing tag, you can specify in advance the text by putting it in between, or leave it like that for the user to enter their content.

<label for="comment">Comment</label>
<textarea name="comment" id="comment" rows="10" cols="30">
</textarea>

The size of this textarea is determined by the number of rows and columns it can have (a bit weird for the columns but, it is what it is). Here are some useful attributes you can use:

maxlength: the maximum number of characters allowed.
placeholder: so tat you can describe the expected content.
required: if you want to ensure that it won't be left empty.

2.4 Menu options

Many pages have some sorts of menus where you select one of the options. Let's say you're registering into a website and they ask you to specify your country among a list of countries. This is done by using the <select></select> element, associated with a list of <option></option> elements inside.

<label for="countries">Choose a country:</label>
<select name="countries" id="countries">
  <option value="">Country</option>
  <option value="frontend">Front-end Land</option>
  <option value="backend">Back-end Land</option>
  <option value="fullstack">Full Stack Land</option>
</select>

Here I have my label, for and id have the same values to associate the label and the select element. And inside I have a list of options. The text in between is so that it will be displayed on the page, and the value attribute holds the data that will be sent to the server. So when a user clicks on an option, it's the value that will be sent not the text in between.

Now here is a cool trick, what if you want a user to choose their nationality, but they have two? With select, we can create multiple groups of options, and in each group you can pick an option. For that we need another element: <optgroup></optgroup> and the optgroup has the attribute "label" that can be used ti describe each group! Inside each <optgroup> you would have your options.

Here is an example:

<label for="nationalities">Choose a car:</label>
<select  name="nationalities" id="nationalities">
  <optgroup label="First nationality">
    <option value="dreamer">Dreamer</option>
    <option value="worker">Worker</option>
  </optgroup>
  <optgroup label="Second nationality">
    <option value="morning person">Morning person</option>
    <option value="night person">Night person</option>
  </optgroup>
</select>

Wrap up

With all that, let's create a form for registration:

And here is a small summary about all what you've learned:

HTML forms allow us to have a better user experience on our websites.
All HTML forms have a <form></form> element as a parent.
Our elements are nested inside the <form></form> element.
There are multiple elements that can be used: inputs (for email, username, date, numbers...etc), buttons (to send our data), textarea (to enter a text), select (to create menus).
You can select multiple checkboxes while you can select only one radio button in a form as long as the radio elements have the same name.
We can have more complex menus using <optgroup></optgroup>

Thank you

Once again I am so happy that you've read up to this point! If you have a dream, don’t just sit there. Gather courage to believe that
you can succeed and leave no stone unturned to make it a reality. All your efforts are worth it, looking forward to see how you will shine in the future! If you liked this post please like and share, and if you have any question feel free to ask and I will gladly answer! See you soon!

All you need to know about HTML tables

Hildweig 🐬 — Sun, 24 Jan 2021 17:33:49 +0000

This week's subject is HTML tables, this post is a part of my HTML beginner series. If you haven't checked the previous ones I highly recommend you to read them! If you already know the basics and just one to know about HTML tables you can skip them and read this one directly instead. This course is structured in a way that will make you grasp the information more clearly. You will learn how to create basic HTML tables, their components, how to have those tables that have cells expanding on more than one cell, when to use tables, and more! Let's get started!

Why Tables?

One of the most efficient ways to present a large amount of information to a reader is to collect them in a table, tables can supplement the text and also make it easier for you to explain something hard to explain with plain text. Tables are also the best when you want to have spreadsheet-like content. In HTML, you can create tables easily.

Create your first table

Let's go back to the basics, a table should have rows, columns, and the intersection between them create cells, and sometimes, you may find a caption attached to a table (like in Microsoft word). We'll first try to create our table using this definition:

In HTML, a table is defined using the <table> element, it has an opening tag and a closing tag, and you put the content in between.
Rows are defined using the <tr></tr> element (table row), so if you want a table with three rows it would look like something like this:

<table>
<tr></tr> 
<tr></tr> 
<tr></tr> 
</table>

For columns, there is no such thing as if you tried to guess the next element, instead, you have full control over the number of columns you want to have in each row (but I advise you to have the same number otherwise it would look weird and has no sense). The columns are indirectly defined using the table data element <td></td> , it has also an opening tag and a closing tag, and your actual data is in between, simple as that. So let's see how our table is structured so far:

<table>
  <tr>
    <td>Saturday</td>
    <td>Sunday</td>
    <td>Monday</td>
  </tr> 
  <tr>
    <td>Vegetables Soup</td>
    <td>Jardiniere</td>
    <td>Fish & Potato</td>
  </tr> 
 <tr>
    <td>$10</td>
    <td>$12</td>
    <td>$16</td>
  </tr> 
</table>

You can check here the result, I styled it a bit so that you can see clearly the elements:

Now that I'm looking at it, I kinda want to make a distinction between the days of the week and my meals. And I also want at the end to have a row where there is the average cost of my meals, and there is a way to do that! In fact, what we've done earlier wasn't a "well created" table. HTML let us define three components in our table:

A header : you want to use it to contain the name of your columns in the header. Having a header inside your table makes it easier to find the data you're looking for if the header elements stand out from the other ones. Of course, there are other ways you might say (using CSS) but if you appreciate content that is highly semantically and you like doing things how they should be, I really recommend you to include it. So there, we will contain the days of the week in the header. The HTML element for the table header is <thead></thead>, and the content of your header is wrapper inside a header cell <th></th>, the text looks bold and is centered by default. You can check here the code and how it looks:

And notice that we still have a row, we just added the thead element and replaced the tr with th!

Now for the data : you should wrap your table rows inside a <tbody></tbody> element (table body). The header element should always come before this element. Okay, so let's apply this to our table:

Our third step is to add a footer : you don't always need to have a footer in your table, but if you need one then you can use the <tfoot></tfoot> element (table footer). Both the thead and tfoot elements contain ancillary information to support the main information of the tbody. Plus, even if it seems logical to have it at the end, it's not a general rule, sometimes you may find a header then footer then the body, and sometimes the header then body then the footer. I will show you soon an example with a footer.

Add a little touch to your table

Now that we know how to create a basic table I want to show you some more of what you can do on tables.

1. Captions

Suppose I'm one of your users and I'm reading a content in your page, and then there is a table. Having a caption in your table will help me to understand what that table represents, and it will make things easier for me to decide if I want to read it or skip it. Captions also help people who use screen readers since most screen readers announce the content of captions. It should always come first (even before the thead element).

<table>
  <caption>
    My holidays meal plan and cost.
  </caption>
  <thead>
    <tr>
      <th>Saturday</th>
      <th>Sunday</th>
      <th>Monday</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>Vegetables Soup</td>
      <td>Jardiniere</td>
      <td>Fish & Potato</td>
    </tr> 
    <tr>
      <td>$10</td>
      <td>$12</td>
      <td>$16</td>
    </tr>
  </tbody>
</table>

If you try this snippet, you'll see that the caption is centered by default. You can also add more details to the caption and nest elements inside if you want to style them differently later on. (It's okay if you don't know styling yet, just know that you can have a sort of title followed by a text if you want in your caption, and even more but it would be weird if you had something else I think).

2. Cells? Fuuuusion!

Did you know that your cells can become super saiyan? By merging two or more cells your cell can take vertically or horizantally the space of the number of cells you want. To understand how this work we need to understand two attributes that can go on any cell element.

1. rowspan: by default, your cell has indirectly a rowspan= "1", if you want it to span more vertically, then you can add it to the cell you want, say 2 for example : rowspan= "2" will have the space of 2 rows.
2. colspan: here too, by default your cell has indirectly a colspan= "1", if you want to have more than that, add the attribute with the number you want. Of course, you can have rowspan and colspan included in the same cell.

Now, I want my table to have a footer for the sum of all meals, and since it's a sum, I will span the cell horizontally for the three meals.

3.Create groups for columns

We said earlier that the columns are implicitly represented with the <td> elements. This is true, but imagine later on if you want to apply different styles for each group of columns, let's say we have a table for a student semester grades, the first column is for subjects names, the following columns for the grades, and the last one for teachers remarks. The first and last columns I want them with a style, and the ones in between with a different style. (this is just an example) HTML lets us group our columns using the <colgroup> and <col> elements.

1. colgroup: The <colgroup> element should be child of the
element, you have to put it after the <caption> element if there is one, and before any <thead>, <tbody>, or <tfoot> elements.
2. col: Now to define your columns groups, use the <col> element within the <colgroup> element. You also need to add an attribute in this element which specifies how many columns your group spans, for example, if my group has three columns I would write <col span="3"> (this element comes with just one tag)
```
<table>
  <colgroup>
    <col span="3">
  </colgroup>
  <caption>
    My holidays meal plan and cost <br>
    <span>The first row represents the days, the second one the meals, and the third one the cost of each meal</span>
  </caption>
  <thead>
    <tr>
      <th>Saturday</th>
      <th>Sunday</th>
      <th>Monday</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>Vegetables Soup</td>
      <td>Jardiniere</td>
      <td>Fish & Potato</td>
    </tr> 
    <tr>
      <td>$10</td>
      <td>$12</td>
      <td>$16</td>
    </tr>
  </tbody>
</table>
```
You will find them more useful once you learn CSS don't worry.
Some advices
1- Do not use HTML tables for layouts
HTML tables should be only used for their real purpose which is to organise your data in a table form. Some people use it for layouts too (a row for header, one for the content, etc), and you really should not use it this way, here are some reasons:
- 1. Screen readers used by blind people are tools that interpret the tags that exist in HTML and read the content to users. Because tables are not appropriate for layouts usage the screen readers won't read it in un "understandable" way. Imagine if someone would read to you a text backwards, or a word each line then go back to the first line, weird right? Well, you can imagine how confusing screen readers would read the content if you layout your page using tables.
- 2. Difficult to maintain: making modifications on such a page with all the rows and cells would bring you more pain than you could imagine.
- 3. Tables aren't responsive by default. They are sized according to what they contain, while the normal layout containers (header, section, article, div) have their width set to 100% of their parent element. Using tables would make you do extra work to make it responsive.
2- Can you have nested tables?
The answer is yes, it is doable. However you should avoid that practice as much as possible. You will have the same issue with screen readers (weird reading), so you can add extra columns and cells instead.
Conclusion
That's it for today! If you read up to this point I'm so proud of you and you should be proud of yourself as well. No one can take away the hardwork you're putting and the results you'll get if you persevere. Don't forget to enjoy your journey and share your progress with the community to keep yourself motivated and motivate others with you!
If you liked this post, please share it and feel free to share your thoughts in the comments. If you have any suggestions about what you want to learn you can tell me in the comments as well.
Here is a summary of what you learned today:

Thank you for reading and see you soon!

HTML tags for SEO success

Hildweig 🐬 — Sun, 17 Jan 2021 22:21:45 +0000

So you created a website and you're wondering why you don't have that many visitors? You tried to promote your page using Facebook or Instagram, and even you paid a great amount of money to reach a certain number of visitors? Let me ask you two other questions:
Did you know that organic ranking generates more traffic than paid search? And did you know that there are some free ways to get more visitors? Well, this is precisely what I am going to talk about in this post. If you're interested keep reading, hopefully, you'll find some good tips you didn't have knowledge of. Without further ado, let's start!

Introducing HTML tags for SEO

To be on the same page, what are HTML tags? (You might want to check my previous post here) HTML tags are snippets of HTML coding that provide the directions for the visual content that we see on the Web, they also tell engines how to "read" your content. In fact, they have a great influence on ranking pages. They can provide a better navigation (more traffic), help query matching, guide search engines on where to find relevant informations. In addition, they let you personalize how social media show your articles. In the end, it’s HTML tags for SEO that determine how likely you are going to have a decent rank.
Since I want this post to be beginner friendly, I choosed the mostly used ones, so you can include them in your pages:

Header tags

These are the tags that you can include in your header element.

1. Title tag

The title tag basically describes what your content is about.

<title>My fancy title</title>

The first thing that you see in search engine result pages is indeed the title tag, if your title doesn't pick the interest of users, they are less likely to click on the link. Besides, the title tag is displayed on your browser tab, so if you have many tabs open, the title makes it easier to retrieve the tab the user wants. Finaly, the title is also shown when someone shares your link in social media.

Some advice on the title tag :

Do not stuff your title with keywords because it might be changed by Google to a title that seems more relevant to the content. So make sure that the title faithfully describes the content.
Keep the length under 70 characters, if your title is long, keep in mind how much space the characters occupy so that it won't be cut (you can use & instead of and, "/" instead of or, etc.)
Your keywords should be at the beginning of the title so that they are easily spotted.
Do not repeat the same titles accross your website, Google may penalize your website thinking it has duplicate content.
If you are a known brand, you can use the brand name at the end of your title, it will add more value to your title while focusing on the title itself, unless it's a home / about / contact us page.

2. Meta description tag

Having a catchy description can help to push users to click on your results in the search engine result pages (SERPs). In HTML it looks like this:

<meta name="description" content="Some catchy description">

And here is how the description is shown in the SERP:

Note that sometimes, Google might quote a copy of your page if by doing so it better suits the query rather than your description. Although this tag is not a ranking factor, I'm sure that most of you instinctively look at the description before clicking, and they also appear across social media when users share your URL!

Some advice on the meta description tag :

What I can advise you is that you should write a description that matches best the content of your page while avoiding duplicate descriptions.
Also, avoid alphanumeric characters, when you use quotation marks, for example, Google will ignore the sentence in between, so it is safer to not use any alphanumeric characters at all.
Once again, keep the length in mind, since only the first 150-160 characters will be kept, and the rest is cut; and make sure to include what's most relevant at the beginning.

3. Open graph tags

Open graph tags are part of Facebook open graph protocol, you can find them in the head section of a web page, and the reason that they were created is that they enable you to control how information about your page is represented in social media, meaning that they influence the performance of your links in social media. All of major platforms recognize them and are widely used (Google, LinkedIn, Twitter, etc.)

4. Twitter cards

Twitter cards are very similar to open graph tags; in fact, open graph tags are used in Twitter if no Twitter card is present. They are exclusively used by Twitter.

5. Robot tags

Robot tags are snippets of code that tell search engines what pages you want to index, and which ones you don't. So that individual pages can be ignored. It might help you to avoid some problems if you think that some pages should not be indexed but you still want to keep them. If this tag is not included, search engines would index all of your pages by default. Here is how it looks in HTML:

<meta name="robots" content="index, follow">

You can specify the following parameters in your robot tags:

noindex: prevents from indexing a page.
nofollow: prevents the search engine from following the globality of the links on a page.
noarchive: prevents a cached copy of a page to appear in the search result.
nosnippet: prevents the description of a page from appearing in the search result, as well as caching the page.
none: used for "noindex, nofollow".

6. Canonical tags for prioritization

If you have pages with identical content, you can choose which one should have more priority using this tag:

<link href="https://www.facebook.com/HildweigDev" rel="canonical">

This can be an amazing trick to counter the problem we talked about above for duplicate content!

7. Responsive website

A responsive website is a website that is shown in a friendly way for desktop and mobile screens. Google prioritizes websites that are responsive over unresponsive ones. But how does it know that it is responsive ? Simply by looking at this snippet:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Those were the tags that you can include inside your head element. Now let me show you some useful tags that you include inside the body element!

Body Tags

These are the tags that you can include in your body element

1. Header tags for the win!

How many of you scan the page content by scrolling through the titles before reading the actual content? That's one use. In terms of SEO, using headers means that you're telling the search engines more efficiently what exactly your content is about. Google also uses headers to create some list-like snippets when looking for a particular topic:

Some advice about the headers :

It's a good practice to have one h1 header per page, you can use h2 for lower value titles, then h3 if necessary, and so on. Use the headers smartly to make the content of each section clear.
It's also a good practice to include your keywords or their synonyms in your headers, but try to not stuff them okay?

2. Alt attribute on images

Alt attributes are part of the image tag, not do only they provide an alternative text for the image if it is not shown correctly, but it is also useful for search engines so that they know what that image represents.

<img src="url" alt="A clear description">

Some advice on the alt tag:

It is unnecessary to optimize each image description, focus only on those that add value to your content, some useful information.
Again, you can benefit from using them if you include keywords (without overuse).
Make the description clear and concise.

3. Good usage of links

A good practice is to link your page to other pages that are inside your website to enhance the website traffic. This is called internal linking, external linking on the other hand are links that point to a page of another website. Links also help search engines to find and index the pages of your website. This is quote from Google:

Some pages are known because Google has already crawled them before. Other pages are discovered when Google follows a link from a known page to a new page.

Another thing is that, if you want to use external links and make search engines ignore the connection, or when you link to a website with a poor domain authority, use the "nofollow" attribute:

<a href="https://www.facebook.com/HildweigDev" rel="nofollow">Maybe you want to follow my page?</a>

Conclusion

That's it for today. Congratulations for reading the entire post! Most of the things in life are not within our control, but this time, these efforts, your dedication are within your control. If you liked the content please let me know! Also if you have other tips that you would like to share feel free to share them in the comments!
Here is a summary of the tags that we discussed today:

See you soon!

HTML Basics: Start from zero!

Hildweig 🐬 — Sun, 10 Jan 2021 19:49:56 +0000

Introduction

When I started learning HTML, that was back then at the university. For some reason we spent the entire semester only talking about it, and even with all that time, it was still hard for me to remember the information, and the way we were taught just made me think that maybe web development wasn't for me. Now I'm glad that I still did give it a serious shot and didn't listen to my dark thoughts. My goal today is to give you some basics of html. This is my first post for a long journey, I will try to teach you what I know in the most simplest way. There are absolutely no pre-requisite required, I will try to explain things in a way that anyone can understand!

Why learn HTML?

HTML stands for "HyperText Markup Language", it is not a programming language but a markup one instead, in programming there is logic, there are operations, in HTML you don't have these. An important question you want to ask yourself before to start learning something is: "why should I learn it?", you also want to make sure that it matches your goals and priorities. Now, if you would like to become a web developer, you need to know that HTML is the skeleton of any web page; having a solid grasp of its core concepts will not only help you to become a web developer, but it will also distinguish you from the less good ones who write it arbitrarily.

Basic structure of HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
</head>
<body>
    Your content here
</body>
</html>

Any HTML file would necessarly have this structure, and each element here has an important role:

The DOCTYPE: I think that just its name gives us a hint about what it does (another hint: document type). This element tells to the browser that it is looking at the document of the specified type, in this case, the document type is html. Always put it at the top of your html file
The html element: your real HTML code starts there. That's the root of your document, and I'm intentionally using the word root because, if you noticed, the structure looks exactly as a family tree, you have the ancestors, the one that has everything wrapped inside of it, and then parents and children,... And each family member has also its own family, just like us! Almost all html elements have an opening tag and a closing tag, and between them is the content of that element. You can also picture it as the russian dolls called Matryoshka, the only difference is that each doll in our html can have many other dolls at the same level, as much as we need!

The head element: the html head element is where you put your meta data which are information concerning your page, for example the author, the description of the content, etc. For your SEO strategy, knowing what to include in the head element is crucial so that your page will be more visible. For now let's not over complicate it and just keep in mind that anything that is inside the head element won't be displayed in your page, but still will be used for different purposes.
The charset meta tag: here you are setting the character encoding, there are different encodings (ASCII, ISO, utf-8, ...), but I've never seen so far another character encoding used other than utf-8 in web pages, still you can use whatever suits you!
The viewport meta tag: you should include the viewport meta tag in all your html files, it allows the browser to control the page dimension and the way it scales. The initial-scale=1.0 means that the zoom level is set to one, and the width=device-width means that the width of the page is equal to the width of the user's screen. If you don't use it the page won't be displayed correctly.
The title element: we use it to display the name of your page, simple as that! The titles you see on your tab are embedded inside that element.
The body element: This is were you are going to put all the content that will be displayed in your page!

Some HTML elements

With that basic structure discussed above, the only thing you'll have is an empty page with a title in your tab, and chances are that you are more interessted in knowing how to make a real page with content in it. Anything you see in your page is inside the body element. But your content need to be formatted, it needs to have a structure, you don't want to throw your text or whatever directly okay? The first reason is that it's the only way for the browser to know the type of content you have, if it's a title, or a paragraph or an image... The second reason is that if you structure it nicely you'll have less trouble to style it, to add specific background to a part of your content, or something like that. Thankfully html has it all! That way your content will be both human and machine readable!

Types of HTML elements

We have just two types: standards elements, and empty elements.

A standard element is an element that has an opening tag, a closing tag, and content in between. A standard element can also have many elements inside and in this case we will have what we call a nested element.
An empty element has only a tag and the content is a value of an attribute.

Today I will show you elements that you can use as "containers", and elements that wrap your text, images, titles, etc!

The big containers

The header

Let's say that at the top of your page you have a menu and a logo, these are generally contained inside a header!

<header>Something</header>

nav

You use it to wrap your navigation, and it is generally inside your header element.

<nav>Your navigation here</nav>

section

You'll have for example a section for the introduction, one for the main content, a section for the contact information, you name it.

<section>Content of the section</section>

article

You want to include a magazine or a newspaper article? Simply use the article tag! Another cool thing is that if you have a list of articles, each one will be contained separately! Besides, you can find sections that have articles and vice versa.

<article>My article</article>

aside

If you have some information that is indirectly related to your main information you can use the aside tag to do that. In my copybook I put some aside information in the margin, the aside tag can be used in the same way!

<aside>My side information</aside>

footer

Most of web pages have a footer at the end where they put their copy right, some article links, etc. Use the footer tag to create a footer (oki)!

<footer>&copy; Hildweig, 2021</footer>

Headings, paragraphs, lists, links, and images

To not make this post too long, I will just give you a general idea about what you can find inside of the previous containers.
You'll have:

Titles: in HTML there are six tags just for headings so that we can semantically represent the importance and level of each of our headings. THe most important heading in your section will be h1 (heading 1), if you have a subtitle use h2, and so on. In your browser their size is also different, h1 is displayed very big, h2 less bigger, and the smallest is h6, but please avoid using a heading just for its size, instead you can resize them using css which is specially created for styling HTML elements, and avoid skipping heading levels, start with h1, then h2, and so on ^^.
Paragraphs: Use the
tag to display your paragraphs!

<p>The journey of a thousand miles begins with one step.</p>

Lists: In HTML, there are two types of lists: ordered lists, and unordered ones. A common use case for the unordered list is to be the container of your navigation elements, something like that:

<nav>
  <ul>
    <li>Home</li>
    <li>About Us</li>
    <li>Contact Us</li>
  </ul>
</nav>

Both types of lists have li tags that refer to the element itself. Now say I want to display a recipe, or the top movies of 2020? Ordered lists are best for this task. And the only difference is that instead of using ul (for unordered list) we use ol (ordered list) and it has numbers.

Links: What kind of page doesn't have links? To display links you use the a tag, but why a and not l for link? Well, here they use the a for "anchor". Here is the simplest way to add a url to your page:

<a href="https://www.facebook.com/HildweigDev/">More here</a>

You have your a starting tag, then a key value pair thingie, this is what we call an attribute; attributes provide additional information to your element and come as key value pairs, the href here means hyperlink , and its value is your url, what will be shown in your page is text in between, and clicking on it will send you to the page!

Lastly, you want to have some beautiful images otherwise it's boring... For that you can use the img empty element. Okay finaly an empty element ^^'. So as I said before, empty elements have only one tag and the content is actually a value of an attribute. Check the html here: The src stands for "source", so there you'll add the link or path to your image. The alt attribute is optional, however I strongly think that you should add it. In case there is an issue and the image doesn't show up, the alt value (the text) will be displayed instead of the image. In addition, the alt provides a better context to search engine crawlers, helping them to index an image properly. I don't want to you to be lazy, so make sure to include it okay?

Thank you

If you read this post to the end, I want you to pat yourself on the back and be proud of your discipline. Becoming a web developer requires patience, discipline and curiosity. Big goals are achieved with small daily achievements. If you liked it please like and share your thoughts with me so that I can provide better educative content.

Forem: Hildweig 🐬

Simple guide for HTML forms

Introduction

General idea about forms

1. The form container

2. The form elements

2.1 The input element

Input to enter a username:

Input to enter an email

Input for your passwords

Input for numbers fields

Input for dates

Input for files!

Input for searching

Input for choosing colors

Checkboxes

Radio buttons

Other input types

Submitting your form

2.2 The button element

2.3 Textarea element

2.4 Menu options

Wrap up

Thank you

All you need to know about HTML tables

Why Tables?

Create your first table

Add a little touch to your table

1. Captions

2. Cells? Fuuuusion!

3.Create groups for columns

Some advices

1- Do not use HTML tables for layouts

2- Can you have nested tables?

Conclusion

HTML tags for SEO success

Introducing HTML tags for SEO

Header tags

1. Title tag

2. Meta description tag

3. Open graph tags

4. Twitter cards

5. Robot tags

6. Canonical tags for prioritization

7. Responsive website

Body Tags

1. Header tags for the win!

2. Alt attribute on images

3. Good usage of links

Conclusion

HTML Basics: Start from zero!

Introduction

Why learn HTML?

Basic structure of HTML

Some HTML elements

Types of HTML elements

The big containers

The header

nav

section

article

aside

footer

Headings, paragraphs, lists, links, and images

Thank you