10 простых, но важных фактов о HTML, которые вы должны знать

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

Один из выводов, которые я усвоил после более десяти лет использования HTML, заключается в том, что многие факты, связанные с ним, очень недооценены. Как разработчик, мы обычно не обращаем на них особого внимания или строим туманную перспективу. В этой статье мы узнаем о 10 таких очень тривиальных фактах, но мощных, когда мы знаем их применение. Надеюсь, вам понравится это читать.

Предупреждение о хвастовстве - 100-я статья

Я не мог удержаться от хвастовства тем, что достиг подвига, написав 100 статей с помощью этого поста. Я очень горжусь тем, что продолжаю вести блог, и рад получать отличные отзывы (чаще всего) от сообщества. Большое спасибо за вашу постоянную поддержку 🙏!

Ладно, давайте теперь к делу.

1. altАтрибут тега img обязателен

Вы, должно быть, заметили altатрибут на imgтеге.

<img src="user.png" alt="User Profile Image" />

Атрибут altпомогает нам указать альтернативный текст для изображения. Этот альтернативный текст полезен в нескольких ситуациях, когда браузер не может отобразить изображение.

• Путь к изображению нарушен, и его невозможно отобразить.
• Браузер не может отобразить изображение из-за медленной сети.
• Пользователи с нарушениями зрения используют программу чтения с экрана, которая считывает текст, указанный в altтеге.

Согласно спецификации HTML5, altявляется обязательным атрибутом imgтега. Однако вы можете назначить ему пустую строку, если изображение предназначено только для украшения.

<img src="user.png" alt="" />

Ниже приведен пример альтернативного текста, отображаемого, когда изображение не отображается.

Не запутайтесь с altатрибутом и функциональностью всплывающей подсказки изображения. Атрибут alt не отображает всплывающую подсказку для изображения. Пожалуйста, используйте titleатрибут, чтобы получить всплывающую подсказку к изображению. С другой стороны, altпредоставляет невидимое описание изображения, чтобы помочь с доступностью.

2. Использование мертвой ссылки

Элемент anchor( <a>) создает ссылку на содержимое вне или внутри веб-страницы. Атрибут hrefэлемента привязки принимает URL-адрес назначения для ссылки на внешний контент.

<a href="https://google.com"> Go to Google </a>

Точно так же мы можем указать идентификатор раздела с помощью #символа, чтобы перейти к разделу страницы.

<a href="#bio"> Bio </a>
.....
.....
.....

<div id="bio">
 .....
</div>

Иногда вы можете захотеть предоставить пользовательское поведение для тега привязки, где он делает больше, чем ссылка на страницу или раздел. Настраиваемое поведение может быть чем угодно, например вызовами сервера, отображением-скрытием раздела и т. д. Мы используем JavaScript для обеспечения этого пользовательского поведения. В этих случаях мы должны объявить ссылку как dead link, указав значение #атрибута href.

<a href="#"> Dead Link </a>

Пользовательское поведение обычно задается с помощью прослушивателей событий.

<a href="#" onclick="xhrCall()"> Fetch Data </a>

3. Связь между <label>for и <input>id

Тег <label>определяет метку для нескольких элементов ввода, таких как текст, электронная почта, число, дата и т. д. Вы также можете использовать его с элементами textarea, select, counter и progress. Когда вы определяете метку, обязательно задайте значение для forатрибута.

Мы можем связать метку с другим элементом, сопоставив значение forатрибута со idзначением элемента. См. это в примере ниже,

<label for="advanced">Advanced</label>
<input type="radio" name="difficulty" id="advanced" value="advanced">

Здесь forзначение атрибута и значение идентификатора радиовхода совпадают. Важно следовать этой ассоциации, потому что,

• Это помогает в достижении лучшей доступности. Средства чтения с экрана будут считывать метку, когда пользователь фокусируется на связанных элементах.

Это помогает в выборе элемента, увеличивая область попадания. Когда метка связана с элементом, таким как флажок или переключатель, вы можете переключать/выбирать элемент, щелкая связанную метку.

4. Значение по умолчанию a CheckboxиRadio

Давайте определим несколько радиокнопок, принадлежащих группе радиокнопок,

<label for="male">
  <input id="male" value="M" type="radio" name="gender">Male
</label>
<label for="female">
  <input id="female" value="F" type="radio" name="gender">Female
