HTML Examples

Last modified on: October 20, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">
<div class="relative p-1 rounded-sm flex items-center justify-center bg-token-main-surface-primary text-token-text-primary h-8 w-8">&nbsp;</div>
</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-[20px] text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="b2822d02-375e-4b12-8f9f-4bf24b94f20c">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>Here are various HTML examples demonstrating different features and functionalities of HTML:</p>
<h3>1. <strong>Basic HTML Structure</strong></h3>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;Basic HTML Structure&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Welcome to My Website&lt;/h1&gt;
  &lt;p&gt;This is a basic HTML structure example.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
<h3>2. <strong>HTML Forms</strong></h3>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;HTML Form Example&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Contact Us&lt;/h1&gt;
  &lt;form action="/submit-form" method="post"&gt;
    &lt;label for="name"&gt;Name:&lt;/label&gt;
    &lt;input type="text" id="name" name="name" required&gt;&lt;br&gt;&lt;br&gt;
    
    &lt;label for="email"&gt;Email:&lt;/label&gt;
    &lt;input type="email" id="email" name="email" required&gt;&lt;br&gt;&lt;br&gt;
    
    &lt;label for="message"&gt;Message:&lt;/label&gt;&lt;br&gt;
    &lt;textarea id="message" name="message" rows="4" cols="50" required&gt;&lt;/textarea&gt;&lt;br&gt;&lt;br&gt;
    
    &lt;input type="submit" value="Submit"&gt;
  &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
<h3>3. <strong>HTML Tables</strong></h3>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;HTML Table Example&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Product List&lt;/h1&gt;
  &lt;table border="1"&gt;
    &lt;tr&gt;
      &lt;th&gt;Product&lt;/th&gt;
      &lt;th&gt;Price&lt;/th&gt;
      &lt;th&gt;Quantity&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Apple&lt;/td&gt;
      &lt;td&gt;$1.00&lt;/td&gt;
      &lt;td&gt;10&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Orange&lt;/td&gt;
      &lt;td&gt;$0.80&lt;/td&gt;
      &lt;td&gt;20&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
<h3>4. <strong>HTML Lists</strong></h3>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;HTML Lists Example&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Unordered List&lt;/h1&gt;
  &lt;ul&gt;
    &lt;li&gt;Item 1&lt;/li&gt;
    &lt;li&gt;Item 2&lt;/li&gt;
    &lt;li&gt;Item 3&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;h1&gt;Ordered List&lt;/h1&gt;
  &lt;ol&gt;
    &lt;li&gt;First&lt;/li&gt;
    &lt;li&gt;Second&lt;/li&gt;
    &lt;li&gt;Third&lt;/li&gt;
  &lt;/ol&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
<h3>5. <strong>HTML Links</strong></h3>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;HTML Links Example&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Links Example&lt;/h1&gt;
  &lt;a href="https://www.example.com" target="_blank"&gt;Visit Example.com&lt;/a&gt;&lt;br&gt;
  &lt;a href="mailto:info@example.com"&gt;Email Us&lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
<h3>6. <strong>HTML Images</strong></h3>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;HTML Images Example&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Images Example&lt;/h1&gt;
  &lt;img src="https://via.placeholder.com/150" alt="Placeholder Image" width="150"&gt;
  &lt;p&gt;Above is a placeholder image.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
<h3>7. <strong>HTML Videos and Audio</strong></h3>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;HTML Media Example&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Media Example&lt;/h1&gt;

&lt;h2&gt;Video&lt;/h2&gt;
  &lt;video width="320" height="240" controls&gt;
    &lt;source src="movie.mp4" type="video/mp4"&gt;
    Your browser does not support the video tag.
  &lt;/video&gt;
  
  &lt;h2&gt;Audio&lt;/h2&gt;
  &lt;audio controls&gt;
    &lt;source src="audio.mp3" type="audio/mp3"&gt;
    Your browser does not support the audio tag.
  &lt;/audio&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
<h3>8. <strong>HTML Forms with Input Types</strong></h3>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;HTML Form Inputs Example&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Form Inputs Example&lt;/h1&gt;
  &lt;form&gt;
    &lt;label for="text"&gt;Text:&lt;/label&gt;
    &lt;input type="text" id="text" name="text"&gt;&lt;br&gt;&lt;br&gt;
    
    &lt;label for="password"&gt;Password:&lt;/label&gt;
    &lt;input type="password" id="password" name="password"&gt;&lt;br&gt;&lt;br&gt;
    
    &lt;label for="date"&gt;Date:&lt;/label&gt;
    &lt;input type="date" id="date" name="date"&gt;&lt;br&gt;&lt;br&gt;
    
    &lt;label for="checkbox"&gt;Check me:&lt;/label&gt;
    &lt;input type="checkbox" id="checkbox" name="checkbox"&gt;&lt;br&gt;&lt;br&gt;
    
    &lt;label for="radio1"&gt;Option 1:&lt;/label&gt;
    &lt;input type="radio" id="radio1" name="radio" value="1"&gt;&lt;br&gt;
    &lt;label for="radio2"&gt;Option 2:&lt;/label&gt;
    &lt;input type="radio" id="radio2" name="radio" value="2"&gt;&lt;br&gt;&lt;br&gt;
    
    &lt;label for="select"&gt;Select:&lt;/label&gt;
    &lt;select id="select" name="select"&gt;
      &lt;option value="option1"&gt;Option 1&lt;/option&gt;
      &lt;option value="option2"&gt;Option 2&lt;/option&gt;
    &lt;/select&gt;&lt;br&gt;&lt;br&gt;
    
    &lt;label for="textarea"&gt;Textarea:&lt;/label&gt;&lt;br&gt;
    &lt;textarea id="textarea" name="textarea" rows="4" cols="50"&gt;&lt;/textarea&gt;&lt;br&gt;&lt;br&gt;
    
    &lt;input type="submit" value="Submit"&gt;
  &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
<h3>9. <strong>HTML Inline and Block Elements</strong></h3>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;HTML Inline and Block Elements&lt;/title&gt;
  &lt;style&gt;
    .block { display: block; margin: 10px 0; }
    .inline { display: inline; margin: 0 10px; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Inline and Block Elements&lt;/h1&gt;
  &lt;div class="block"&gt;This is a block-level element.&lt;/div&gt;
  &lt;span class="inline"&gt;This is an inline element.&lt;/span&gt;
  &lt;span class="inline"&gt;Another inline element.&lt;/span&gt;
  &lt;div class="block"&gt;Another block-level element.&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
<h3>10. <strong>HTML Semantics</strong></h3>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;HTML Semantics Example&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;header&gt;
    &lt;h1&gt;My Website&lt;/h1&gt;
    &lt;nav&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/header&gt;
  
  &lt;main&gt;
    &lt;section&gt;
      &lt;h2&gt;About Us&lt;/h2&gt;
      &lt;p&gt;We are a small company...&lt;/p&gt;
    &lt;/section&gt;
    
    &lt;article&gt;
      &lt;h2&gt;Latest News&lt;/h2&gt;
      &lt;p&gt;Our latest news...&lt;/p&gt;
    &lt;/article&gt;
  &lt;/main&gt;
  
  &lt;footer&gt;
    &lt;p&gt;&amp;copy; 2024 My Website&lt;/p&gt;
  &lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
<p>These examples cover a range of common HTML functionalities and elements, helping to illustrate the basics and more advanced features of HTML.</p>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More