We’ve learnt HTML5 from scratch and now it’s time to create some apps using HTML.
In this post I am going to create a cat app using HTML without any style, so it is so ugly don’t be scared right now when you learn CSS language we will apply our CSS into our cat app.
First add h1 heading element into app.
<h1>Cat Photo App</h1>
We have HTML semantic elements, what does it mean.
Semantics elements are elements that they have special like: header, section, aside, main, article, footor.
Beside semantics elements we have non-semantic elements they don’t have special meanings like: div and span

Table of contents

  • Audio 🎶🎵
  • Video 🎬📽
  • Embedding📎

Audio 🔊🎶

YouTube is one of the largest and famous video sharing platform.
Now you may wonder how to add video and audio in a website.
It’s super easy like adding images into a website.
Look at the below Example:
<audio controls loop muted>
<source src="..." type="audio/mp3" type="audio/ogg">
Audio has some attributes like👇
* controls
* loop
* muted

Controls attribute displays play button and speaker icon and audio duration.
Loop attribute plays audio continuously.
Muted attribute mutes the audio by default.
Inside audio source element comes. …

If you have a Facebook account you have to submit your first name, lastname,email address or phone, password, date of birth, country, gender and more to Facebook to record your information in its servers or databases.
Today you learn how to create those kinda textfields you’ve experienced on Facebook.
As I mentioned earlier Facebook wants your firstname, lastname, email or phone,password, date of birth, gender, country.
All of these are input fields that we’re going to learn them.
### Like the below image which is from Facebook signup form👇

Sometimes you wanna create list with bullet but sometimes with number, this kinda of stuff are called list elements in HTML.
List elements are divided into two type:

1- Ordered list

2- Unordered list

Ordered list
Is a list which its list items are numbered at the beginning of the item.
For example you wanna list your school’s subjects as the total of your subjects be clear like below👇

1- Math

2- Physics

3- Geometry

4- Computer science

5- Probability

6- Chemistry

As you see the list items are numbered at the beginning of the item.
I hope you, am clear…

Sometimes you want to add `a` element to your website but still don’t know where it will link.
This is also handy when you’re changing the behavior of a link using JavaScript, which we’ll learn later.
For example the current value of href attribute is `https://www.freecodecamp.org`.

Replace href value with `#` symbol to create a dead link.
This is the most common usage of `#` that every developer use it.

<a href="#">Contact us</a>
If you have any questions and suggestions or any problem let me know in the comments section below 👇
Make sure you share ↗️ and like my story❤👍.

We learned how to add heading elements, paragraph element, image and anchor element, today it’s time to learn how to nest them within themselves.

Like example below:
If you notice we encapsulated one element within other element, let’s break it down a little bit for better understanding 👇
For example if we want to nest paragraph element inside heading elements we could do this👇
<h1>I am heading element<p>,but I am paragraph element encapsulated within heading elements</p></h1>
The above code is the general formula or method of nesting HTML elements within each other.
For if we want to convert an image into a link we could do this 👇
<a href="https://www.unsplash.com" target="_blank"><img src="https://www.unsplash.com/logo.png" alt="unsplash logo"></a>
If you have any questions or suggestions let me know in the comment section below 🗨👇👍.
Please like ❤ and share ↗️🏹

a (anchor) elements can also be used to create internal links to jump to different sections within a webpage.

To create an internal link, you assign a link's href attribute to a hash symbol # plus the value of the id attribute for the element that you want to internally link to, usually further down the page. You then need to add the same id attribute to the element you are linking to. An id is an attribute that uniquely describes an element.

Below is an example of an internal anchor link and its target element:
<a href="#contacts-header">Contacts</a>
<h2 id="contacts-header">Contacts</h2>
When users click the Contacts link, they’ll be taken to the section of the webpage with the Contacts header element.
Click here

You can use 'a’(anchor) element to link to content outside of your web page.
'a' elements need a web destination address called an href attribute. It also needs an anchor text to click on it.
For example:

<a href="https://www.unsplash.com">Unsplash</a>
The browser will display the anchor text which is 'Unsplash' when you click on it will takes you to 'https://www.unsplash.com’.
a (anchor) elements has some attributes like:
1. target
2. href
3. download

Target attribute takes some parameters like:
1. _blank
2. parent
3. itself
<a href=’https://www.freecodecamp.org' target=’_blank’>Go to freecodecamp</a>
<a href=’https://www.freecodecamp.org' target=’parent’>Go to freecodecamp</a>

<a href=’https://www.freecodecamp.org' target=’itself’>Go to freecodecamp</a>

HTML is a markup language that uses a special syntax or notation to describe the structure of a web page to the browser. HTML elements usually have opening and closing tags that surround and give meaning to content but some HTML elements don’t have closings tags like

<img src=’image path’/>

This is opening tag


This is closing tag


And self-closing tag is


HTML is the building block of a website like skeleton in our body and brick or stone in a house.
Someone says that HTML is a programming language but it’s a misconception.
The meaning of programming language is to add logic into your program…

In HTML img element is used to display every types of images like:jpg, png, jpeg...
It can also display svg.
img element has many attributes but the most common ones are:loading, src, srcset, height, width and alt.
When we wanna to put image into website we have target the path or address of that image we interested in it.
It’s implementation looks like below:

<img src=’yourimagepath/yourimagename.png’/>

Inside src attribute we can put local images path or online path.
The second important attribute is alt attribute, you have to always include this attribute into your img element because sometimes your image path isn’t…


I am a web developer who writes web development content for you to make web development easier

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store