Вот пример HTML-страницы:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample HTML Page</title>
</head>
<body>
<h1>Welcome to My Sample HTML Page</h1>
<p>This is an example of a basic HTML page.</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
В этом примере HTML-страницы у нас есть базовая структура с объявлением
Внутри раздела </code>задает заголовок страницы, который отображается в строке заголовка или на вкладке браузера.</p>
<p>В разделе <code><body data-rsssl=1></code>есть заголовок <code></p>
<h1></code>с надписью «Добро пожаловать на мой образец HTML-страницы», за которым следует абзац <code></p>
<p></code>с текстом. Кроме того, существует неупорядоченный список <code></p>
<ul></code>с тремя элементами списка <code></p>
<li></code>, представляющими HTML, CSS и JavaScript.</p>
</div>
<footer class="entry-meta">
<section class="cat-links" itemprop="articleSection">
<span class="icon icon-category"></span>
Posted in <a href="https://fcodenotes.ru/category/programmirovanie/" rel="category tag">Программирование</a> </section>
<section class="tags-links" itemprop="keywords">
<span class="icon icon-tag"></span>
Tagged <a href="https://fcodenotes.ru/tag/html/" rel="tag">HTML</a>, <a href="https://fcodenotes.ru/tag/veb-dizayn/" rel="tag">веб-дизайн</a>, <a href="https://fcodenotes.ru/tag/veb-razrabotka/" rel="tag">Веб-разработка</a> </section>
<section class="permalink" itemprop="articleURL">
<span class="icon icon-permalink"></span>
<a href="https://fcodenotes.ru/primer-bazovoy-struktury-i-elementov-html-stranicy/" role="link" itemprop="url">
Permalink </a>
</section>
</footer>
</article>
<nav class="navigation post-navigation" role="navigation">
<h1 class="screen-reader-text">Post navigation</h1>
<div class="nav-links">
<div class="nav-previous pull-left"><a href="https://fcodenotes.ru/6-effektivnyh-metodov-realizacii-raskryvayushchihsya-spiskov-pereklyuchateley-vybora-pola-i-mnogogo-drugogo/" rel="prev"><span class="meta-nav">← 6 эффективных методов реализации выбора пола: переключатели, раскрывающиеся списки и многое другое</span></a></div><div class="nav-next pull-right"><a href="https://fcodenotes.ru/sozdanie-polnoekrannogo-modalnogo-okna-s-pomoshchyu-nachalnoy-zagruzki-4-6/" rel="next"><span class="meta-nav">Создание полноэкранного модального окна с помощью Bootstrap 4.6 →</span></a></div> </div>
</nav>
</main>
</div>
</div>
</div>
<footer id="footer" class="main-footer" role="contentinfo" itemtype="http://schema.org/WPFooter" itemscope="itemscope">
<div id="back-to-top">
<a href="#top" class="btn btn-primary btn-lg btn-block">
Back to top </a>
</div>
<div id="footer-sidebars" role="navigation" class="container">
<div id="sidebar-footer-1" class="widget-area col-sm-12" role="complementary">
<aside id="block-3" class="widget widget_block"><div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"><h2 class="wp-block-heading">Последние сообщения</h2><ul class="wp-block-latest-posts__list wp-block-latest-posts"><li><a class="wp-block-latest-posts__post-title" href="https://fcodenotes.ru/osvoenie-centos-8-ustanovka-build-essential-i-raskrytie-vashego-potenciala-kodirovaniya/">Освоение CentOS 8: установка сборки и раскрытие вашего потенциала кодирования</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://fcodenotes.ru/osnovnye-shagi-po-ustanovke-sborki-essential-na-ubuntu-podrobnoe-rukovodstvo/">Основные шаги по установке build-essential в Ubuntu: подробное руководство</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://fcodenotes.ru/prostye-sposoby-ustanovki-build-essential-na-fedora-podrobnoe-rukovodstvo/">Простые способы установки Build-Essential в Fedora: подробное руководство</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://fcodenotes.ru/rukovodstvo-po-ustanovke-pytorch-bez-graficheskogo-processora-puteshestvie-dlya-nachinayushchih/">Руководство по установке PyTorch без графического процессора: путешествие для новичка</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://fcodenotes.ru/uluchshenie-zaprosov-python-s-pomoshchyu-tqdm-dlya-otslezhivaniya-progressa/">Улучшение запросов Python GET с помощью tqdm для отслеживания прогресса</a></li>
</ul></div></div></aside><aside id="tag_cloud-2" class="widget widget_tag_cloud"><h4 class="widget-title">Метки</h4><hr class="separator" /><div class="tagcloud"><a href="https://fcodenotes.ru/tag/android-razrabotka/" class="tag-cloud-link tag-link-6456 tag-link-position-1" style="font-size: 10.905660377358pt;" aria-label="Android-разработка (1 063 элемента)">Android-разработка</a>
<a href="https://fcodenotes.ru/tag/uglovoy/" class="tag-cloud-link tag-link-2797 tag-link-position-2" style="font-size: 9.8490566037736pt;" aria-label="Angular (883 элемента)">Angular</a>
<a href="https://fcodenotes.ru/tag/css/" class="tag-cloud-link tag-link-2726 tag-link-position-3" style="font-size: 11.169811320755pt;" aria-label="CSS (1 133 элемента)">CSS</a>
<a href="https://fcodenotes.ru/tag/trepetat/" class="tag-cloud-link tag-link-2528 tag-link-position-4" style="font-size: 15.924528301887pt;" aria-label="Flutter (2 581 элемент)">Flutter</a>
<a href="https://fcodenotes.ru/tag/html/" class="tag-cloud-link tag-link-2727 tag-link-position-5" style="font-size: 10.377358490566pt;" aria-label="HTML (985 элементов)">HTML</a>
<a href="https://fcodenotes.ru/tag/javascript/" class="tag-cloud-link tag-link-2531 tag-link-position-6" style="font-size: 20.811320754717pt;" aria-label="JavaScript (6 001 элемент)">JavaScript</a>
<a href="https://fcodenotes.ru/tag/mysql/" class="tag-cloud-link tag-link-2537 tag-link-position-7" style="font-size: 11.301886792453pt;" aria-label="MySQL (1 136 элементов)">MySQL</a>
<a href="https://fcodenotes.ru/tag/node-js/" class="tag-cloud-link tag-link-2774 tag-link-position-8" style="font-size: 9.7169811320755pt;" aria-label="Node.js (866 элементов)">Node.js</a>
<a href="https://fcodenotes.ru/tag/php/" class="tag-cloud-link tag-link-2538 tag-link-position-9" style="font-size: 20.679245283019pt;" aria-label="Php (5 882 элемента)">Php</a>
<a href="https://fcodenotes.ru/tag/postgresql/" class="tag-cloud-link tag-link-6884 tag-link-position-10" style="font-size: 9.188679245283pt;" aria-label="PostgreSQL (788 элементов)">PostgreSQL</a>
<a href="https://fcodenotes.ru/tag/reagirovat/" class="tag-cloud-link tag-link-2685 tag-link-position-11" style="font-size: 10.905660377358pt;" aria-label="React (1 070 элементов)">React</a>
<a href="https://fcodenotes.ru/tag/sql/" class="tag-cloud-link tag-link-6800 tag-link-position-12" style="font-size: 13.811320754717pt;" aria-label="SQL (1 779 элементов)">SQL</a>
<a href="https://fcodenotes.ru/tag/wordpress/" class="tag-cloud-link tag-link-3932 tag-link-position-13" style="font-size: 11.962264150943pt;" aria-label="WordPress (1 301 элемент)">WordPress</a>
<a href="https://fcodenotes.ru/tag/analiz-dannyh/" class="tag-cloud-link tag-link-7686 tag-link-position-14" style="font-size: 10.641509433962pt;" aria-label="Анализ данных (1 011 элементов)">Анализ данных</a>
<a href="https://fcodenotes.ru/tag/veb-razrabotka/" class="tag-cloud-link tag-link-2741 tag-link-position-15" style="font-size: 19.754716981132pt;" aria-label="Веб-разработка (5 053 элемента)">Веб-разработка</a>
<a href="https://fcodenotes.ru/tag/vizualizaciya-dannyh/" class="tag-cloud-link tag-link-4277 tag-link-position-16" style="font-size: 9.7169811320755pt;" aria-label="Визуализация данных (869 элементов)">Визуализация данных</a>
<a href="https://fcodenotes.ru/tag/golang/" class="tag-cloud-link tag-link-4285 tag-link-position-17" style="font-size: 8.1320754716981pt;" aria-label="Голанг (666 элементов)">Голанг</a>
<a href="https://fcodenotes.ru/tag/dart/" class="tag-cloud-link tag-link-5889 tag-link-position-18" style="font-size: 8.3962264150943pt;" aria-label="Дарт (693 элемента)">Дарт</a>
<a href="https://fcodenotes.ru/tag/dzhava/" class="tag-cloud-link tag-link-6866 tag-link-position-19" style="font-size: 10.377358490566pt;" aria-label="Джава (979 элементов)">Джава</a>
<a href="https://fcodenotes.ru/tag/dzhango/" class="tag-cloud-link tag-link-3733 tag-link-position-20" style="font-size: 8.1320754716981pt;" aria-label="Джанго (662 элемента)">Джанго</a>
<a href="https://fcodenotes.ru/tag/kotlin/" class="tag-cloud-link tag-link-15452 tag-link-position-21" style="font-size: 9.4528301886792pt;" aria-label="Котлин (837 элементов)">Котлин</a>
<a href="https://fcodenotes.ru/tag/laravel/" class="tag-cloud-link tag-link-3035 tag-link-position-22" style="font-size: 19.490566037736pt;" aria-label="Ларавел (4 797 элементов)">Ларавел</a>
<a href="https://fcodenotes.ru/tag/linuks/" class="tag-cloud-link tag-link-2542 tag-link-position-23" style="font-size: 9.3207547169811pt;" aria-label="Линукс (817 элементов)">Линукс</a>
<a href="https://fcodenotes.ru/tag/manipulyacii-s-massivami/" class="tag-cloud-link tag-link-2932 tag-link-position-24" style="font-size: 9.9811320754717pt;" aria-label="Манипуляции с массивами (908 элементов)">Манипуляции с массивами</a>
<a href="https://fcodenotes.ru/tag/mashinopis/" class="tag-cloud-link tag-link-2792 tag-link-position-25" style="font-size: 13.811320754717pt;" aria-label="Машинопись (1 789 элементов)">Машинопись</a>
<a href="https://fcodenotes.ru/tag/pandy/" class="tag-cloud-link tag-link-7681 tag-link-position-26" style="font-size: 8.5283018867925pt;" aria-label="Панды (705 элементов)">Панды</a>
<a href="https://fcodenotes.ru/tag/poisk-neispravnostey/" class="tag-cloud-link tag-link-2965 tag-link-position-27" style="font-size: 16.320754716981pt;" aria-label="Поиск неисправностей (2 776 элементов)">Поиск неисправностей</a>
<a href="https://fcodenotes.ru/tag/primery-koda/" class="tag-cloud-link tag-link-2776 tag-link-position-28" style="font-size: 18.433962264151pt;" aria-label="Примеры кода (4 004 элемента)">Примеры кода</a>
<a href="https://fcodenotes.ru/tag/programmirovanie-na-python/" class="tag-cloud-link tag-link-5333 tag-link-position-29" style="font-size: 9.9811320754717pt;" aria-label="Программирование на Python (903 элемента)">Программирование на Python</a>
<a href="https://fcodenotes.ru/tag/rubin-na-relsah/" class="tag-cloud-link tag-link-9519 tag-link-position-30" style="font-size: 8.7924528301887pt;" aria-label="Рубин на рельсах (735 элементов)">Рубин на рельсах</a>
<a href="https://fcodenotes.ru/tag/s/" class="tag-cloud-link tag-link-2569 tag-link-position-31" style="font-size: 10.641509433962pt;" aria-label="С# (1 031 элемент)">С#</a>
<a href="https://fcodenotes.ru/tag/s-2/" class="tag-cloud-link tag-link-2705 tag-link-position-32" style="font-size: 9.188679245283pt;" aria-label="С++ (799 элементов)">С++</a>
<a href="https://fcodenotes.ru/tag/ubuntu/" class="tag-cloud-link tag-link-2535 tag-link-position-33" style="font-size: 8.1320754716981pt;" aria-label="Убунту (665 элементов)">Убунту</a>
<a href="https://fcodenotes.ru/tag/upravlenie-bazoy-dannyh/" class="tag-cloud-link tag-link-3023 tag-link-position-34" style="font-size: 13.415094339623pt;" aria-label="Управление базой данных (1 644 элемента)">Управление базой данных</a>
<a href="https://fcodenotes.ru/tag/baza-dannyh/" class="tag-cloud-link tag-link-3149 tag-link-position-35" style="font-size: 8.7924528301887pt;" aria-label="база данных (738 элементов)">база данных</a>
<a href="https://fcodenotes.ru/tag/komandnaya-stroka/" class="tag-cloud-link tag-link-5609 tag-link-position-36" style="font-size: 8.7924528301887pt;" aria-label="командная строка (735 элементов)">командная строка</a>
<a href="https://fcodenotes.ru/tag/manipulyaciya-dannymi/" class="tag-cloud-link tag-link-7693 tag-link-position-37" style="font-size: 10.905660377358pt;" aria-label="манипуляция данными (1 075 элементов)">манипуляция данными</a>
<a href="https://fcodenotes.ru/tag/manipulyaciya-so-strokami/" class="tag-cloud-link tag-link-2660 tag-link-position-38" style="font-size: 14.603773584906pt;" aria-label="манипуляция со строками (2 040 элементов)">манипуляция со строками</a>
<a href="https://fcodenotes.ru/tag/obrabotka-oshibok/" class="tag-cloud-link tag-link-2843 tag-link-position-39" style="font-size: 13.415094339623pt;" aria-label="обработка ошибок (1 641 элемент)">обработка ошибок</a>
<a href="https://fcodenotes.ru/tag/piton/" class="tag-cloud-link tag-link-2527 tag-link-position-40" style="font-size: 22pt;" aria-label="питон (7 491 элемент)">питон</a>
<a href="https://fcodenotes.ru/tag/programmirovanie/" class="tag-cloud-link tag-link-2717 tag-link-position-41" style="font-size: 17.641509433962pt;" aria-label="программирование (3 468 элементов)">программирование</a>
<a href="https://fcodenotes.ru/tag/programmirovanie-na-yazyke-r/" class="tag-cloud-link tag-link-7842 tag-link-position-42" style="font-size: 10.11320754717pt;" aria-label="программирование на языке R (939 элементов)">программирование на языке R</a>
<a href="https://fcodenotes.ru/tag/razrabotka-igr/" class="tag-cloud-link tag-link-6784 tag-link-position-43" style="font-size: 8.1320754716981pt;" aria-label="разработка игр (658 элементов)">разработка игр</a>
<a href="https://fcodenotes.ru/tag/razrabotka-programmnogo-obespecheniya/" class="tag-cloud-link tag-link-5001 tag-link-position-44" style="font-size: 11.433962264151pt;" aria-label="разработка программного обеспечения (1 176 элементов)">разработка программного обеспечения</a>
<a href="https://fcodenotes.ru/tag/yazyki-programmirovaniya/" class="tag-cloud-link tag-link-2903 tag-link-position-45" style="font-size: 8pt;" aria-label="языки программирования (639 элементов)">языки программирования</a></div>
</aside> </div>
</div>
<hr class="separator" />
<div role="navigation" class="container">
<div id="credits" class="site-info credits col-sm-6">
<p>Copyright © 2026 <a href="https://fcodenotes.ru">Fcodenotes - блог о программировании</a>. Powered by <a href="http://www.wordpress.org/" class="wp-url">WordPress</a> and <a href="http://github.com/andrezrv/follet" class="theme-url">Follet</a>.</p>
</div>
<div id="social-menu" class="col-sm-6">
</div>
</div>
</footer>
</div>
<noscript>
<div>
<img src="https://mc.yandex.ru/watch/97324100" style="position:absolute; left:-9999px;" alt=""/>
</div>
</noscript>
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/follet/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script type="text/javascript" id="rtrar.appLocal-js-extra">
/* <![CDATA[ */
var rtafr = {"rules":""};
//# sourceURL=rtrar.appLocal-js-extra
/* ]]> */
</script>
<script type="text/javascript" src="https://fcodenotes.ru/wp-content/plugins/real-time-auto-find-and-replace/assets/js/rtafar.local.js?ver=1.5.9" id="rtrar.appLocal-js"></script>
<script type="text/javascript" src="https://fcodenotes.ru/wp-content/themes/follet/includes/follet-core/includes/bootstrap/js/bootstrap.min.js?ver=3.1.1" id="follet-bootstrap-js-js"></script>
<script type="text/javascript" src="https://fcodenotes.ru/wp-content/themes/follet/js/min/skip-link-focus-fix.min.js?ver=20130115" id="follet-skip-link-focus-fix-js"></script>
<script type="text/javascript" src="https://fcodenotes.ru/wp-content/themes/follet/js/min/back-to-top.min.js?ver=1.1.1" id="follet-back-to-top-js"></script>
<script type="text/javascript" src="https://fcodenotes.ru/wp-content/themes/follet/js/min/bootstrap-support.min.js?ver=1.1.1" id="follet-bootstrap-support-js"></script>
<script type="text/javascript" src="https://fcodenotes.ru/wp-content/themes/follet/js/min/content-sidebar-height.min.js?ver=1.1.1" id="follet-content-sidebar-height-js"></script>
<script type="text/javascript" src="https://fcodenotes.ru/wp-content/themes/follet/js/min/top-navigation-searchform.min.js?ver=1.1.1" id="follet-top-navigation-searchform-js"></script>
<script type="text/javascript" src="https://fcodenotes.ru/wp-content/themes/follet/js/min/resize-videos.min.js?ver=1.1.1" id="follet-resize-videos-js"></script>
<script type="text/javascript" src="https://fcodenotes.ru/wp-content/plugins/real-time-auto-find-and-replace/assets/js/rtafar.app.min.js?ver=1.5.9" id="rtrar.app-js"></script>
<script id="wp-emoji-settings" type="application/json">
{"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://fcodenotes.ru/wp-includes/js/wp-emoji-release.min.js?ver=6.9.1"}}
</script>
<script type="module">
/* <![CDATA[ */
/*! This file is auto-generated */
const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))});
//# sourceURL=https://fcodenotes.ru/wp-includes/js/wp-emoji-loader.min.js
/* ]]> */
</script>
</body>
</html>