Click to get information about our services.
HTML başlık etiketleri, bir web sayfasının içeriği hakkında bilgi verir ve arama motorlarına içeriğin neyle ilgili olduğunu açıklar. Bu nedenle, başlık etiketlerinin doğru şekilde kullanımı, web sitesinin SEO'sunu artırmaya yardımcı olabilir.
Welcome to the 3rd part of HTML Lessons, HTML (Hyper Text Markup Language) is the basic programming language used to create the structure and content of web pages. We look at the qualities of this language and examine it with code examples.
HTML is the basic building block on which web pages are designed. HTML is the coding language in which visual and functional features are defined. Everything seen on a website is created by HTML codes. When coding HTML, it is also very important that the page complies with SEO (Search Engine Optimization) standards. This article will provide information on HTML attributes and provide an SEO-optimized HTML code example.
The most commonly used attributes in HTML are:
id Attribute
Theid attribute is a coding system that gives a unique ID to a specific part of the page. The id attribute allows customization of a single part within the page. For example, you can create an id attribute for a title tag on a page and customize the properties under that attribute only for that title tag.
Example:
<h1 id="title-tag">Title of this page</h1>
class Attribute
The class attribute allows HTML codes to be divided into specific groups. The class attribute is used when it is necessary to define a group for specific style properties or functions. The class attribute is ideal for applying the same properties to multiple elements.
Example:
<p class="blue-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
sub Attribute
The alt attribute is often used for image tags. This attribute shows alternative text when the image does not load or loads incorrectly. Since Google bots cannot read images, it helps bots create information about the image thanks to the alt attribute.
Example:
<img src="image.jpg" alt="Landscape image">
It is also very important that the HTML codes that specify these features are optimized for SEO. For example, the page title (h1 tag) should directly relate to the topic of the page and integrate with the content. Again, it's important to make multiple headlines for voice readers or bots. Our code example could be as follows:
<!DOCTYPE html>
<html>
<head>
<title> Sample Page Title </title>
</head>
<body>
<header>
<h1> Sample Page Title </h1>
<nav>
<ul>
<li><a href="#"> Home Page </a></li>
<li><a href="#"> About Us </a></li>
<li><a href="#"> Contact </a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2> Part 1 </h2>
<p> Content in this section. </p>
</section>
<section>
<h2> Chapter 2 </h2>
<p> Content in this section. </p>
</section>
<section>
<h2> Chapter 3 </h2>
<p> Content in this section. </p>
</section>
</main>
In this code example, the h1 tag is used to indicate the page title, and the h2 tags are used to indicate sections. In addition to tags, class and id attributes are also used in some places. In this way, it is ensured that the page complies with SEO standards and can be better indexed by search engines.
a href Attribute:
This attribute allows you to create a link to a page or file. Sample code used for the href attribute:
Example:
<a href="www.google.com">Go to Google</a>
lang Attribute
This attribute allows you to define what language the element is in. Sample code used for the lang attribute:
Example:
<div lang="tr">Türkçe içerik burada</div>
style Attribute
This attribute allows you to edit the appearance of a particular element. Sample code used for the style attribute:
Example:
<p style="color:red; font-size:20px;">This paragraph is an example.</p>
src Attribute
This attribute allows you to specify the source address for a multimedia file, such as an image or video. Sample code used for the src attribute:
Example:
<img src="image.jpg" alt="Sample Image">
width and height Attributes:
These attributes allow you to specify the size of multimedia files such as images or videos. Sample code used for width and height attributes:
Example:
<img src="image.jpg" alt="Sample Image" width="500px" height="300px">
When used correctly and properly in your HTML codes, these attributes can help search engines better understand and rank your pages.
title Attribute
The title attribute defines some extra information about an element.
The value of the title attribute will be displayed as a tooltip when you hover the mouse over the element:
Example:
<p title="I am Enes Alp">This is a paragraph.</p>
What did we learn in this lesson?
The href attribute of the <a> element specifies the URL of the page the link will go to.
The src property of the <img> element specifies the path to the image to display.
The width and height attributes of the <img> element provide size information for images
The alt attribute of the <img> element provides alternative text for an image
The style attribute is used to add styles to an element, such as color, font, size, and more.
The lang attribute of the <html> tag declares the language of the web page.
The title attribute defines some extra information about an element.
The class attribute allows HTML codes to be divided into sections.
The id attribute provides a unique ID for a particular section.
Hope to See You in Episode 4!
