Tag: HTML tags

HTML summary Tag

Post author By Lena Stanley
Post date June 29, 2022

The HTML <summary> element specifies a visible heading for the <details> tag. The heading can be clicked to view/hide the details.

Example1:

<!DOCTYPE html>
<html>
<body>

<details>
  <summary>HTML</summary>
  <p>HTML defines the structure of the web page.</p>
</details>

</body>
</html>

Output:

HTML

HTML defines the structure of the web page.

Example2:

Style with CSS details and summary elements:

<!DOCTYPE html>
<html>
<head>
<style>
details > summary {
  padding: 5px;
  width: 200px;
  background-color: #f5f3f4;
  border: none;
  box-shadow: 2px 2px #333;
  cursor: pointer;
}

details > p {
  background-color: #f5f3f4;
  padding: 5px;
  margin: 0;
  box-shadow: 2px 2px #333
}
</style>
</head>
<body>

<details>
  <summary>HTML</summary>
  <p>HTML defines the structure of the web page.</p>
</details>

</body>
</html>

Output:

HTML

HTML defines the structure of the web page.

Enjoy coding!

Read also:

HTML caption tag

HTML input tag

HTML label tag

Tags HTML, HTML tag, HTML tags, summary

Web development

HTML details Tag

Post author By Lena Stanley
Post date June 29, 2022

The HTML <details> tag defines additional information that the user can open and close on demand.

Note: The HTML <summary> element is used in conjunction with the <details> tag to define a visible heading for the information.

Example:

<!DOCTYPE html>
<html>
<body>

<details>
  <summary>HTML</summary>
  <p>HTML defines the structure of the web page.</p>
</details>

</body>
</html>

Output:

HTML

HTML defines the structure of the web page.

Attributes:

open – defines that the details/ information should be visible to the user.

Read also:

HTML datalist tag

HTML picture Tag

HTML Select, Option and Optgroup tags

Tags details, HTML, HTML tag, HTML tags

Web development

Lena Design

Enjoy coding!

HTML draggable Attribute

HTML hidden Attribute

HTML alt Attribute

Tags HTML, HTML attribute, HTML tags, translate

Web development

HTML picture Tag

Post author By Lena Stanley
Post date April 4, 2022

The HTML picture element gives the users more flexibility in defining image resources.

The HTML picture element is used for art direction in responsive designs. Instead of having one image that is scaled on the viewport width, multiple images can be designed to nicely fill the browser viewport.

The HTML <picture> tag contains two tags: one or more <source> elements and one <img> tag.

Example:

Resize the browser window to load different images:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<picture>
  <source media="(min-width:650px)" srcset="https://lenadesign.org/wp-content/uploads/2022/01/css-diamond.gif">
  <source media="(min-width:465px)" srcset="https://lenadesign.org/wp-content/uploads/2021/12/cookie.png">
  <img src="https://lenadesign.org/wp-content/uploads/2021/06/ghost-example.jpg" alt="ghost" style="width:auto;">
</picture>

</body>
</html>

Output:

Enjoy coding!

Read also:

HTML map and area tags

HTML time tag

HTML form tag

Tags <picture>, HTML, HTML tag, HTML tags

Web development

HTML source Tag

Post author By Lena Stanley
Post date April 4, 2022

The HTML <source> tag defines multiple media resources for media elements, such as <audio>, <picture>, and <video>.

The HTML <source> element specifies alternative video/audio/image files which the browser can choose from, based on browser support (the browser will choose the first <support> it supports).

Example1:

The audio player with two source files (the browser will choose the first <source> it supports):

<!DOCTYPE html>
<html>
<body>

<audio controls>
  <source src="https://lenadesign.org/wp-content/uploads/2021/07/Wooden-Train-Whistle.mp3" type="audio/mpeg">
  <source src="https://lenadesign.org/wp-content/uploads/2021/07/Wooden-Train-Whistle.ogg" type="audio/ogg">
</audio>

</body>
</html>

Output:

Example2:

Use the HTML source element within <picture> element to specify different images based on the viewport width:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<picture>
  <source media="(min-width:650px)" srcset="https://lenadesign.org/wp-content/uploads/2022/01/css-diamond.gif">
  <source media="(min-width:465px)" srcset="https://lenadesign.org/wp-content/uploads/2021/12/cookie.png">
  <img src="https://lenadesign.org/wp-content/uploads/2021/06/ghost-example.jpg" alt="ghost" style="width:auto;">
</picture>

</body>
</html>

Output:

Resize the browser window to load different images:

Example3:

Use the HTML source element within <video> element to play the video:

<!DOCTYPE html> 
<html> 
<body> 

<video width="640" controls>
  <source src="https://videos.files.wordpress.com/lFj3lsG4/valentines-day-movie_dvd.mp4" type="video/mp4">
<source src="https://videos.files.wordpress.com/lFj3lsG4/valentines-day-movie_dvd.ogg" type="video/ogg">
</video>

</body> 
</html>

Output:

Attributes:

media (media_query) – accepts any valid media query specified in a CSS.

sizes – defines image sizes for different page layouts.

src (URL) – defines the URL of the media file (required when <source> is used in <audio> and <video>).

srcset (URL) – defines the URL of the media file (required when <source> is used in <picture>).

type (MIME-type) – defines the MIME-type of the resource.

Enjoy coding!

Read also:

HTML iframe tag

HTML link tag

HTML address tag

Tags <source>, HTML, HTML tag, HTML tags

Web development

HTML caption tag

Post author By Lena Stanley
Post date December 6, 2021

The HTML caption element specifies a table caption.

