1st August 2021

Basic Tags and Meanings in Html

Basic Html tags are indispensable (Html, head, title and body) tags that make up the skeleton.

If we divide our site into parts; We can say head, body, footer.

<html> </html>

The Html tag is the tag that covers all the codes of our website. In other words, it tells browsers “I was written in Html” and “my extension is .html”. Usually, the homepage files of all websites are saved as index.html.

<head> </head>

The head tag is the head tag of our website. This part includes the codings that indicate the features of our website, its content, the author of the website, and which subject the website is related to.

head tag
head tag

 

<title> </title>

It is mandatory to write the title tag inside the head tag. The title will be the title of our site as well as the title of our Html file. It will be better for us to define our website if the title we will write between the title tags is related to the content of our site.

title tag
title tag

 

<meta> </meta>

Meta tags allow us to define the Html page we have created and define our page with keywords. We will now tell you about a few important meta tags.

meta – keywords

It helps us to show keywords related to our site. For example; If we are building a site that provides information about the construction of a website, our keywords should consist of keywords such as Html, CSS, javascript, Php, asp.

meta-description

It is a tag that gives information about the content of your site. Google, Yahoo, Bing Yandex bots visit your site, collect information about your content and keep this information in their own records. They determine which searches your site will be included by looking at these tags. For example, in the example above, keywords related to the website are specified, and when these words are searched on search engines, your site will be included in this search. How many pages will you exit? it depends on how many daily or monthly visitors your site gets or how authentic and up-to-date the information on your site is.

meta – author

It is the tag containing who made the website and the contact information of the producer.

meta tag

We can define the character of our website with the meta tag.

Note: meta tags must be written between head tags.

<body> </body>

The body tag is the tag that will cover all the rest of the content of our website. It is the part we call the body. All content of our site is written between body tags.

LEARN MORE  What are Java AWT, Swing and JavaFX?

Other tags we will use within the body tag.

body tag
body tag

 

<h?> </ h?>

The h tag is a tag that sizes articles on our website and is often used for headings.
It is from h1 to h6. h1 is the largest dimension and h6 determines the smallest dimension. h? The tag should be closed with the same number. For example; A tag opened with h1 cannot be closed as h2.

<h?> </ h?>
h? tag

 

<p> </p>

The p tag is used to describe paragraphs. When you write a text, it should be written between this tag.

<ul> </ul>, <ol> </ol> and <li> </li>

These tags are list tags. Among these tags, we specify the items we want to list on your website.

ol tag

The ol tag is a numbered list tag.

ul tag

The ul tag is an unnumbered list tag.

li tag

The li tag is the tag that specifies the items of the lists. Even if the li tag is not closed, it will not be a problem. You can turn it off if you want.

LEARN MORE  What is Sigma? Threat Hunting in SIEM Products with Sigma Rules - Example Sigma Rules
ol, li and ul tag
ol, li and ul tag

 

<p> </p>

None of the editors we use take into account the extra space between our code, the usage of tabs. For example,

<p> </p> tag
p tag

 

When we write, our output will be “Today is Saturday”. In other words, our editor will write normally, ignoring the extra spaces we have left. This is where our pre label comes in. If we want to adjust the spaces in our articles by ourselves and write a list or other text in this way, our editor will consider all the spaces and tab usage when we write these articles between our pre tags. We can see our codes and their output as follows.

<pre> </pre>
pre tag

 

<strong> </strong> | <b> </b>

strong and b tags are tags that make the characters they contain appear bold. Both serve the same task.

<strike>

The strike tag is a tag that makes the characters it covers appear strikethrough.

<em> <i>

The em and i tags are tags that make the characters they contain appear italic (italic).

<u> tag

u tag is the tag that makes the characters it covers appear underlined.

Let’s see the above spelling tags in a single example.

Our madness will be as follows.

LEARN MORE  How to Web Application Security Pentest?
<u> tag
u tag

<br> Tag

In the example I gave in the post formatting tags, you may have noticed that I typed the codes twice. In this example, the task of the br tag you encounter for the first time is to move to a lower line as you understand. The first spelling form does not have a br tag and the sentences are side by side. If you want to leave a line or more of space between two texts, you can put a tag in a row. The br tag is not closed.

<hr> tag

The hr tag is used to draw a line between two paragraphs, as seen in the example above.

<img> </img>

The img tag is the tag you will use to add an image to your website. It is written between img codes. It also has some features (such as size, frame, right and left justification, link, title, etc.) but I have covered them more extensively in my article Adding and Editing Html Images.

When adding an image to your website, you determine where to choose it from, with the “src” feature in coding. The “src” feature shows scanners the address of the image. If we want to take a picture from our site files, we need to specify the folder containing the picture we want to take, if you want to take the picture by giving a link, we must specify the link of the picture in the “src =” section with quotes “”. As seen in the example, it can be closed in two different ways. Now let’s print these codes.

img tag
img tag

 

Note: Our advice to you is always to specify the file address, not the official link you want to view. Because when you link, the link you provided may be deleted or the site owner may have removed that image, and this will cause that image to not appear on your site. Follow a healthier way by filing. For example, collect your site files in a folder named “Web Site” and have “index.html” and “Pictures” folders in this folder. Call the picture you want to take as src = “Pictures / picture_name.jpg“.

<a> </a>

The a tag is the tag that allows us to create links. The a tag is used to switch between the pages of our website or other pages. This tag has some properties such as the “img” tag. I will talk about them in another article, but I will explain the most important feature of href = ”” and target = ”” in this article. Links appear as standard in blue underlined in browsers. A link that we have visited before appears in purple. When we move the mouse over the link, we see that the color of the link is red and underlined. This coloring is standard on all browsers. Of course, our friends who make a website today can color these links in accordance with the theme and colors of the site.

href = “”

The href = ”” feature is the feature that includes where we will be directed when this feature is clicked. So it determines the URL we will go to. target = ”” property determines where the page we will go to opens. We use this feature to specify whether the link will be opened on the page we clicked on or in a new tab, ie a new page. These are _blank, _parent, _self, _top but we are only going to use the _blank and _self attributes. The _blank feature opens the clicked link in a new tab or a new window. _self opens the clicked link on the same page.

It is useful to mention that, do not forget to write something between the a codes. If you do not give a name to the link you have created, you will not be able to click on the link as it will not be displayed. If you want, let’s take a look at the output of these codes.

href = ""
href = “”

 

As you can see, we encoded two links in our codes, but only one link appeared in our output. The reason for this is that we did not write anything between the a tags on our 2nd link.

Leave a Reply

Your email address will not be published. Required fields are marked *