HTML - MEDIA & SEMANTIC ELEMENTS

HTML Media :

Multimedia elements (like audio or video) are storedin media files. The most common way to discover the type of a file is to look at the file extension.
Note: Only MP4, WebM and Ogg video are supported by the HTML standard.

HTML Video :
The HTML < video > element is used to show a video on a web page.
html-3

Video Attributes :
  • controls - The controls attribute adds video controls, like play, pause, and volume.
  • autoplay – It is used To start a video automatically.
  • muted – It is used to mute the video.
    Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.
  • loop – It is used to play the video in loop.


    • Audio :
    The HTML < audio > element is used to play an audio file on a web page.
    html4

    Audio Attributes :
  • controls - The controls attribute adds audio controls, like play, pause, and volume.
  • autoplay – It is used To start an audio automatically.
  • muted – It is used to mute the audio.
    • Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.
  • loop – It is used to play the audio in loop.


    • Grouping Elements :

  • Grouping our HTML content in containers makes it easier for us to target our elements with class and id selectors and makes it easier for us to position and style HTML via CSS.
  • These elements don’t add or change the content of our HTML. Instead, its main purpose is to provide an easy way to target and each group.
  • There are a number of additional tags that allow us to group related HTML content together. Some examples include
    < div > < span > < header > < section > < article > and < footer >.


    • HTML Semantic Elements :
    The element which describes the purpose of the element and the type of content that is inside them is known as Semantic Elements.
    Semantic elements = elements with a meaning.A semantic element clearly describes its meaning to both the browser and the developer.
    1. non-semantic elements: < div> and < span> - Tells nothing about its content.
    2. semantic elements: < form>, < table>, and < article> -Clearly defines its content. html-5

  • < section> - It represents the section of the document.
  • < article> - specifies independent, self-contained content.
  • < nav> - It defines a set of navigation links. Note: Notice that NOT all links of a document should be inside a < nav> element. The < nav> element is intended only for major block of navigation links.
  • < aside> - This element defines some content aside from the content it is placed in (like a sidebar). The < aside> content should be indirectly related to the surrounding content.
  • < header> - represents a container for introductory content or a set of navigational links. Note: You can have several < header> elements in one HTML document. However, < header> cannot be placed within a < footer>, < address> or another < header> element.
  • < footer> -It defines a footer for a document or section.
  • < main> - Specifies the main content of a document and and should be unique.
  • < mark> - This specifies the text that is highlighted.
  • < figure> - The < figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
  • < figcaption> - The < figcaption> tag defines a caption for a < figure> element. The < figcaption> element can be placed as the first or as the last child of a < figure> element.
  • < details> - Defines additional details that the user can view or hide.
  • < summary> - It defines a visible heading for a < details> element
  • < time> - It defines a date/time


    • (HTML - Form)