Введение в раздел "Заголовок" в HTML

Говорят, что лучшее о человеке можно увидеть только изнутри, и это относится и к веб-страницам HTML! Причина, по которой некоторые веб-страницы не видны в поисковых системах, заключается в том, что им не хватает функций, обеспечивающих их видимость.

Человеческие души нельзя увидеть на нашем плане существования, но это не означает, что они не имеют значения. Именно поэтому сегодня я помогу вам улучшить понимание души веб-страниц HTML - раздела head.

В своей предыдущей статье "Введение в HTML" я использовал раздел head в своей простой веб-странице и кратко рассказал о нем.

В разделе head содержится много данных о данных, отображаемых на веб-страницах. Мы называем эти данные метаданными.

Раздел head в веб-страницах HTML может выступать в качестве ворот между веб-страницей, поисковой системой и пользователем. Эти метаданные очень важны для повышения рейтинга вашей веб-страницы в поиске.

Метаданные могут быть использованы для описания заголовка веб-страницы, стилей, скриптов, ссылок, набора символов и других видов метаинформации.

Заголовок

Используется для определения заголовка веб-страницы HTML, он помещается в тег title '<title></title>', и на одной странице может существовать только один заголовок.

Заголовок имеет множество применений. Он будет отображаться в результатах поиска, когда поисковая система выведет на экран веб-страницу.

Его можно увидеть на вкладке браузера для более легкой идентификации веб-страницы.

Он также будет использоваться для идентификации вашей страницы, когда пользователь добавляет ее в избранное.

<html>  
 <head>  
   <title>My title</title>  
 </head>    
</html>

Стили.

CSS (каскадные таблицы стилей) используются для управления характеристиками/внешним видом элементов в теге body. Тег style используется для содержания инструкций CSS для веб-страницы.

<!DOCTYPE html>  
 <html>  
 <head>  
   <title>My title</title>  
     <style>  
       h1 {color: red;}      
      </style>  
       </head>    
        <body>  
         <h1>Hello World</h1>  
       </body>  
    </html>

Ссылки

Бывают случаи, когда тег style заполняется большим количеством кода CSS. Это может привести к тому, что страница будет выглядеть громоздкой, что снизит ее читабельность. Ссылки - это теги, которые связывают внешние таблицы стилей с нашими веб-страницами. Таким образом, вы можете создать внешнюю таблицу стилей "style.css" и связать ее с вашей веб-страницей.

<!DOCTYPE html>  
 <html>  
    <head>
       <link rel="stylesheet" href="style.css">  
    </head>  
 </html>

Скрипт

Сценарии используются для вставки кода JavaScript в веб-страницы. JavaScript - это тип языка программирования, который может сделать веб-страницы динамичными и интерактивными. Тег 'script' используется для добавления JavaScript на стороне клиента или внешнего файла JavaScript.

JavaScript на стороне клиента

<!DOCTYPE html>  
<html>  
<head>  
    <script>  
       function display() {  
              alert('Hello World');     
        }  
    </script>  
</head>  
     <body>
          <button type="button"        
            onclick="display()">Click me
         </button>  
     </body>  
 </html>

Внешний файл JavaScript

<!DOCTYPE html>  
<html>  
   <head>  
      <script src="index.js">      
   </head>  
</html>

База

Базовые теги используются для указания базовых адресов веб-страниц. Каждая страница имеет доменное имя, прикрепленное к ней для доступности. Вставлять 'https://mywebsite.com' в каждую относительную ссылку будет ужасно. Поэтому базовые урлы упрощают задачу, обрабатывая урл и автоматически прикрепляя его к каждой относительной ссылке.

<!DOCTYPE html>  
<html>  
  <head>  
    <title>Page Title</title>  
    <base href="https://mywebsite/images/" target="_blank">  
  </head>  
<body>  
   <img src="image.png">  
</body>  
</html>

Заключение

Мы рассмотрели пять тегов в разделе head, а именно: title, styles, script, link и base.

В следующей статье я расскажу о мета-тегах и их разновидностях. Спасибо, что дочитали до этого уровня, пожалуйста, поддержите мою работу 👏.

Введение в раздел "Заголовок" в HTML

Стоит ли изучать PHP в 2023-2024 годах?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

Приемы CSS-макетирования - floats и Flexbox

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

Концепция локализации и ее применение в приложениях React ⚡️

Пользовательский скаляр GraphQL