</label>
<label for="na">
  <input id="na" value="O" type="radio" name="gender">NA
</label>

Здесь у нас есть три переключателя (мужской, женский и NA), которые принадлежат genderгруппе. Мы сгруппировали их, указав одинаковое значение nameатрибута. valueТакже обратите внимание, что для каждой радиокнопки есть атрибут. Когда форма отправляется, включая эти переключатели, данные отправляются на сервер из valueатрибута.

Если вы опустите valueатрибут, значением по умолчанию будет on. Значение по умолчанию бесполезно. Следовательно, важно правильно установить атрибут value, чтобы определить правильный выбранный параметр. То же самое относится и к флажкам.

5. Установите флажок/радио по умолчанию.

Вы можете установить флажок или переключатель, выбранный по умолчанию. Вам нужно добавить свойство checkedвнутри inputтега.

В приведенном ниже коде мы выбрали параметры JavaScript и Python по умолчанию,

<form action="/action.do">
  <input type="checkbox" id="js" name="js" value="JavaScript" checked>
  <label for="js"> JavaScript </label><br>
  <input type="checkbox" id="php" name="php" value="Php">
  <label for="php"> Php </label><br>
  <input type="checkbox" id="python" name="python" value="Python" checked>
  <label for="python"> Python </label><br><br>
  <input type="submit" value="Submit">
</form>

Он производит,

6. Могу ли я создать стиль placeholder?

Мы можем установить текст-заполнитель с placeholderатрибутом,

<input type="text" placeholder="Tell us your name" />

Он производит,

Но можем ли мы применить стиль к тексту-заполнителю? Да мы можем. Мы можем изменить внешний вид текста-заполнителя с ::placeholderпомощью селектора CSS.

::placeholder {
  color: #210065;
  opacity: 0.7;
  font-family: verdana;
  font-size: 16px;
  font-style: italic;
}

Это изменит стиль текста заполнителя, как,

Вы можете использовать этот codepen, чтобы поиграть с ним,

 

7. Блочный или встроенный элемент

У каждого элемента HTML есть displayсвойство, и его значение по умолчанию равно blockили inline. Важно знать, является ли элемент HTML блочным или встроенным элементом, так как это может сильно повлиять на окончательный результат дизайна.

В таблице ниже блочный элемент сравнивается со встроенным элементом.

Пример некоторых элементов блочного уровня:

<article>, <canvas>, <div>, <fieldset>, <figure>, <footer>, <form>, <h1>-<h6>, <p>, <table>, <ul>, <video>, многие другие.

Пример встроенных элементов:

<a>, <b>, <br>, <button>, <i>, <img>, <input>, <select>, <span>, <textarea>, многие другие.

8. Автофокус

Атрибут autofocusпомогает автоматически сфокусироваться на элементе ввода при загрузке страницы.

<form action="/action.do">
  <label for="uname">Username:</label>
  <input type="text" id="uname" name="uname" autofocus><br><br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br><br>
  <input type="submit">
</form>

В приведенном выше примере текстовое поле «Имя пользователя» автоматически получает фокус при загрузке страницы.

9. Автозаполнение

Подобно автофокусу, autocompleteэто еще один атрибут, который пригодится в полях ввода элемента формы. Атрибут автозаполнения предоставляет автоматические предложения по заполнению значений полей формы.

<input type="email" id="email" name="email" autocomplete="on">

Чтобы autocompleteработать следующие четыре условия, чтобы удовлетворить,

• Атрибут автозаполнения работает с элементами <input>, <textarea>и .<select>
• Элемент должен иметь указанное имя и/или идентификатор.
• Элемент должен быть заключен внутри formэлемента.
• Прилагаемая форма должна иметь кнопку отправки.

Подробнее о значениях атрибутов автозаполнения и административных уровнях читайте здесь .

10. Это iframeне всегда плохо

Честно говоря, это отдельная тема для статьи. Но, позвольте мне попытаться дать обзор здесь. iframe (встроенный фрейм) — один из самых спорных, злоупотребляемых и старейших HTML-тегов. Он используется для встраивания другого документа HTML в текущий HTML. Вы можете встроить видео с YouTube, любую стороннюю рекламу, платежные шлюзы, по сути, саму полноценную веб-страницу.

Вот пример встраивания моего сайта в формат 500x500 iframe.

