Categories
Web development

HTML summary Tag


HTML summary Tag

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

Categories
Web development

HTML details Tag


HTML details Tag

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

Categories
HTML Web development

HTML picture Tag


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

HTML picture Tag

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:

ghost

Enjoy coding!

Read also:

HTML map and area tags

HTML time tag

HTML form tag

Categories
HTML Web development

HTML source Tag


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

HTML source Tag

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:

ghost

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

Categories
HTML Web development

HTML caption tag

HTML caption tag

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

Categories
HTML Web development

HTML pre tag

HTML pre tag

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

Categories
HTML Web development

HTML audio tag

HTML audio tag

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?

Categories
HTML Web development

HTML del tag & ins tag


HTML del tag & 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

Categories
HTML Web development

HTML time tag



HTML time tag

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 to every Friday.

I have a meeting on .


Enjoy coding!

Read also:

HTML caption tag

HTML audio tag

HTML iframe tag

Categories
HTML Web development

HTML bdo tag

HTML bdo tag

The HTML <bdo> element specifies the text direction (<bdo> element override the current text direction.)

Example:

<!DOCTYPE html>
<html>
<body>

<p>How are you? <bdo dir="rtl">How are you?</bdo></p>

</body>
</html>

Output:

How are you? How are you?


Attributes:

dir (value- ltr/ rtl) – defines the text direction of the text inside <bdo> the tag.

ltr – left-to-right text direction.

rtl – right-to-left text direction.

Enjoy coding!