The HTML <caption> tag has to be inserted immediately after the <table> tag.

To align and place caption you can use CSS caption-side property or CSS text-align property.

Example:

<!DOCTYPE html>
<html>
<head>
<style>   
table, th, td {
        border-collapse: collapse;
        border: 1px solid black;
    }

</style>
</head>
<body>
<table>
<caption>List of employees:</caption>
  <tr>
    <th>Name</th>
    <th>Job Title</th>
    <th>e-mail</th>
  </tr>
  <tr>
    <td>Adam White</td>
    <td>IT Coordinator</td>
    <td>white@example.com</td>
  </tr>
  <tr>
    <td>Tom Brown</td>
    <td>Web Developer</td>
    <td>brown@example.com</td>
  </tr>
  <tr>
    <td>Matt Smith</td>
    <td>Network Administrator</td>
    <td>matt@example.com</td>
  </tr>
</table>
</body>
</html>

Output:

List of employees:
Name	Job Title	e-mail
Adam White	IT Coordinator	white@example.com
Tom Brown	Web Developer	brown@example.com
Matt Smith	Network Administrator	matt@example.com

Enjoy coding!

Read also:

HTML Table

HTML Table Headers

CSS border-collapse Property

Tags <caption>, caption, HTML, HTML tag, HTML tags

Web development

HTML pre tag

Post author By Lena Stanley
Post date July 19, 2021

The HTML <pre> element specifies pre-formatted text.

Text in a <pre> tag is displayed in a fixed-width font, and the text preserves both spaces and line breaks (the text will be displayed exactly as written in the HTML source code).

Example:

<!DOCTYPE html>
<html>
<body>

<pre>
Text in a pre tag
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
</pre>

</body>
</html>

Output:

Text in a pre tag
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.

To create a pre-formatted text with a fixed width (with CSS):

<!DOCTYPE html>
<html>
<body>

<div style="width:250px;overflow:auto">
<pre>This is a pre with a fixed width. It will use as much space as defined.</pre>
</div>

</body>
</html>

Output:

This is a pre with a fixed width. It will use as much space as defined.

Enjoy coding!

Read also:

HTML address tag

HTML meter tag

HTML map and area tags

Tags <pre>, HTML, HTML tag, HTML tags

Web development

HTML audio tag

Post author By Lena Stanley
Post date July 6, 2021

The HTML <audio> element is used to embed sound content in a document (such as music or other audio streams).

The HTML <source> element allows you to specify alternative audio files which the browser may choose from.

Example:

<!DOCTYPE html>
<html>
<body>

<audio controls>
  <source src="https://lenadesign.org/wp-content/uploads/2021/07/Wooden-Train-Whistle.mp3" type="audio/mpeg">
</audio>

</body>
</html>

Output:

Attributes:

autoplay (value- autoplay) – defines that the audio will start playing as soon as it is ready.

Syntax:

<audio autoplay>

controls (value- controls) – defines that audio controls should be displayed (play/pause button).

Syntax:

<audio controls>

loop (value- loop) – defines that the audio will start over again (every time it is finished).

Syntax:

<audio loop>

muted (value- muted) – defines that the audio output should be muted.

Syntax:

<audio muted>

preload (value- auto/ metadata/ none) – defines if and how the author thinks the audio should be loaded when the page loads.

<audio preload="auto|metadata|none">

src (value- URL) – defines the URL of the audio file.

<audio src="URL">

Example:

<!DOCTYPE html>
<html>
<body>

<audio src="https://lenadesign.org/wp-content/uploads/2021/07/Wooden-Train-Whistle.mp3" controls>
</audio>

</body>
</html>

Output:

Enjoy coding!

Read also:

HTML iframe tag

HTML video tag

How to embed the YouTube video in HTML?

Tags <audio>, HTML, HTML tag, HTML tags

Web development

HTML del tag & ins tag

Post author By Lena Stanley
Post date July 6, 2021

HTML del & ins tags — HTML del tag and ins tag.

The HTML <del> element specifies the text that has been deleted from a document (browsers usually strike a line through the deleted text).

The HTML <ins> element specifies a text that has been inserted into a document (browsers usually underline inserted text).

Example:

<!DOCTYPE html>
<html>
<body>

<p>My favourite ice cream flavour is <del>strawberry</del> <ins>chocolate</ins>!</p>

</body>
</html>

Output:

My favourite ice cream flavour is ~~strawberry~~ chocolate!

Attributes:

cite (value- URL) – defines a URL to a document that explains the reason why the text was inserted/changed.

datetime (value- YYYY-MM-DDThh:mm:ss) – defines the date and time when the text was inserted/changed.

Enjoy coding!

Read also:

HTML progress tag

HTML pre tag

Tags <del>, <ins>, HTML, HTML tag, HTML tags

Web development

HTML time tag

Post author By Lena Stanley
Post date July 6, 2021

The HTML <time> element specifies a specific time (or datetime).

The HTML datetime attribute of this tag is used to translate the time into a machine-readable format so that browsers can offer to add date reminders through the user’s calendar.

Example:

<!DOCTYPE html>
<html>
<body>

<p>We have a job meeting from <time>11:00</time> to <time>12:00</time> every Friday.</p>

<p>I have a meeting on <time datetime="2021-12-03 18:00">Friday</time>.</p>

</body>
</html>

Output:

We have a job meeting from 11:00 to 12:00 every Friday.

I have a meeting on Friday.

Enjoy coding!

Read also:

HTML caption tag

HTML audio tag

HTML iframe tag

Tags <time>, HTML, HTML tag, HTML tags