<iframe src="https://www.tapasadhikary.com/" height="500px" width="500px"></iframe>

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

Каковы основные проблемы с iframe и как мы можем их использовать, избегая их?

Безопасность: поскольку мы встраиваем сторонний сайт и контент с помощью iframe, у нас практически нет контроля над этим. Это повышает риск безопасности, поскольку в наше приложение может попасть вредоносное содержимое, нежелательные всплывающие окна и т. д. iframeИмеет два специальных атрибута sandboxи allow, которые помогают защитить некоторые из этих проблем безопасности .

С помощью sandboxатрибута мы можем указать, какие привилегии мы хотим предоставить iframe, что разрешить и что нет. Ниже приведен пример кода, в котором iframe может только отправить форму и открыть всплывающее диалоговое окно.

<iframe sandbox="allow-forms allow-popups" src="https://www.tapasadhikary.com/"></iframe>

Точно так же с allowатрибутом (пока работает в Chrome) мы можем указать функции (аккумулятор, камера, автовоспроизведение и т. д.) для доступа и выполнения с помощью iframe.

Скорость: это iframeможет замедлить работу вашего приложения. Это связано с тем, что потребление памяти увеличивается с использованием каждого iframe. Вы можете избежать шлака, лениво загружая свои фреймы. Для этого добавьте атрибут loading=" lazyв тег iframe. Он будет загружать iframe только тогда, когда это необходимо.

<iframe src="https://tapasadhikary.com/" loading="lazy"></iframe>

• SEO: поисковая система считает, что контент из iframe принадлежит другому веб-сайту. Хотя iframe не оказывает сильного негативного влияния на SEO, он также не оказывает положительного влияния. Лучше избегать использования iframe на главной странице веб-сайта/приложения. Прочтите эту статью , чтобы узнать больше об iframe и SEO.

Важно знать атрибуты iframe и возможности их использования на практике. У вас может быть больше шансов использовать iframe, чем полностью запретить его.

Ссылка: https://blog.greenroots.info/10-тривиальный-но-мощный-html-факты-вы-должны-знать

#html

What is GEEK

Buddha Community

10 простых, но важных фактов о HTML, которые вы должны знать

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

Один из выводов, которые я усвоил после более десяти лет использования HTML, заключается в том, что многие факты, связанные с ним, очень недооценены. Как разработчик, мы обычно не обращаем на них особого внимания или строим туманную перспективу. В этой статье мы узнаем о 10 таких очень тривиальных фактах, но мощных, когда мы знаем их применение. Надеюсь, вам понравится это читать.

Предупреждение о хвастовстве - 100-я статья

Я не мог удержаться от хвастовства тем, что достиг подвига, написав 100 статей с помощью этого поста. Я очень горжусь тем, что продолжаю вести блог, и рад получать отличные отзывы (чаще всего) от сообщества. Большое спасибо за вашу постоянную поддержку 🙏!

Ладно, давайте теперь к делу.

1. altАтрибут тега img обязателен

Вы, должно быть, заметили altатрибут на imgтеге.

<img src="user.png" alt="User Profile Image" />

Атрибут altпомогает нам указать альтернативный текст для изображения. Этот альтернативный текст полезен в нескольких ситуациях, когда браузер не может отобразить изображение.

• Путь к изображению нарушен, и его невозможно отобразить.
• Браузер не может отобразить изображение из-за медленной сети.
• Пользователи с нарушениями зрения используют программу чтения с экрана, которая считывает текст, указанный в altтеге.

Согласно спецификации HTML5, altявляется обязательным атрибутом imgтега. Однако вы можете назначить ему пустую строку, если изображение предназначено только для украшения.

<img src="user.png" alt="" />

Ниже приведен пример альтернативного текста, отображаемого, когда изображение не отображается.

Не запутайтесь с altатрибутом и функциональностью всплывающей подсказки изображения. Атрибут alt не отображает всплывающую подсказку для изображения. Пожалуйста, используйте titleатрибут, чтобы получить всплывающую подсказку к изображению. С другой стороны, altпредоставляет невидимое описание изображения, чтобы помочь с доступностью.

2. Использование мертвой ссылки

Элемент anchor( <a>) создает ссылку на содержимое вне или внутри веб-страницы. Атрибут hrefэлемента привязки принимает URL-адрес назначения для ссылки на внешний контент.

