Какой конкретный тег используется для представления статьи в HTML?

На чтение 4 мин Просмотров 39 Опубликовано 19.01.2022

В этой статье мы увидим, как представить статью в HTML.

Тег <article> — один из новых элементов секционирования в HTML5. Тег HTML <article> используется для представления статьи. В частности, содержимое тега <article> не зависит от другого содержимого сайта (даже если оно может быть связано).

Другими словами, элемент статьи представляет компонент страницы, состоящий из автономной композиции в документе, странице или сайте. Например – в синдикации.

Потенциальным источником элемента статьи являются:

Статья в журнале/газете
запись в блоге
Сообщение на форуме
Пользователь отправил комментарий

Этот тег чаще всего используется в двух контекстах:

На странице с одним элементом контента можно использовать один элемент <article>, чтобы содержать основной контент и отделять его от остальной части страницы.
На странице с несколькими частями контента (страница индекса блога, страница результатов поиска, страница категории, лента новостей) можно использовать несколько элементов <article> для содержания каждой отдельной части контента.

В любом случае, он похож на элемент <div> и отображает стильную работу так же. Однако использование элемента <article> вместо <div> предоставляет больше семантической информации программам чтения с экрана, поисковым системам и сторонним приложениям.

Примечание. Этот тег не отображается в браузере как нечто особенное, для этого вам нужно использовать CSS.

Параметр CSS по умолчанию: большинство браузеров будут отображать элемент статьи со следующими значениями.

Синтаксис:

<article> {
    display:block;
}

Пример: в этом примере используется встроенный стиль в элементе статьи.

HTML

<!DOCTYPE html>

<html>

<body>

    <article style="

        width: 300px;

        border: 2px solid gray;

        padding: 10px;

        border-radius: 10px;

        margin: 5px;">

        <img src=

"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"

            alt="article tag"

            width="300" height="250"

            class="alignnone size-medium wp-image-560930" />

        <h1>GeeksforGeeks</h1>

        <p>

            What We Offer We provide a variety of

            services for you to learn, thrive and

            also have fun! Free Tutorials, Millions

            of Articles, Live, Online and Classroom

            Courses ,Frequent Coding Competitions,

            Webinars by Industry Experts, Internship

            opportunities and Job Opportunities.

        </p>

    </article>

</body>

</html>

Вывод: