Dummies
dummies.com › article › technology › programming-web-design › html › a-sample-web-page-in-html-189340
A Sample Web Page in HTML | dummies
July 1, 2025 - </p> <hr> <p>Finally, link to <a href="page2.html">another page</a> in your own Web site.</p> <!-- And add a copyright notice.--> <p>© Wiley Publishing, 2011</p> </body> </html> All this HTML translates to a Web page that looks something like this:
W3Schools
w3schools.com › html › html_examples.asp
HTML Examples
Keyboard input formatting using the <kbd> element Computer output formatting using the <samp> element Programming code formatting using the <code> element Programming code formatting preserving whitespace and line-breaks Variable formatting using the <var> element
Videos
01:09:34
HTML Tutorial for Beginners: HTML Crash Course - YouTube
04:07:30
Learn HTML – Full Tutorial for Beginners - YouTube
42:55
HTML5 Website Project for Beginners | First HTML Project Tutorial ...
25:17
How to Code a Basic Webpage Using HTML - YouTube
Professional Website From Scratch | HTML & CSS For ...
26:01
Build a Personal Website with HTML & CSS (Beginner Crash Course) ...
W3Schools
w3schools.com › html › html_basic.asp
HTML Basic
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, XML and more.
MDN Web Docs
developer.mozilla.org › en-US › docs › Learn_web_development › Getting_started › Your_first_website › Creating_the_content
HTML: Creating the content - Learn web development | MDN
HTML comments are a way for you to add notes about your code or logic, which might be useful to others working on the same code, or you, if you came back to it after 6 months and can't remember what you did. Add your page title to the HTML page just above your <img> element, wrapped inside <h1> ... </h1> tags. Save the file and view it in a browser to see the effect. Paragraph <p> elements are for containing paragraphs of text; you'll use these frequently when marking up regular text content: ... Add your sample text from the previous article into one or a few paragraphs, placed directly below your <img> element.
Programiz
programiz.com › html › basics
HTML Basics (with examples)
4. HTML code should be well-formed and properly indented, with each element on its own line and each level of hierarchy indented by one level. This makes the code easier to read and understand, and can help to avoid errors.
freeCodeCamp
freecodecamp.org › news › introduction-to-html-basics
HTML for Beginners – HTML Basics With Code Examples
October 9, 2024 - Use comments <!-- --> to document your HTML code, explaining its purpose and functionality.
Htmlandcssbook
htmlandcssbook.com › code-samples
HTML & CSS code samples and examples to accompany book
Click here for the view source example. Download sample code · Structure · Text · Lists · Links · Images · Tables · Forms · Extra Markup · Flash, Audio, and Video · Introducing CSS · Color · Text · Boxes · Tables, Lists, & Forms · Layout · Images · HTML5 Layout
Quackit
quackit.com › html › codes
HTML Codes
Free HTML tutorial that explains how to code in HTML.
freeCodeCamp
freecodecamp.org › news › html-and-html5-example
The Best HTML Examples and HTML5 Examples
November 24, 2019 - Before HTML5, audio files had to be played in a browser using a plug-in like Adobe Flash. The HTML · The following code snippet adds an audio file with the filename tutorial.ogg or tutorial.mp3. Theelement indicates alternative audio files which the browser may choose from.
GitHub
gist.github.com › chrisvfritz › bc010e6ed25b802da7eb
Simplest possible HTML template · GitHub
Simplest possible HTML template. GitHub Gist: instantly share code, notes, and snippets.
MakeUseOf
makeuseof.com › home › programming › 17 simple html code examples you can learn in 10 minutes
17 Simple HTML Code Examples You Can Learn in 10 Minutes
July 9, 2023 - We've provided simple HTML code examples with output for most of the tags. If you want to test them for yourself, copy the sample HTML code into your own document. You can play around with them in a text editor and load up your file in a browser to see what your changes do.
GitHub
github.com › mdn › html-examples
GitHub - mdn/html-examples: Code examples that accompany the MDN HTML documentation: https://developer.mozilla.org/en-US/docs/Web/HTML
Code examples that accompany the MDN HTML documentation: https://developer.mozilla.org/en-US/docs/Web/HTML - mdn/html-examples
Starred by 95 users
Forked by 111 users
Languages HTML 82.4% | JavaScript 9.1% | CSS 8.5%
Learn HTML
learn-html.org › en › Hello,_World!
Hello, World! - Learn HTML - Free Interactive HTML Tutorial
learn-html.org is a free interactive HTML tutorial for people who want to learn HTML, fast.
FreeFrontend
freefrontend.com › html-code-examples
HTML Examples | FreeFrontend
This collection demonstrates how HTML5 enables interactivity without heavy JS code, using tags like <details> and <summary> to create accordions or show/hide widgets. You’ll see how to structure complex data with global attributes (data-*) for JavaScript interaction and how to effectively use the <template> tag for reusable content fragments.
GoDaddy
godaddy.com › home › 10 basic html codes for web pages (with examples)
10 basic HTML codes for web pages (with examples) - GoDaddy Resources - United Kingdom
December 4, 2024 - All HTML tags appear between hyphens (< >). For example, the <strong> and </strong> tags define bold text. If we write a sentence with the following code:
Usf
web.usf.edu › blwarner › tips.not in use › HTMLTips › htmlsamples.htm
HTML Sample Code
Example1.html · Example 2
Websiteos
help.websiteos.com › websiteos › example_of_a_simple_html_page.htm
Example of a simple HTML page
Most tags require an opening <tag> ... page: This is the code used to make the page: <HTML> <HEAD> <TITLE>Your Title Here</TITLE> </HEAD> <BODY BGCOLOR="FFFFFF"> <CENTER><IMG SRC="clouds.jpg" ALIGN="BOTTOM"> </CENTER> <HR> <a href="http://somegreatsite.com">Link Name</a> is ...
Top answer 1 of 2
20
I think your best bet is to make one yourself. If you are too lazy to make it here's one I did: https://pastebin.com/QU4kcJfz
<!DOCTYPE html>
<html>
<head>
<title> TEST HTML PAGE </title>
<meta charset="UTF-8">
<meta name="description" content="Most of HTML5 tags">
<meta name="keywords" content="HTML5, tags">
<meta name="author" content="http://blazardsky.space">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<nav>
<p>HEADER</p>
<menu type="context" id="navmenu">
<menuitem label="Home" icon="icon.png"> <a href="#">Home</a> </menuitem>
</menu>
</nav>
</header>
<main>
<h1> Heading... </h1>
<h2> Heading... </h2>
<h3> Heading... </h3>
<h4> Heading... </h4>
<h5> Heading... </h5>
<h6> Heading... </h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nisi lacus, auctor sit amet purus vel, gravida luctus lectus. Aenean rhoncus dapibus enim, sit amet faucibus leo ornare vitae. <br>
<span> span </span>
<b>Bold word</b>
<i>italic</i>
<em>emphasis</em>
<mark>mark</mark>
<small> small </small>
<sub> sub </sub>
<sup> sup </sup>
<u> Statements... </u>
<abbr title="National Aeronautics and Space Administration">NASA</abbr>
<strike> strikethrough </strike>
<span><del> deprecated info </del> <ins> new info </ins> </span>
<s> not relevant </s>
<a href="#link">link</a>
<time datetime="2020-08-17 08:00">Monday at 8:00 AM</time>
<ruby>
<rb>ruby base<rt>annotation
</ruby>
<br>
<kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>CANC</kbd>
</p>
</main>
<p> This is a <q>short quote</q> </p>
<blockquote> This instead is a long quote that is going to use a lot of words and also cite who said that. —<cite>Some People</cite> </blockquote>
<ol>
<li><data value="21053">data tag</data></li>
<li><data value="23452">data tag</data></li>
<li><data value="42545">data tag</data></li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
<hr>
<template>
<h2>Hidden content (after page loaded).</h2>
</template>
<video width="640" height="480" src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4" controls>
<track kind="subtitles" src="subtitles_de.vtt" srclang="de">
<track kind="subtitles" src="subtitles_en.vtt" srclang="en">
<track kind="subtitles" src="subtitles_ja.vtt" srclang="ja">
Sorry, your browser doesn't support HTML5 <code>video</code>, but you can
download this video from the <a href="https://archive.org/details/Popeye_forPresident" target="_blank">Internet Archive</a>.
</video>
<object data="flashmovie.swf" width="600" height="800" type="application/x-shockwave-flash">
Please install the Shockwave plugin to watch this movie.
</object>
<pre>
_,'/
_.-''._:
,-:`-.-' .:.|
;-.'' .::.|
_..------.._ / (:. .:::.|
,'. .. . . .`/ : :. .::::.|
,'. . . . ./ \ ::. .::::::.|
,'. . . . . / `.,,::::::::.;\
/ . . / ,',';_::::::,:_:
/ . . . . / ,',','::`--'':;._;
: . . / ,',',':::::::_:'_,'
|.. . . . / ,',','::::::_:'_,'
|. /,-. /,',':::::_:'_,'
| .. . . /) /-:/,'::::_:',-'
: . . . // / ,'):::_:',' ;
\ . . // /,' /,-.',' ./
\ . . `::./,// ,'' ,' . /
`. . . `;;;,/_.'' . . ,'
,`. . :;;' `:. . ,'
/ `-._,' .. ` _.-'
( _,'``------''
`--''
</pre>
<code>
// code tag
#include <iostream>
using namespace std;
int main()
{
cout << "Hello World!" << endl; return 0; } </code> <p>
<var> variable </var> = 1000;
<samp>Traceback (most recent call last):<br>NameError: name 'variabl' is not defined</samp>
</p>
<table>
<thead>
<tr>
<th>Numbers</th>
<th>Letters</th>
<th>Colors</th>
</tr>
</thead>
<tfoot>
<tr>
<td>123</td>
<td>ABC</td>
<td>RGB</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>A</td>
<td>Red</td>
</tr>
<tr>
<td>2</td>
<td>B</td>
<td>Green</td>
</tr>
<tr>
<td>3</td>
<td>C</td>
<td>Blue</td>
</tr>
</tbody>
</table>
<p> A <dfn>definition</dfn> is an explanation of the meaning of a word or phrase. </p>
<details>
<summary>Summary of content below</summary>
<p>Content 1</p>
<p>Content 2</p>
<p>Content 3</p>
<p>Content 4</p>
</details>
<section>
<h1>Content</h1>
<p>Informations about content.</p>
</section>
<progress value="33" max="100"></progress>
<meter value="11" min="0" max="45" optimum="40">25 out of 45</meter>
<p> 2+2 = <output>4</output> </p>
<select>
<optgroup label="Choice [1-3]">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</optgroup>
<optgroup label="Choice [4-6]">
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</optgroup>
</select>
<div>
<div>
<p> div > div > p </p>
</div>
<br>
</div>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<br>
<textarea id="textarea" name="textarea" rows="4" cols="50">
Write something in here
</textarea>
<br>
<audio controls>
I'm sorry. You're browser doesn't support HTML5 <code>audio</code>.
<source src="https://archive.org/download/ReclaimHtml5/ReclaimHtml5.ogg" type="audio/ogg">
<source src="https://archive.org/download/ReclaimHtml5/ReclaimHtml5.mp3" type="audio/mpeg">
</audio>
<p>This is a recording of a talk called <cite>Reclaim HTML5</cite> which was orinally delieved in Vancouver at a <a href="http://www.meetup.com/vancouver-javascript-developers/" taget="_blank">Super VanJS Meetup</a>. It is hosted by <a href="https://archive.org/details/ReclaimHtml5"
target="_blank">The Internet Archive</a> and licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">CC 3.0</a>.</p>
<iframe src="https://open.spotify.com/embed?uri=spotify%3Atrack%3A67HxeUADW4H3ERfaPW59ma?si=PogFcGg9QqapyoPbn2lVOw" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>
<article>
<header>
<h2>Title of Article</h2>
<span>by Arthur T. Writer</span>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat sollicitudin nisi, at convallis nunc semper et. Donec ultrices odio ac purus facilisis, at mollis urna finibus.</p>
<figure>
<img src="https://placehold.it/600x300" alt="placeholder-image">
<figcaption> Caption.</figcaption>
</figure>
<footer>
<dl> <dt>Published</dt>
<dd>17 August 2020</dd> <dt>Tags</dt>
<dd>Sample Posts, html example</dd>
</dl>
</footer>
</article>
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name</label><br>
<input name="name" id="name"><br>
<label for="dob">Date of Birth<label><br>
<input name="dob" id="dob" type="date">
</fieldset>
</form>
<aside>
<p> P inside ASIDE tag </p>
</aside>
<map name="shapesmap"> <area shape="rect" coords="29,32,230,215" href="#square" alt="Square"> <area shape="circle" coords="360,130,100" href="#circle" alt="Circle"> </map>
<img src="https://placehold.it/100x100" alt="placeholder-image">
<form action="" method="get">
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<footer>
<address> relevant contacts <a href="mailto:[email protected]">mail</a>.</address>
<div> created by <a href="https://blazardsky.space">@blazardsky</a></div>
</footer>
</body>
</html> 2 of 2
6
I have found this GitHub repository which provides a quite complete and well-built webpage. It only lacks some longer paragraphs to bulletproof your styling (for instance, if you want to use it to set up your base CSS for your website) and some nesting in list (ul, ol and dl with multiple sub-levels).
There's also this one if you want to give it a try.
W3Schools
w3schools.com › html › tryit.asp
W3Schools online HTML editor
❯Run Code Ctrl+Alt+R Save Code Ctrl+Alt+A Change Orientation Ctrl+Alt+O Change Theme Ctrl+Alt+D Go to Spaces Ctrl+Alt+P
Educative
educative.io › answers › how-to-write-hello-world-in-html
How to write "Hello World" in HTML
This simplicity makes it easy to experiment with web page changes in real time—write code, save, and refresh the browser to view updates instantly. The first step to getting familiar with a new language is to write a simple "Hello World" program, and the same goes for HTML (Hypertext Markup Language).