<a href="https://google.com"> Go to Google </a>

Точно так же мы можем указать идентификатор раздела с помощью #символа, чтобы перейти к разделу страницы.

<a href="#bio"> Bio </a>
.....
.....
.....

<div id="bio">
 .....
</div>

Иногда вы можете захотеть предоставить пользовательское поведение для тега привязки, где он делает больше, чем ссылка на страницу или раздел. Настраиваемое поведение может быть чем угодно, например вызовами сервера, отображением-скрытием раздела и т. д. Мы используем JavaScript для обеспечения этого пользовательского поведения. В этих случаях мы должны объявить ссылку как dead link, указав значение #атрибута href.

<a href="#"> Dead Link </a>

Пользовательское поведение обычно задается с помощью прослушивателей событий.

<a href="#" onclick="xhrCall()"> Fetch Data </a>

3. Связь между <label>for и <input>id

Тег <label>определяет метку для нескольких элементов ввода, таких как текст, электронная почта, число, дата и т. д. Вы также можете использовать его с элементами textarea, select, counter и progress. Когда вы определяете метку, обязательно задайте значение для forатрибута.

Мы можем связать метку с другим элементом, сопоставив значение forатрибута со idзначением элемента. См. это в примере ниже,

<label for="advanced">Advanced</label>
<input type="radio" name="difficulty" id="advanced" value="advanced">

Здесь forзначение атрибута и значение идентификатора радиовхода совпадают. Важно следовать этой ассоциации, потому что,

• Это помогает в достижении лучшей доступности. Средства чтения с экрана будут считывать метку, когда пользователь фокусируется на связанных элементах.

Это помогает в выборе элемента, увеличивая область попадания. Когда метка связана с элементом, таким как флажок или переключатель, вы можете переключать/выбирать элемент, щелкая связанную метку.

4. Значение по умолчанию a CheckboxиRadio

Давайте определим несколько радиокнопок, принадлежащих группе радиокнопок,

<label for="male">
  <input id="male" value="M" type="radio" name="gender">Male
</label>
<label for="female">
  <input id="female" value="F" type="radio" name="gender">Female
</label>
<label for="na">
  <input id="na" value="O" type="radio" name="gender">NA
</label>

Здесь у нас есть три переключателя (мужской, женский и NA), которые принадлежат genderгруппе. Мы сгруппировали их, указав одинаковое значение nameатрибута. valueТакже обратите внимание, что для каждой радиокнопки есть атрибут. Когда форма отправляется, включая эти переключатели, данные отправляются на сервер из valueатрибута.

Если вы опустите valueатрибут, значением по умолчанию будет on. Значение по умолчанию бесполезно. Следовательно, важно правильно установить атрибут value, чтобы определить правильный выбранный параметр. То же самое относится и к флажкам.

5. Установите флажок/радио по умолчанию.

Вы можете установить флажок или переключатель, выбранный по умолчанию. Вам нужно добавить свойство checkedвнутри inputтега.

В приведенном ниже коде мы выбрали параметры JavaScript и Python по умолчанию,

<form action="/action.do">
  <input type="checkbox" id="js" name="js" value="JavaScript" checked>
  <label for="js"> JavaScript </label><br>
  <input type="checkbox" id="php" name="php" value="Php">
  <label for="php"> Php </label><br>
  <input type="checkbox" id="python" name="python" value="Python" checked>
  <label for="python"> Python </label><br><br>
  <input type="submit" value="Submit">
</form>

Он производит,

6. Могу ли я создать стиль placeholder?

Мы можем установить текст-заполнитель с placeholderатрибутом,

<input type="text" placeholder="Tell us your name" />

Он производит,

Но можем ли мы применить стиль к тексту-заполнителю? Да мы можем. Мы можем изменить внешний вид текста-заполнителя с ::placeholderпомощью селектора CSS.

::placeholder {
  color: #210065;
  opacity: 0.7;
  font-family: verdana;
  font-size: 16px;
  font-style: italic;
}

Это изменит стиль текста заполнителя, как,

Вы можете использовать этот codepen, чтобы поиграть с ним,

 

7. Блочный или встроенный элемент

У каждого элемента HTML есть displayсвойство, и его значение по умолчанию равно blockили inline. Важно знать, является ли элемент HTML блочным или встроенным элементом, так как это может сильно повлиять на окончательный результат дизайна.

