HTML is a markup language, that defines the structure of the webpage content. HTML contains a series of elements, which helps you to write the content in a certain way you want, for example, a webpage contains headings, paragraphs, images, hyperlinks, and bold, italic words, all these can be achieved with HTML tags.

What is an HTML element?

An element in HTML contains an opening tag < >, a closing tag </> and content.

<p>This is a paragraph</p>

In the above code, the entire line <p>This is a paragraph </p> is an element, <p> is the opening paragraph tag, This is a paragraph is the content and </p> is the closing tag.

Heading and Paragraph Elements

There are six heading elements, each representing a different level of content on the webpage.

• <h1> tag represents the main heading/title of the webpage.

• <h2> tag represents the subheading/title of each chapter on the webpage.

• <h3> tag represents the sub subheading/subtitle of each chapter on the webpage.

• <h4>, <h5>, <h6> tags are used similarly based on the requirement on the webpage.

Coming to the paragraph tag, <p> tag represents a paragraph, it's used when writing paragraphs on the webpage, and it is a block-level element.

Lorem ipsum is a dummy text used to test how your HTML templates will look with real data. You can type Lorem100 and tab for 100 words of dummy data, you can specify how many ever words you want and click the tab button.

This is how the heading and paragraph elements look like:

Image, Audio and Video Elements

Image Element: <img> tag embeds the image into the webpage.

<!-- Syntax for img tag -->
<img class="css class name if any optioanal" src="image source path"
     alt="alternate data prints when the image doesn't load">

<img> tag contains few attributes, the src attribute inside the <img> tag is used to provide the image path, height and width attributes are used to specify the size of the image, and the alt attribute is to provide the alternate data to be displayed when the image doesn't load, In addition to this, you can include a class attribute for CSS styles or inline CSS too.

Audio Element:<audio> element embeds sound content in a webpage. It may contain one or more audio sources, represented using the src attribute or the sourceelement: the browser will choose the most suitable one.

<audio controls autoplay>
        <source src="audio file path" type="file type">
</audio>

Audio Element Attributes:

• autoplay - is a boolean attribute: if present, the audio will automatically begin playback, without waiting for the entire audio file to finish downloading.

• controls - this attribute helps the user to control audio playback, volume, seeking, and pause/resume playback.

• loop - is a boolean attribute: if present, the audio player will automatically seek back to the start upon reaching the end of the audio.

• muted - is a boolean attribute that indicates whether the audio will be mute initially. Its default value is false.

• source - used within the audio block to specify the audio to embed.

Video Element:<video> element embeds a media player which supports video playback into the webpage. You can use the <video> tag for audio content as well, but the <audio> tag will provide a more appropriate user experience.

<video controls width="250">
        <source src="video file path" type="file type">
</video>

Video Element Attributes:

• autoplay - is a boolean attribute: if present, the video automatically begins to play back as soon as it can, without stopping to finish loading the video.

• controls - this attribute helps the user to control audio playback, volume, seeking, and pause/resume playback.

• loop - is a boolean attribute: if present, the video player will automatically seek back to the start upon reaching the end of the video.

• muted - is a boolean attribute that indicates whether the audio in the video will be mute initially. Its default value is false.

• source - used within the audio block to specify the audio to embed.

• playsinline- is a boolean attribute that indicates that the video plays "inline", which is within the element's playback area.

• width - attribute is used to specify the width of the video to be displayed.

• height - attribute is used to specify the height of the video to be displayed.

• autopictureinpicture-is a boolean attribute if true indicates that the element should, toggle picture-in-picture mode when the user switches back and forth between the current webpage and another webpage.

• disablepictureinpicture- prevents the browser from suggesting a Picture-in-Picture context menu or requesting Picture-in-Picture automatically.

Here is a sample webpage, with the usage of image, audio and video tags