В таблице ниже блочный элемент сравнивается со встроенным элементом.

Пример некоторых элементов блочного уровня:

<article>, <canvas>, <div>, <fieldset>, <figure>, <footer>, <form>, <h1>-<h6>, <p>, <table>, <ul>, <video>, многие другие.

Пример встроенных элементов:

<a>, <b>, <br>, <button>, <i>, <img>, <input>, <select>, <span>, <textarea>, многие другие.

8. Автофокус

Атрибут autofocusпомогает автоматически сфокусироваться на элементе ввода при загрузке страницы.

<form action="/action.do">
  <label for="uname">Username:</label>
  <input type="text" id="uname" name="uname" autofocus><br><br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br><br>
  <input type="submit">
</form>

В приведенном выше примере текстовое поле «Имя пользователя» автоматически получает фокус при загрузке страницы.

9. Автозаполнение

Подобно автофокусу, autocompleteэто еще один атрибут, который пригодится в полях ввода элемента формы. Атрибут автозаполнения предоставляет автоматические предложения по заполнению значений полей формы.

<input type="email" id="email" name="email" autocomplete="on">

Чтобы autocompleteработать следующие четыре условия, чтобы удовлетворить,

• Атрибут автозаполнения работает с элементами <input>, <textarea>и .<select>
• Элемент должен иметь указанное имя и/или идентификатор.
• Элемент должен быть заключен внутри formэлемента.
• Прилагаемая форма должна иметь кнопку отправки.

Подробнее о значениях атрибутов автозаполнения и административных уровнях читайте здесь .

10. Это iframeне всегда плохо

Честно говоря, это отдельная тема для статьи. Но, позвольте мне попытаться дать обзор здесь. iframe (встроенный фрейм) — один из самых спорных, злоупотребляемых и старейших HTML-тегов. Он используется для встраивания другого документа HTML в текущий HTML. Вы можете встроить видео с YouTube, любую стороннюю рекламу, платежные шлюзы, по сути, саму полноценную веб-страницу.

Вот пример встраивания моего сайта в формат 500x500 iframe.

<iframe src="https://www.tapasadhikary.com/" height="500px" width="500px"></iframe>

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

Каковы основные проблемы с iframe и как мы можем их использовать, избегая их?

Безопасность: поскольку мы встраиваем сторонний сайт и контент с помощью iframe, у нас практически нет контроля над этим. Это повышает риск безопасности, поскольку в наше приложение может попасть вредоносное содержимое, нежелательные всплывающие окна и т. д. iframeИмеет два специальных атрибута sandboxи allow, которые помогают защитить некоторые из этих проблем безопасности .

С помощью sandboxатрибута мы можем указать, какие привилегии мы хотим предоставить iframe, что разрешить и что нет. Ниже приведен пример кода, в котором iframe может только отправить форму и открыть всплывающее диалоговое окно.

<iframe sandbox="allow-forms allow-popups" src="https://www.tapasadhikary.com/"></iframe>

Точно так же с allowатрибутом (пока работает в Chrome) мы можем указать функции (аккумулятор, камера, автовоспроизведение и т. д.) для доступа и выполнения с помощью iframe.

Скорость: это iframeможет замедлить работу вашего приложения. Это связано с тем, что потребление памяти увеличивается с использованием каждого iframe. Вы можете избежать шлака, лениво загружая свои фреймы. Для этого добавьте атрибут loading=" lazyв тег iframe. Он будет загружать iframe только тогда, когда это необходимо.

<iframe src="https://tapasadhikary.com/" loading="lazy"></iframe>

• SEO: поисковая система считает, что контент из iframe принадлежит другому веб-сайту. Хотя iframe не оказывает сильного негативного влияния на SEO, он также не оказывает положительного влияния. Лучше избегать использования iframe на главной странице веб-сайта/приложения. Прочтите эту статью , чтобы узнать больше об iframe и SEO.

Важно знать атрибуты iframe и возможности их использования на практике. У вас может быть больше шансов использовать iframe, чем полностью запретить его.

Ссылка: https://blog.greenroots.info/10-тривиальный-но-мощный-html-факты-вы-должны-знать

#html

Know Everything About HTML With HTML Experts

HTML stands for a hypertext markup language. For the designs to be displayed in web browser HTML is the markup language. Technologies like Cascading style sheets (CSS) and scripting languages such as JavaScript assist HTML. With the help of HTML websites and the web, designs are created. Html has a wide range of academic applications. HTML has a series of elements. HTML helps to display web content. Its elements tell the web how to display the contents.

The document component of HTML is known as an HTML element. HTML element helps in displaying the web pages. An HTML document is a mixture of text nodes and HTML elements.

Basics of HTML are-

The simple fundamental components oh HTML is

1. Head- the setup information for the program and web pages is carried in the head
2. Body- the actual substance that is to be shown on the web page is carried in the body
3. HTML- information starts and ends with and labels.
4. Comments- come up in between

Html versions timeline

1. HTML was created in 1990. Html is a program that is updated regularly. the timeline for the HTML versions is
2. HTML 2- November, 1995
3. HTML 3- January, 1997
4. HTML 4- December, 1997; April, 1998; December, 1999; May, 2000
5. HTML 5- October, 2014; November, 2016; December, 2017

HTML draft version timelines are

1. October 1991
2. June 1992
3. November 1992
4. June 1993
5. November 1993
6. November 1994
7. April 1995
8. January 2008
9. HTML 5-
   2011, last call
   2012 candidate recommendation
   2014 proposed recommendation and recommendation

HTML helps in creating web pages. In web pages, there are texts, pictures, colouring schemes, tables, and a variety of other things. HTML allows all these on a web page.
There are a lot of attributes in HTML. It may get difficult to memorize these attributes. HTML is a tricky concept. Sometimes it gets difficult to find a single mistake that doesn’t let the web page function properly.

Many minor things are to be kept in mind in HTML. To complete an HTML assignment, it is always advisable to seek help from online experts. These experts are well trained and acknowledged with the subject. They provide quality content within the prescribed deadline. With several positive reviews, the online expert help for HTML assignment is highly recommended.

#html assignment help #html assignment writing help #online html assignment writing help #html assignment help service online #what is html #about html

HTML Tutorial For Beginners

The prospect of learning HTML can seem confusing at first: where to begin, what to learn, the best ways to learn — it can be difficult to get started. In this article, we’ll explore the best ways for learning HTML to assist you on your programming journey.

What is HTML?

Hypertext Markup Language (HTML) is the standard markup language for documents meant to be displayed in a web browser. Along with Cascading Style Sheets (CSS) and JavaScript, HTML completes the trio of essential tools used in creating modern web documents.

HTML provides the structure of a webpage, from the header and footer sections to paragraphs of text, videos, and images. CSS allows you to set the visual properties of different HTML elements, like changing colors, setting the order of blocks on the screen, and defining which elements to display. JavaScript automates changes to HTML and CSS, for example, making the font larger in a paragraph when a user clicks a button on the page.

#html #html-css #html-fundamentals #learning-html #html-css-basics #html-templates

HTML - A Complete Guide to Master the Top Programming Language

In this era of technology, anything digital holds a prime significance in our day-to-day life. Hence, developers have submerged themselves to create a major impact using programming languages.According to Statista, HTML/CSS holds the second position (the first being Javascript), in the list of most widely-used programming languages globally (2020).Interested to learn this language? Then head on to this tutorial and get to know all about HTML! Plus we have added numerous examples such that you can learn better! So happy learning!
html for beginners

#html #html-for-beginners #html-tutorials #introduction-to-html #learn-html #tutorials-html

Commonly Used HTML Tags with Examples

HTML tags are keywords used in HTML to display web-pages with certain properties. They are further used for defining HTML elements. An HTML element consists of a starting tag, some content, and an ending tag. The web browser reads the HTML document from top to bottom, left to right. Each HTML tag defines a new property that helps in rendering the website.

HTML Tags

The ‘<>’ brackets contain an HTML tag. There are two types of HTML tags- empty tags or singleton tags and container tags. Singleton tags or empty tags do not contain any content such as an image or a paragraph and hence do not need to be closed, whereas container tags should be closed.

Syntax

1. Some Content

Examples of:

Empty tag: 
,

---

,etc.

Container tags: 

Paragraph

Link

1. <!DOCTYPE>

4. Paragraph

5. Heading

6. Bold
7. Italic
8. Underline

Output-

Head tags:

#html tutorials #html image tags #html link tags #html list tags #html tags #html