HTML stands for Hyper Text Markup Language & we will learn HTML from beginning in this Learn HTML For WordPress tutorial.
Using HTML we can create basic design website layout & to make website beautiful we will learn CSS after this Learn HTML For WordPress tutorial. So in this tutorial we will learn how to make website skeleton/layout & then CSS to implement design.
For example, to make a house we need to build a structure first & then paint to make it beautiful. So here HTML is the structure of a website & CSS is the paint.
Here is an image to get a visualization.
Prerequisites
Not required & anyone can learn this.
HTML Editor
Below some HTML editor’s & we can use one. Before starting HTML coding need to install it first.
- Notepad++ (I will use this software for editing)
- NetBeans
- Sublime Text
- Notepad (your computer default editor)
Creating our first HTML document
In this Learn HTML For WordPress tutorial at first let’s create a new file in editor we have just installed. Then copy below HTML code & paste it. Save it as firsthtmlcode.html
.html is the extension for HTML file.
<!DOCTYPE html>
<html>
<head>
<title>This is page title</title>
</head>
<body>
<h2>This is a Heading</h2>
<p>This is a Paragraph</p>
</body>
</html>
Editor Screenshot
Open this file firsthtmlcode.html in your web browser & will get below output.
Browser Screenshot
Understanding above code
<!DOCTYPE html> is the HTML document type declaration. Web browser will understand that it’s a HTML document.
<html> is the container for all other HTML tags. It has a closing sign </html>
<head> is the container of the tags those will provide current HTML document information. <title> is the one of those tags & it will define title of this document. This title you will find in your web browser tab. Both have closing sign </head> </title>
<body> is the container for visible content that will show in your browser. It has a closing sign </body>
<h2> defines heading two & closing sign </h2>. There some other headings like <h1>, <h3>, <h3>, <h4>, <h5>, <h6>.
<p> means paragraph & closing sign </p>.
Hope you are happy after creating your first HTML document. Next we will learn HTML elements & tags.
Let’s continue Learn HTML For WordPress tutorial.
HTML Elements & Tags
In this Learn HTML For WordPress tutorial from our previous example, h2 is an element & this consists of opening tag <h2> & closing tag </h2>.
So p is an element & it has tags <p> </p>. Same for other elements html, head, title, body.
Don’t forget to include closing tag except few elements.
There some empty elements those don’t have any closing tag like <br> (line break), <hr> (horizontal ruler), <img> (image) & some others.
HTML tags are not case sensitive that means <p> & <P> same but W3C (World Wide Web Consortium) recommends lowercase in HTML.
HTML Attributes
We will learn about HTML attributes in this Learn HTML For WordPress tutorial. It provides additional information about element & should be added in starting tag in this format name=”value”.
Below some common attributes used in web page design:
HTML href Attribute
<a href="https://www.google.com" target="_blank">This is a link</a>
Here a is an element used to add link, <a> is opening tag & </a> is closing tag as previous tags. “This is a link” is content for element a. After clicking on this it will go to https://www.google.com site.
So here href is attribute name & https://www.google.com is value. Another attribute target is added with it’s value _blank & we will learn more in HTML Links section in this Learn HTML For WordPress tutorial.
You can try adding this code in HTML file to see the output.
HTML src Attribute
<img src="html_image.jpg">
Here using img element we can show an image. This don’t have any closing tag but only starting tag <img>
Just use any image with name html_image.jpg to see the result.
In addition, we can add width & height attribute in <img> tag.
<img src="html_image.jpg" width="400" height="300">
By default width & height will show in pixels, so image will show as width 400px & height 300px.
Another attribute used in <img> tag is alt.
<img src="html_image.jpg" width="400" height="300" alt="this is html image">
If image source (src) not available somehow then it will show alt tag value “this is html image” rather than blank page. This alt attribute is important for good SEO (Search Engine Optimization). That means search engine can easily understand what is that image for. So this image will show in search result.
HTML style Attribute
<h2 style="color:blue;">This is a blue Heading</h2>
Using style attribute we can do some design. Like here “This is a blue Heading” will show as blue. After adding this in file below the output:
This kind of styling is called inline styling. We will learn more in CSS tutorial.
HTML id Attribute
<h2 id="html">This is a Heading with id attribute which value is: html</h2>
In one web page id value will be unique. If we create same id in another tag then this will not be a valid HTML. For example, below code:
<h2 id="html">This is a Heading with id attribute which value is: html</h2>
<p id="html">This is a paragraph with id attribute which value is: html</p>
So in both h2, p element used same id & this will not be a valid HTML web page.
To make it valid can write this below:
<h2 id="htmlOne">This is a Heading with id attribute which value is: htmlOne</h2>
<p id="htmlTwo">This is a paragraph with id attribute which value is: htmlTwo</p>
Here both id is different & it’s valid HTML.
We will learn more about id in CSS tutorial as this will be mainly used to style pages.
HTML class Attribute
<h2 class="html">This is a Heading with class attribute which value is: html</h2>
class can have same value for multiple tags. So id is unique but class can be unique or not.
Like below code:
<h2 class="html">This is a Heading with class attribute which value is: html</h2>
<p class="html">This is a paragraph with class attribute which value is: html</p>
This is valid code & below another code:
<h2 class="htmlOne">This is a Heading with class attribute which value is: htmlOne</h2>
<p class="htmlTwo">This is a paragraph with class attribute which value is: htmlTwo</p>
This is also valid code.
We will learn more about class in CSS tutorial to style page mainly.
HTML title Attribute
<h2 title="Heading two title">This is Heading Two</h2>
This mainly used for element suggestion & will show after mouse over this “This is Heading Two”.
HTML Headings
Heading is used to show content in a structured way. There are 6 types of headings.
Let’s give an example in this Learn HTML For WordPress tutorial.
Here is an example:
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
Here is the output:
You can try adding code for other two headings h1 & h6.
h1 is used for most important heading & h6 is less important heading. By default browser will show h1 in larger font & h6 will show in smaller font. So based on content heading will be placed in website.
For search engine it’s very important as heading is used for indexing website content & structure.
HTML Paragraphs
Paragraph is used to add text in website & it’s defined with p element.
Here is a paragraph code:
<p>This is first paragraph</p>
<p>This is second paragraph</p>
Here is the output:
Paragraph will be commonly used in website.
HTML Styles
This is used to design web page & can be done with style attribute.
Let’s use some examples in our Learn HTML For WordPress tutorial.
Here is the syntax:
<tagname style="property:value;"><tagname>
For h2 tag we can write:
<h2 style="color:red;">This is Heading 2<h2>
So here h2 will show red color & below the output:
We can add more property with value in same style.
For example:
<h2 style="color:red;font-size:50px;">This is Heading 2<h2>
Below the output:
There are 3 methods to add styles in HTML. In this Learn HTML For WordPress tutorial we will learn these Inline, Embedded & External styles method.
HTML Inline Style
In this method styles can be implemented under a starting tag directly & here is an example:
<h2 style="color:orange;">This is Heading 2 with Inline Style<h2>
In this code, color is orange in style property under <h2> tag. So this way adding style is called inline styles.
Below the output:
HTML Embedded Style
If we want to make previous inline styles code in embedded styles method then we can write code like this below in full format:
<!DOCTYPE html>
<html>
<head>
<title>This is page title</title>
<style>
h2 {
color: orange;
}
</style>
</head>
<body>
<h2>This is Heading 2 with Embedded Style<h2>
</body>
</html>
So in this method under <style></style> tag design for h2 is added using second brackets { }. This will be added under <head></head>.
Here is the output:
So it’s showing same result like Inline styles.
HTML External Style
We will use same example for external styles method.
Before writing code need to create a CSS file first as like we have created our first HTML file firsthtmlcode.html but .css will be the file extension. To keep it organized let’s create this file under css directory with file name style.css & add below code in this file.
h2 {
color: orange;
}
Editor Screenshot
So here is the final code:
<!DOCTYPE html>
<html>
<head>
<title>This is page title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h2>This is Heading 2 with External Style<h2>
</body>
</html>
Here in <link> starting tag style.css is included under href attribute & rel attribute is used to define the relationship between the linked file and the HTML document. As it’s a css file so rel will be stylesheet.
Here is the output:
There is another way to load external styles using @import statement.
<!DOCTYPE html>
<html>
<head>
<title>This is page title</title>
<style>
@import url("css/style.css");
</style>
</head>
<body>
<h2>This is Heading 2 with Embedded Style using @import<h2>
</body>
</html>
Below the output:
External styles is the best way to add styles. Also @import method may cause website performance issues. So in general we should avoid using @import method & should include styles using link element.
Inline styles have the highest priority & external styles is the lowest. For example, p element color is set to red in inline styles & green for external styles, in this case p will show as red color.
HTML Text Formatting
In HTML text can be formatted in different ways based on project requirements & we will learn it in this Learn HTML For WordPress tutorial.
Here is an example:
<i>This text is italic</i>
Here i element defines italic text, it has starting tag <i> & closing tag </i>.
Below the output:
Here will show some commonly used HTML formatting elements.
HTML <b> & <strong> Tags
To make bold text b element will be used & here is an example:
<b>This text is bold</b>
It has starting tag <b> & closing tag </b>.
Below the output:
To make strong text strong element will be used, starting tag <strong> & closing tag </strong>.
Here is an example:
<strong>This text is strong</strong>
Output below:
b & strong element will show same output. Only difference is for strong it will add extra importance. So text under this tag <strong></strong> will indicate strong importance in content.
HTML <i> & <em> Tags
To make italic text i element will be used with starting tag <i> & closing tag </i>.
Here is an example:
<i>This text is italic</i>
Below the output:
To make emphasized text em element will be used, starting tag <em> & closing tag </em>.
Here is an example:
<em>This text is emphasized</em>
Output below:
i & em element will show same output. Only difference is importance & em will indicate more importance in content.
HTML <big> Tag
To make bigger text big element will be used with starting tag <big> & closing tag </big>.
Here is an example:
<p>HTML <big>bigger text</big> Formatting</p>
Below the output:
HTML <small> Tag
To make smaller text small element will be used with starting tag <small> & closing tag </small>.
Here is an example:
<p>HTML <small>smaller text</small> Formatting</p>
Below the output:
Let’s learn some more HTML text formatting tags in this Learn HTML For WordPress tutorial.
HTML <del> Tag
To make deleted or removed text del element will be used. Is has starting tag <del> & closing tag </del>.
Here is an example:
<p>To give more importance <del>b element</del> strong element will be used</p>
Below the output:
HTML <sub> Tag
To make subscript text sub element will be used with starting tag <sub> & closing tag </sub>.
Here is an example:
<p>HTML <sub>subscript text</sub> Formatting</p>
Below the output:
HTML <sup> Tag
To make superscript text sup element will be used with starting tag <sup> & closing tag </sup>.
Here is an example:
<p>HTML <sup>superscript text</sup> Formatting</p>
Below the output:
HTML <u> Tag
To make underlined text u element will be used with starting tag <u> & closing tag </u>.
Here is an example:
<p>HTML <u>underlined text</u> Formatting</p>
Below the output:
HTML <div> & <span> Tags
To make grouping content div & span elements will be used. Using <div> tag can create sections & subsections to group together.
Here is an example:
<div class="sectionOne">
<h2>This is a heading</h2>
<p>This is a paragraph</p>
</div>
<div class="sectionTwo">
<h2>This is another heading</h2>
<p>This is another paragraph</p>
</div>
So here two sections created using <div> tag. First section has a class name “sectionOne” & second section class name “sectionTwo”. We can use other attributes as well like id, style etc. So here under both <div> tag <h2> & <p> tags placed in a group.
This code output is not that much important here. Main thing is how we can structure content in a group.
<span> tag will be used to group inline elements only.
Here is another example:
<p>HTML <span>span tag</span> Formatting</p>
HTML <cite> Tag
To identify the the source of a quotation or creative work cite element will be used with starting tag <cite> & closing tag </cite>.
Here is an example:
<cite>— Abraham Lincoln</cite>
Below some more HTML text formatting tags in this Learn HTML For WordPress tutorial.
HTML <blockquote> Tag
To make a quotation blockquote element will be used with starting tag <blockquote> & closing tag </blockquote>.
Here is an example:
<blockquote>
<p>If there is anything that a man can do well, I say let him do it. Give him a chance.</p>
<cite>— Abraham Lincoln</cite>
</blockquote>
Below the output:
HTML <address> Tag
To add contact information address element will be used with starting tag <address> & closing tag </address>.
Here is an example:
<address>
Office address<br>
Phone number<br>
Email address<br>
Website URL
</address>
<br> tag is used for line break.
Below the output:
HTML Comments
In this Learn HTML For WordPress tutorial we will learn how to add comments. To add comments in HTML code comment tag will be used. So that it will be more understandable while writing/editing HTML codes.
Here is the syntax to write comments:
<!-- This is a comment -->
Comment starting tag <!– & closing tag –>
Example below:
<!-- heading starts here -->
<p>This is a heading</p>
<!-- paragraph starts here -->
<p>This is a paragraph</p>
Below the output:
Comments are not visible in the browser.
HTML Colors
In HTML there some color formats & mostly used are predefined color names, HEX colors, RGB colors & RGBA colors. These colors can set as Background Color, Text Color, Border Color etc. We will learn more about HTML colors in this Learn HTML For WordPress tutorial.
HTML Color Names
There some predefined color names & we can use those in HTML.
Here is an example:
<h2 style="background-color:red;">This is Red background using Color Name</h2>
<h2 style="background-color:white;">This is White background using Color Name</h2>
<h2 style="background-color:black;color:white;">This is Black background using Color Name (used white text color)</h2>
So here red, white & black are predefined color names.
Below the output:
HTML HEX Colors
In HTML, to declare color in hexadecimal (HEX) here is the syntax:
#rrggbb
Here rr (red), gg(green) & bb(blue) are hexadecimal values between 00 & ff.
For example, #ff0000 will show red color as rr is set to it’s highest value ff & gg, bb is 00.
#ffffff will show white color as all is set to ff & #000000 will show black color as all is 00.
Here is the HTML code:
<h2 style="background-color:#ff0000;">This is Red background in HEX format</h2>
<h2 style="background-color:#ffffff;">This is White background in HEX format</h2>
<h2 style="background-color:#000000;color:#ffffff;">This is Black background in HEX format (used white text color)</h2>
Below the output:
HTML RGB Colors
In HTML, colors can be declared using RGB color format & this is the syntax:
rgb(red, green, blue)
Each parameter red, green & blue defines the intensity of the color between 0 & 255.
For example, rgb(255, 0, 0) will show red color because red is set to it’s highest value 255 & green, blue is set to 0.
If we set all parameter to it’s highest value 255 then color code will be like this rgb(255, 255, 255) & it will show as white color.
If all value is set to it’s lowest value 0 then code will be rgb(0, 0, 0) & it means black color.
Here is the HTML code:
<h2 style="background-color:rgb(255, 0, 0);">This is Red background in RGB format</h2>
<h2 style="background-color:rgb(255, 255, 255);">This is White background in RGB format</h2>
<h2 style="background-color:rgb(0, 0, 0);color:rgb(255, 255, 255);">This is Black background in RGB format (used white text color)</h2>
Below the output:
HTML RGBA Colors
RGBA is the extension of RGB colors & it’s syntax is:
rgba(red, green, blue, alpha)
Here alpha defines opacity & it has value from 0.0 (fully transparent) to 1.0 (not transparent & it’s default value).
Here is an example:
<h2 style="background-color:rgb(255, 0, 0, 0);">This is Red background in RGBA format with opacity 0</h2>
<h2 style="background-color:rgb(255, 0, 0, 0.1);">This is Red background in RGBA format with opacity 0.1</h2>
<h2 style="background-color:rgb(255, 0, 0, 0.2);">This is Red background in RGBA format with opacity 0.2</h2>
<h2 style="background-color:rgb(255, 0, 0, 0.3);">This is Red background in RGBA format with opacity 0.3</h2>
<h2 style="background-color:rgb(255, 0, 0, 0.4);">This is Red background in RGBA format with opacity 0.4</h2>
<h2 style="background-color:rgb(255, 0, 0, 0.5);">This is Red background in RGBA format with opacity 0.5</h2>
<h2 style="background-color:rgb(255, 0, 0, 0.6);">This is Red background in RGBA format with opacity 0.6</h2>
<h2 style="background-color:rgb(255, 0, 0, 0.7);">This is Red background in RGBA format with opacity 0.7</h2>
<h2 style="background-color:rgb(255, 0, 0, 0.8);">This is Red background in RGBA format with opacity 0.8</h2>
<h2 style="background-color:rgb(255, 0, 0, 0.9);">This is Red background in RGBA format with opacity 0.9</h2>
<h2 style="background-color:rgb(255, 0, 0, 1);">This is Red background in RGBA format with opacity 1</h2>
Below the output:
To get color code easily, can use “Pixie Color Picker” software or any online color picker tool.
Here is an screenshot how “Pixie Color Picker” will look like after installing it:
Cursor was on white background, that’s why showing rgb value (255,255,255).
Let’s learn some more HTML colors in this Learn HTML For WordPress tutorial.
HTML Background Color
We have used background color in our previous examples.
Here is another example:
<p style="background-color:orange;">This is Orange background color</p>
Below the output:
HTML Text Color
We can set text color in HTML using color property.
Here is an example:
<p style="color:blue;">This is a text with Blue text color</p>
Below the output:
HTML Border Color
We can set border color in HTML using border property.
Here is an example:
<p style="border:2px solid black;">This is a text with 2px width & solid black color</p>
Below the output:
HTML Links
Using HTML links we can normally make a link in text, image & in this Learn HTML For WordPress tutorial we will learn using some examples.
Syntax for HTML links:
<a href=”url”>link text</a>
a means anchor & it has starting tag <a> & ending tag </a>. Inside href attribute destination URL will be added.
It’s linked with a text “link text” & can be linked with an image tag as well like this:
<a href=”url”><img src=”image_url.jpg”></a>
Here is an example with text link:
<a href="https://www.google.com/" target="_blank">google.com</a>
target=”_blank” will learn in next section.
Below the output:
HTML Links target Attribute
target attribute defines where to open the linked URL & it has following values:
_self : This is default value & this will open a new page in same window.
_blank: This will open a new page in a new window. For external URL this value will be added.
_parent: This will open a new page in it’s parent frame. You will understand more in iframe element.
_top: This will open a new page in same window cancelling all the frames. Learn more in iframe element.
Here is an example for _self:
<a href="https://wpupskills.com/html/" target="_self">Opens in same window</a>
Below the output:
Here is an example for _blank:
<a href="https://wpupskills.com/html/" target="_blank">Opens in new window</a>
Below the output:
Here is an example for _parent:
<a href="https://wpupskills.com/html/" target="_parent">Opens in parent frame</a>
Below the output:
Here is an example for _top:
<a href="https://wpupskills.com/html/" target="_top">Opens in Body</a>
Below the output:
In this Learn HTML For WordPress tutorial will show some more HTML links with examples below:
HTML Links Page Section
In this method we can create a link that will move to a specific page section after clicking on it.
Let’s create a section first & below the example:
<p id="sectionOne" style="background-color:orange;">Section One</p>
As we have learned in this tutorial id is unique, so have created a unique section. Added a background color so that will be easy to understand.
Next will create a link & here is the code:
<a href="#sectionOne">Move to Section One</a>
Inside href attribute it’s value is #sectionOne & # is used as sectionOne is an id. So after clicking on “Move to Section One” this page will move to this section “Section One”.
Here is the overall output:
Section One
If you click on above link then will understand it more.
HTML Links Image
Here is an example to link with an image:
<a href="https://www.google.com/" target="_blank"><img src="https://wpupskills.com/wp-content/uploads/2020/03/HTML_Links_Image_Google.jpg"></a>
Here used target attribute with value _blank so that link will open in a new tab as it’s an external link.
Below the output:
HTML Links E-mail
In HTML we can make an email link using mailto & here is an example:
<a href="mailto:someone@example.com">HTML E-mail link</a>
HTML Links Phone Number
In HTML phone number can be linked with tel: & here is an example:
<a href="tel:(000)000-0000">HTML Phone Number</a>
If we want to make a skype call then can use callto: instead of tel: & below an example:
<a href="callto:(000)000-0000">HTML Phone Number Skype Call</a>
In different browser versions this may work differently.
HTML Links title Attribute
We can add extra information about the link using title attribute. This will show on mouse over the link.
Here is an example:
<a href="https://www.google.com/" title="Go to Google.com" target="_blank">google.com</a>
Below the output:
Mouse over the link & it will show the title.
HTML Links Color
In this Learn HTML For WordPress tutorial let’s learn about HTML link colors.
HTML link have three colors by default.
- For unvisited link it’s blue color & underlined.
- For visited link it’s purple color & underlined.
- For active link it’s red color & underlined. Link is active when you click on it. To understand more you can just keep pressing on a link then this will appear.
Here is an example:
<a href="https://www.google.com/" target="_blank">This is a link before visiting</a>
Below the output:
After visiting this link output will like this:
After clicking on a link it will show active color & below the output:
After mouse over any link it will show same design but we can change this functionality after adding some CSS code.
Now if we want to change this color then can change it using CSS.
Follow below code:
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: brown;
text-decoration: none;
}
a:visited {
color: green;
text-decoration: none;
}
a:hover {
color: orange;
text-decoration: underline;
}
a:active {
color: navy;
text-decoration: underline;
}
</style>
</head>
<body>
<a href="https://www.google.com/" target="_blank">google.com</a>
</body>
</html>
At first before visiting the link it will show brown color & without underline as it’s written under a:link code & output will show like this:
After visiting the link it will show green color & without underline as it’s under a:visited & output is below:
For mouse over link we have added some code under a:hover, so it will show orange color & with underline when mouse over on it & below the output:
For active link it will show navy color & with underline as it’s written under a:active & output below:
a:link means link with href & if we write only a then it will mean without href. But we can use a normally.
HTML Links Button
We can make link as a button using some CSS code.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
a {
color: black;
text-decoration: none;
background-color: orange;
padding: 20px;
display: inline-block;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
}
a:hover {
background-color: red;
}
</style>
</head>
<body>
<a href="#">This is a Button</a>
</body>
</html>
Here for href used # so that after clicking it will not go anywhere. In a there some other CSS code & we will learn more in our CSS tutorial.
This is how link will show as a button:
HTML File Paths
In HTML, file path describes the location of a file based on website’s folder structure. File paths are used when linking to files like:
- Website URL
- Image URL
- Style sheet URL
- JavaScript URL
There are two types of file path: Absolute File Path & Relative File Path.
In this Learn HTML For WordPress tutorial let’s learn more about it.
HTML Absolute File Path
Absolute file path is the full URL & here is an example:
<img src="https://wpupskills.com/dir/subdir/images/picture.png">
Here under src it has a full URL (this is a sample URL) for an image including domain name (base URL). So this is an absolute file path.
HTML Relative File Path
Relative file path points to a file based on current page. Here your current HTML file’s location is the current page.
Let’s consider our current HTML file is located under folder name “subdir” & it has below folder structure including domain name:
https://wpupskills.com/dir/subdir/images/picture.png
Here is an example:
<img src="/images/picture.png">
In this path structure images folder will point to the root directory. In this case full URL will be:
https://wpupskills.com/images/picture.png
Here is another example:
<img src="images/picture.png">
As our current HTML file is under “subdir” folder, so full URL will be:
https://wpupskills.com/dir/subdir/images/picture.png
Another example below:
<img src="../images/picture.png">
In this case file will point to one level above the current folder. So full URL will be:
https://wpupskills.com/dir/images/picture.png
Summary: / sign means it will point to root directory & .. sign means one level above the current folder & without any of these two sign means current directory.
Best way is to use relative file path, so when you will move your computer (localhost) files to live server then all file paths will work automatically & you don’t need to change base URL.
HTML Images
In this Learn HTML For WordPress tutorial we have learned before how to show an image. Some more information will include here.
In HTML <img> tag will be used to show an image & it don’t have any closing tag.
Here is the syntax:
<img src="url">
src defines the URL of the image.
Here is an example:
<img src="https://wpupskills.com/wp-content/uploads/2020/03/html_css_paint.jpg">
HTML Image alt Attribute
alt attribute provides alternative information for the image.
Here is an example:
<img src="https://wpupskills.com/wp-content/uploads/2020/03/html_css_paint.jpg" alt="HTML CSS Paint">
If somehow image URL is missing or slow internet connection then this alt text will show rather than a blank image. Also search engines can’t read what an image is all about, in that case using alt attribute they can understand it.
To understand it more here is another example:
<img src="" alt="HTML CSS Paint">
src is blank here, so after viewing the page it will not show blank but will show this text “HTML CSS Paint” as it’s under alt attribute.
Best practice is to add alt for all images, search engines will understand it & it’s best for SEO (Search Engine Optimization).
HTML Image Size Width & Height
width & height attribute will be used to adjust image size.
Here is an example:
<img src="https://wpupskills.com/wp-content/uploads/2020/03/html_css_paint.jpg" width="400" height="200">
This will show a resized image & by default width & height value will be in pixels.
If don’t use any width & height attribute then image will show in it’s normal size. So you can set it based on project requirements.
There is another way we can set image size using style attribute.
Here is an example:
<img src="https://wpupskills.com/wp-content/uploads/2020/03/html_css_paint.jpg" style="width:400px;height:200px;">
Both example will show same results.
Best practice will be using style attribute.
HTML Image Floating
We can float an image to left or right of a text using CSS.
To make float left here is an example:
<img src="https://wpupskills.com/wp-content/uploads/2020/03/html_css_paint.jpg" style="float:left;width:200px;height:100px;">Image will float to the left of this text.
For right floating an example below:
<img src="https://wpupskills.com/wp-content/uploads/2020/03/html_css_paint.jpg" style="float:right;width:200px;height:100px;">Image will float to the right of this text.
We will learn more about float in our CSS tutorial.
HTML Background Images
In HTML, background image can be specified on almost all elements.
Here is an example:
<div style="background-image: url('https://wpupskills.com/wp-content/uploads/2020/03/html_image_featured.png');">HTML Background Image</div>
You can check how it’s showing in your screen & hope it will not show that much good. In this case we need to add some more CSS code & here is another example:
<div style="background-image: url('https://wpupskills.com/wp-content/uploads/2020/03/html_image_featured.png');background-size: cover;background-repeat: no-repeat;background-position: center;text-align: center;padding: 160px 0;background-color: #f7f7f7;color: red;font-weight: bold;font-size: 50px;">HTML Background Image</div>
Below the output:
In above code, we have added background-size with it’s value cover. This will help image to resize to cover entire container. In this way image may cut off but will cover entirely based on container width, height.
Background image can have width & height length like this:
background-size: 500px 300px;
Here width is 500px & height is 300px. If we don’t set height then it’s height will be auto based on width.
Here is all values for background-size:
background-size: auto | length | percentage | cover | contain | initial | inherit;
Here auto is the default value.
You can try changing values in your code to check how it’s showing. So you need to use one value based on your needs.
In above code, added background-repeat value no-repeat. So background will not repeat here.
Other values we can add like this:
background-repeat: repeat | repeat-x | repeat-y | no-repeat | initial | inherit;
Here repeat is the default value.
background-position: center is used to show image in center position. This have some other values like:
background-size: left top | left center | left bottom | right top | right center | right bottom | center top | center center | center bottom | percentage | initial | inherit;
We will learn more in our CSS tutorial.
HTML Tables
In HTML, table element will be used to show tabular data in a structured way. It has starting tag <table> & ending tag </table>.
Let’s use some example in this Learn HTML For WordPress tutorial.
Here is an example:
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Name 1</td>
<td>60</td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td>70</td>
</tr>
</table>
In this example, each row is defined with tr element with it’s starting tag <tr> & ending tag </tr>. Table header is defined as th & it has starting tag <th> & ending tag </th>. Also td element is defined as table data/cell with it’s starting tag <td> & ending tag </td>.
Below the output:
By default, th will show as bold & centered. To understand more here is another example:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Name 1</td>
<td>60</td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td>70</td>
</tr>
</table>
</body>
</html>
In this code for table width 100% is added under style element, so table will show full width.
Below the output:
If we want to align heading text to left then text-align property will be used for th.
Example below:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Name 1</td>
<td>60</td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td>70</td>
</tr>
</table>
</body>
</html>
Here for th element text-align is left, so header text will show left aligned.
Below the output:
HTML Table Border
We can add border in HTML table using border property.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Name 1</td>
<td>60</td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td>70</td>
</tr>
</table>
</body>
</html>
In this code, under style element border is added for table, th, td in a common way. We can expand this code like this below:
table {
border: 1px solid black;
}
th {
border: 1px solid black;
}
td {
border: 1px solid black;
}
Always try to add CSS in a common way like this table, th, td { }, so it will be fast execution.
Below the output:
HTML Table Border Collapse
If we want to collapse all borders into one border then border-collapse property will be used.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Name 1</td>
<td>60</td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td>70</td>
</tr>
</table>
</body>
</html>
Below the output:
HTML Table Cell Padding
In HTML table, padding can be added using CSS padding property.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Name 1</td>
<td>60</td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td>70</td>
</tr>
</table>
</body>
</html>
In above code, padding is added for th, td. So output will show like this below:
HTML Table Merging Columns
To merge more than one column then colspan attribute will be used.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th colspan="2">Name</th>
</tr>
<tr>
<td>1</td>
<td>First Name 1</td>
<td>Last Name 1</td>
</tr>
<tr>
<td>2</td>
<td>First Name 2</td>
<td>Last Name 2</td>
</tr>
</table>
</body>
</html>
Below the output:
HTML Table Merging Rows
To merge more than one row then rowspan attribute will be used.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<td>1</td>
</tr>
<tr>
<th rowspan="2">Name</th>
<td>First Name 1</td>
</tr>
<tr>
<td>Last Name 1</td>
</tr>
</table>
</body>
</html>
Below the output:
HTML Table Nested Tables
We can add one table inside another table in HTML.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>
<table>
<tr>
<td>Name 1</td>
<td>Name 2</td>
</tr>
<tr>
<td>Name 3</td>
<td>Name 4</td>
</tr>
</table>
</td>
<td>60</td>
</tr>
</table>
</body>
</html>
Here we have added another table under td element & below the output:
HTML Table Styling
We can design a table using CSS code based on requirements.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 20px;
}
th {
background: black;
color: white;
}
table tr:nth-child(even) {
background-color: #eee;
}
table tr:nth-child(odd) {
background-color: #fff;
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Name 1</td>
<td>60</td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td>70</td>
</tr>
<tr>
<td>3</td>
<td>Name 3</td>
<td>80</td>
</tr>
</table>
</body>
</html>
In above code, tr:nth-child(even) means even table rows & tr:nth-child(odd) means odd table rows.
Below the output:
HTML Table Grouped Header & Body
We can group header & body content using thead & tbody element respectively.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 20px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Name 1</td>
<td>60</td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td>70</td>
</tr>
</table>
</tbody>
</body>
</html>
In above code, table heading is grouped under thead element with it’s starting tag <thead> & ending tag </thead>. Body content is grouped under tbody element & it has starting tag <tbody> & ending tag </tbody>.
Below the output:
In output there is no difference but table is created in a more structured way.
HTML Lists
In HTML lists are used to present information in the most efficient way. Inside a list item we can add text, image, links etc. In this Learn HTML For WordPress tutorial we will learn more about different kinds of HTML lists.
HTML Unordered Lists
An unordered list is a collection of items that have no special order or sequence. It’s starting tag <ul> & ending tag </ul>. Inside ul element each list item starts with <li> & ends with </li>.
Here is an example:
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
Below the output:
By default it’s showing black & round bullet marker for each items. We can change this marker by using list-style-type & it’s default value is disc.
Here is an example with default value disc:
<ul style="list-style-type:disc;">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
So this code will show same output like before.
If list-style-type value is circle then code will be like this:
<ul style="list-style-type:circle;">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
Below the output:
If list-style-type value is square then code is below:
<ul style="list-style-type:square;">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
Below the output:
If list-style-type value is none then code is below:
<ul style="list-style-type:none;">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
Below the output:
HTML Ordered Lists
An ordered list is a collection of items that have special order or sequence. It’s starting tag <ol> & ending tag </ol>. Inside ol element each list item starts with <li> & ends with </li>.
Here is an example:
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
Below the output:
By default it will show a marker in numbered ordering. We can change this marker by using list-style-type & it’s default value is decimal.
So below code will show same result:
<ol style="list-style-type: decimal;">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
To make it uppercase letter then list-style-type value will be upper-alpha.
Here is an example:
<ol style="list-style-type: upper-alpha;">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
Below the output:
To make it lowercase letter need to add value lower-alpha for list-style-type & code is below:
<ol style="list-style-type: lower-alpha;">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
Below the output:
To make it upper roman number need to add value upper-roman for list-style-type & code is below:
<ol style="list-style-type: upper-roman;">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
Below the output:
To make it lower roman number need to add value lower-roman for list-style-type & code is below:
<ol style="list-style-type: lower-roman;">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
Below the output:
HTML Nested Lists
In HTML inside one unordered or ordered list can create as many underordered or ordered list.
Here is an example for unordered nested list:
<ul>
<li>List Item 1
<ul>
<li>List Item 1 Sub 1</li>
<li>List Item 1 Sub 2</li>
</ul>
</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
Below the output:
Here is an example for ordered nested list:
<ol>
<li>List Item 1
<ol>
<li>List Item 1 Sub 1</li>
<li>List Item 1 Sub 2</li>
</ol>
</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
Below the output:
HTML Block and Inline Elements
In HTML, for every element there is a display value based on element types. There are two default & mostly used display values are block & inline.
Let’s learn more in this Learn HTML For WordPress tutorial.
HTML Block Elements
A block element starts on a new line & will show as full width element.
Here is an example:
<h2>This is a heading</h2>
<div style="border:1px solid #000;">This is a block element</div>
In this example, div is a block element with it’s opening tag <div> & closing </div>. So it will start on a new line after h2 element & will be full width. Added a border so that can understand it better.
Below the output:
div is a commonly used element & it’s mainly used as a container for other elements or contents.
To understand more here is another example:
<div style="background-color:#000;color:#fff;border:5px solid #ff9933;padding:10px 20px;">
<h2>This is title</h2>
<hr>
<p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>
Below the output:
Some other commonly used block elements tag:
<article>, <blockquote>, <footer>, <form>, <h1> to <h6>, <header>, <hr>, <li>, <main>, <nav>, <ol>, <p>, <section>, <table>, <ul>, <video>
HTML Inline Elements
An inline element don’t start on a new line but will show next to other content. Also it will not show as full width but will take space as much it’s content have.
Here is an example:
<p>HTML inline element <span style="border: 1px solid #000;">This is inline span element</span> inside a paragraph</p>
In this example, inside paragraph an inline element span is added. It has opening tag <span> & closing tag </span>. Used a border for more understandings.
Below the output:
Some other commonly used inline elements tag:
<a>, <b>, <big>, <br>, <button>, <cite>, <code>, <em>, <i>, <img>, <input>, <label>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>
HTML class Attribute
In HTML, class attribute will be used to design elements. For same HTML file or page there can be multple class name in different or same elements. So same class style will be implemented for those elements.
To add styles for a class, that class name will be written using dot (.) sign followed by the name of the class.
We will use some examples to make it understandable in this Learn HTML For WordPress tutorial.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
.block {
background-color: #000;
color: #fff;
padding: 10px 20px;
}
</style>
</head>
<body>
<div class="block">
<h2>This is title 1</h2>
<p>This is text 1</p>
</div>
</body>
</html>
In this example code, block is a class name & added some CSS for this class under style attribute.
Below the output:
We can add same class for another div & example below:
<!DOCTYPE html>
<html>
<head>
<style>
.block {
background-color: #000;
color: #fff;
margin-bottom: 10px;
padding: 10px 20px;
}
</style>
</head>
<body>
<div class="block">
<h2>This is title 1</h2>
<p>This is text 1</p>
</div>
<div class="block">
<h2>This is title 2</h2>
<p>This is text 2</p>
</div>
</body>
</html>
Here in both div declared same class name. So for both div style will be same.
Output below:
If we want to design each div differently then need to create different class for each. Let’s create blockOne for first div & blockTwo for second div.
Here is the example:
<!DOCTYPE html>
<html>
<head>
<style>
.blockOne {
background-color: #000;
color: #fff;
margin-bottom: 10px;
padding: 10px 20px;
}
.blockTwo {
background-color: green;
color: #fff;
padding: 10px 20px;
}
</style>
</head>
<body>
<div class="blockOne">
<h2>This is title 1</h2>
<p>This is text 1</p>
</div>
<div class="blockTwo">
<h2>This is title 2</h2>
<p>This is text 2</p>
</div>
</body>
</html>
Below the output:
To design each elements need to add some more CSS code.
Here is another example:
<!DOCTYPE html>
<html>
<head>
<style>
.blockOne {
background-color: #000;
color: #fff;
margin-bottom: 10px;
padding: 10px 20px;
}
.blockTwo {
background-color: green;
color: #fff;
padding: 10px 20px;
}
.blockOne h2 {
color: red;
}
.blockOne p {
color: orange;
}
.blockTwo h2 {
color: black;
}
.blockTwo p {
color: white;
}
</style>
</head>
<body>
<div class="blockOne">
<h2>This is title 1</h2>
<p>This is text 1</p>
</div>
<div class="blockTwo">
<h2>This is title 2</h2>
<p>This is text 2</p>
</div>
</body>
</html>
In this code, .blockOne h2 means h2 element under class name blockOne & .blockOne p means p element under class name blockOne. Same for .blockTwo h2 & .blockTwo p.
Below the output:
To add class for inline element here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
.block {
background-color: #000;
color: #fff;
padding: 10px 20px;
}
.classOne {
color: red;
}
.classTwo {
color: orange;
}
</style>
</head>
<body>
<div class="block">
<h2>This is <span class="classOne">inline span element</span> title</h2>
<p>This is <span class="classTwo">inline span element</span> text</p>
</div>
</body>
</html>
In this code, created two different classes classOne & classTwo for different span elements.
Below the output:
We can add multile classes under same element & below an example:
<!DOCTYPE html>
<html>
<head>
<style>
.title {
background-color: #000;
color: #fff;
padding: 10px 20px;
}
.titleOne {
color: red;
}
</style>
</head>
<body>
<h2 class="title titleOne">This is title 1</h2>
<h2 class="title">This is title 2</h2>
</body>
</html>
Here in first h2 element added two classes title & titleOne. For titleOne added some CSS as well to understand it more.
Here is the output:
To understand more, we can add same class for different elements.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
.title {
background-color: #000;
color: #fff;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="title">This is Heading 2</h2>
<h3 class="title">This is Heading 3</h3>
</body>
</html>
In this code, class name title is used in different elements h2 & h3 but same style will be used as class name is same.
Below the output:
class name is case sensitive, that means block & Block is two different class name. class can be used in any HTML elements.
We will learn more about class in our CSS tutorial.
HTML id Attribute
In HTML, id attribute will be used to design elements as like class attribute. One difference is, id name have to be unique in one HTML document. If we create same id for multiple elements then it will not be a valid HTML.
To add styles for an id, that id name will be written using hash (#) sign followed by the name of the id.
Let’s use some examples in this Learn HTML For WordPress tutorial.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
#block {
background-color: #000;
color: #fff;
padding: 10px 20px;
}
</style>
</head>
<body>
<div id="block">
<h2>This is title 1</h2>
<p>This is text 1</p>
</div>
</body>
</html>
In this example, one id is created with it’s name block. Added some CSS for this id.
Below the output:
Here is another example:
<!DOCTYPE html>
<html>
<head>
<style>
#blockOne {
background-color: #000;
color: #fff;
padding: 10px 20px;
margin-bottom: 10px;
}
#blockTwo {
background-color: green;
color: #fff;
padding: 10px 20px;
}
</style>
</head>
<body>
<div id="blockOne">
<h2>This is title 1</h2>
<p>This is text 1</p>
</div>
<div id="blockTwo">
<h2>This is title 2</h2>
<p>This is text 2</p>
</div>
</body>
</html>
In this example, two id created, one is blockOne & another one blockOTwo.
Below the output:
Using id we can create a link & move to one specific page section on click.
To understand more, here is an example:
<p id="sectionPage" style="background-color:orange;padding:10px;">This is a Page Section</p>
<a href="#sectionPage">Move to Page Section</a>
In this example, created a paragraph first with it’s id sectionPage & then created a link that’s linked with that paragraph using href #sectionPage.
Below the output:
This is a Page Section
So after you will click on this link “Move to Page Section” then page will move to this “This is a Page Section”.
id name is case sensitive, that means block & Block is two different id name. id can be used in any HTML elements but it has to be unique in one HTML document.
We will learn more about id in our CSS tutorial.
HTML Iframes
In HTML, iframe is used to display a web page within a web page. It has a opening tag <iframe> & closing tag </iframe>.
In this Learn HTML For WordPress tutorial let’s learn more about HTML iframes.
Syntax for iframe:
<iframe src="URL"></iframe>
URL will be added under src attribute.
Here is an example:
<iframe src="https://wpupskills.com/"></iframe>
In this example, src is used our site URL. So site will show in iframe.
Below the output:
We can set width & height of an iframe.
Here is an example:
<iframe src="https://wpupskills.com/" width="500" height="400"></iframe>
By default width & height are specified in pixels.
We can write this code using CSS as well like this below:
<iframe src="https://wpupskills.com/" style="width:500px;height:400px;"></iframe>
To make it full width but a fixed height then need to add width:100% in style sttribute.
Here is the code:
<iframe src="https://wpupskills.com/" style="width:100%;height:400px;"></iframe>
To remove border from iframe need to use border property with value zero pixel.
Here is an example:
<iframe src="https://wpupskills.com/" style="width:100%;height:400px;border:0px;"></iframe>
If we want to design it’s border then here is another code:
<iframe src="https://wpupskills.com/" style="width:100%;height:400px;border:2px solid orange;"></iframe>
Below the output:
HTML Forms
In HTML we can create a form using form element to collect information from users. It has opening tag <form> & closing tag </form>. This contains different types of form elements like:
text fields, select, check boxes, radio buttons, textarea, submit buttons and other elements.
Let’s use some examples to understand it more in this Learn HTML For WordPress tutorial.
Here is an example:
<form>
<label>First Name:</label><br>
<input type="text" name="fname"><br>
<label>Last Name:</label><br>
<input type="text" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
In this example, a form is created with two text fields & one submit field. In text field added name attribute as well & this will be needed later to take those fields values after submitting the form. Added title using label element.
Below the output:
HTML Form Elements
There are different types of form elements in HTML form.
HTML Form input Element
input element is commonly used HTML form element. It has type attribute with different values but default value is text.
Here is an example:
<form>
<label>First Name:</label><br>
<input type="text" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
Below the output:
HTML Form select Element
Using select element we can create drop down list & below an example:
<form>
<label>Selet from drop down:</label><br>
<select name="dropDown">
<option value="value-1">Value 1</option>
<option value="value-2">Value 2</option>
<option value="value-3">Value 3</option>
<option value="value-4">Value 4</option>
<option value="value-5">Value 5</option>
</select><br><br>
<input type="submit" value="Submit">
</form>
Under select element option element is created to show drop down content & each option has value attribute & after submitting the form this will used later. By default first option will be selected & after clicking on field other options will show up.
Below the output:
If we want to make one option selected then can use selected attribute in option attribute. Let’s make “Value 2” selected by default.
Here is an example:
<form>
<label>Selet from drop down:</label><br>
<select name="dropDown">
<option value="value-1">Value 1</option>
<option value="value-2" selected>Value 2</option>
<option value="value-3">Value 3</option>
<option value="value-4">Value 4</option>
<option value="value-5">Value 5</option>
</select><br><br>
<input type="submit" value="Submit">
</form>
Beow the output:
To select more than one value from drop down can use multiple attribute in select attribute.
Here is an example:
<form>
<label>Selet from drop down:</label><br>
<select name="dropDown" multiple>
<option value="value-1">Value 1</option>
<option value="value-2">Value 2</option>
<option value="value-3">Value 3</option>
<option value="value-4">Value 4</option>
<option value="value-5">Value 5</option>
</select><br><br>
<input type="submit" value="Submit">
</form>
Below the output:
HTML Form textarea Element
In HTML, textarea element is used to define multiline input field. This field is used to collect long text like description or message in the form.
Here is an example:
<form>
<label>Add some message:</label><br>
<textarea name="message">Please add some message you want to send</textarea><br><br>
<input type="submit" value="Submit">
</form>
Below the output:
We can change width & height of this textarea field using cols (this will specify width) & rows (this will specify height).
Here is another example:
<form>
<label>Add some message:</label><br>
<textarea name="message" cols="40" rows="5">Please add some message you want to send</textarea><br><br>
<input type="submit" value="Submit">
</form>
Below the output:
We can adjust this width & height using CSS as well like this below:
<form>
<label>Add some message:</label><br>
<textarea name="message" style="width:400px;height:150px;">Please add some message you want to send</textarea><br><br>
<input type="submit" value="Submit">
</form>
Below the output:
HTML Form button Element
We can create a button using button element in HTML form.
Here is an example:
<form>
<label for="fname">First Name:</label><br>
<input type="text" name="fname"><br><br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
In this code, created two buttons, one button type submit & another one type reset.
Below the output:
HTML Form fieldset and legend Elements
In HTML form, we can group related information using fieldset element & to define a caption for that group we can use legend element.
Here is an example:
<form>
<fieldset>
<legend>Name</legend>
<label>First Name:</label><br>
<input type="text" name="fname"><br>
<label>Last Name:</label><br>
<input type="text" name="lname"><br>
</fieldset>
<fieldset>
<legend>Address</legend>
<label>Office:</label><br>
<textarea name="officeAddress" style="width:300px;height:50px;"></textarea><br>
<label>Home:</label><br>
<textarea name="homeAddress" style="width:300px;height:50px;"></textarea><br>
</fieldset><br>
<input type="submit" value="Submit">
</form>
Below the output:
HTML Form Input Types
In HTML form, there are various types of input element. Based on input field functionality this type will be defined.
HTML Form Input Type text
To define single line text input field text type is added.
Below an example:
<form>
<label>Name:</label><br>
<input type="text" name="name"><br>
<label>Subject:</label><br>
<input type="text" name="subject"><br><br>
<input type="submit" value="Submit">
</form>
Output below:
HTML Form Input Type password
To show a password field then password input type will be used.
Here is an example:
<form>
<label>Username:</label><br>
<input type="text" name="username"><br>
<label>Password:</label><br>
<input type="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
Below the output:
After typing in password field then it will show as like asterisks or circles.
HTML Form Input Type submit
In HTML form, input type submit will be used for submitting the form.
Here is an example:
<form>
<label>Name:</label><br>
<input type="text" name="name"><br>
<label>Position:</label><br>
<input type="text" name="position"><br><br>
<input type="submit" value="Submit Button">
</form>
Using value attribute can change submit button text.
Below the output:
HTML Form Input Type reset
Input reset type button will reset all fields value to their default values.
Here is an example:
<form>
<label>First Name:</label><br>
<input type="text" name="fname"><br>
<label>Last Name:</label><br>
<input type="text" name="lname"><br><br>
<input type="submit" value="Submit Button">
<input type="reset" value="Reset Button">
</form>
Below the output:
After typing in input field then if click on “Reset Button” then all fields value will show blank again as it’s default value.
HTML Form Input Type radio
In HTML form, using radio input type we can select one option from all choices.
Here is an example:
<form>
<label>Select your favorite color:</label><br>
<input type="radio" name="color" value="black">
<label>Black</label><br>
<input type="radio" name="color" value="green">
<label>Green</label><br>
<input type="radio" name="color" value="orange">
<label>Orange</label><br><br>
<input type="submit" value="Submit">
</form>
In this code, for all three radio input field have used same name “color” as we want to select color from one of those.
Below the output:
HTML Form Input Type checkbox
Using checkbox type we can select multiple options.
Here is an example:
<form>
<label>Select your favorite color:</label><br>
<input type="checkbox" name="color" value="black">
<label>Black</label><br>
<input type="checkbox" name="color" value="green">
<label>Green</label><br>
<input type="checkbox" name="color" value="orange">
<label>Orange</label><br><br>
<input type="submit" value="Submit">
</form>
This is a modified code of previous code for radio type. Just changed radio to checkbox & all other is same. So here we can select multiple options.
Below the output:
HTML Form Input Type button
Using input type button we can make a button.
Here is an example:
<form>
<label>Name:</label><br>
<input type="text" name="name"><br><br>
<input type="button" value="Submit Button">
</form>
Below the output:
Below will learn some more HTML form input type in this Learn HTML For WordPress tutorial.
HTML Form Input Type color
To show a color option in input field then color type will be used.
Example below:
<form>
<label>Favorite color:</label><br/>
<input type="color" name="favoriteColor" value="#ff9933"><br/><br/>
<input type="submit" value="Submit">
</form>
Added a color code in value for color input type.
Below the output:
After clicking on color box a popup will appear to select color.
HTML Form Input Type date
To show a date field then input type date will be used.
Example below:
<form>
<label>Select a date:</label><br/>
<input type="date" name="dateSelect"><br/><br/>
<input type="submit" value="Submit">
</form>
Below the output:
After clicking on date field a calender will popup to select date from it.
HTML Form Input Type email
To add an email field then email input type should be created.
Below an example:
<form>
<label>Email:</label><br/>
<input type="email" name="email"><br/><br/>
<input type="submit" value="Submit">
</form>
Depending on browser support, email address will be automatically validated.
Below the output:
You can try typing an email address or not an email address to see the output.
HTML Form Input Type file
Using file input type we can create a file selection field.
Here is an example:
<form>
<label>Select a file:</label><br/>
<input type="file" name="fileSelect"><br><br>
<input type="submit" value="Submit">
</form>
Below the output:
HTML Form Input Type number
To add a numeric input field then number input type will be created.
Here is an example:
<form>
<label>Select a number:</label><br/>
<input type="number" name="numberSelect"><br/><br/>
<input type="submit" value="Submit">
</form>
Below the output:
Using up & down arrow we can add a number or can directly type a number. If any other value typed except number then depending on browser support it will be validated.
HTML Form Input Type search
To make a search field then input type search will be used.
Here is an example:
<form>
<label>Search here:</label><br/>
<input type="search" name="searchField"><br/><br/>
<input type="submit" value="Search">
</form>
Below the output:
HTML Form Input Type tel
To make a telephone number tel input type will be used.
Here is an example:
<form>
<label>Phone number:</label><br>
<input type="tel" name="phone"><br><br>
<input type="submit" value="Submit">
</form>
Below the output:
HTML Form Input Type time
To make a time field then time input type will be used.
Here is an example:
<form>
<label>Select a time:</label><br/>
<input type="time" name="timeSelect"><br/><br/>
<input type="submit" value="Submit">
</form>
Below the output:
HTML Form Input Type url
To make URL address field, input type url will be used. Based on browser support, this field will be automatically validated when submitted the form.
Here is an example:
<form>
<label>Type URL:</label><br/>
<input type="url" name="urlField"><br/><br/>
<input type="submit" value="Submit">
</form>
Below the output:
HTML Form Input Attributes
There are different kind of input field attributes in HTML form.
Below some important & commonly used input attributes with examples.
HTML Form Input Attribute value
Using value attribute we can set initial value for an input field.
Here is an example:
<form>
<label>First name:</label><br>
<input type="text" name="firstName" value="Web Coding"><br>
<label>Last name:</label><br>
<input type="text" name="lastName" value="Academy"><br><br>
<input type="submit" value="Submit">
</form>
Below the output:
HTML Form Input Attribute readonly
readonly attribute is used when we want to make a field read-only & in that case that field can’t be edited.
Here is an example:
<form>
<label>This field is read only:</label><br>
<input type="text" name="websiteName" value="Web Coding Academy" readonly><br><br>
<input type="submit" value="Submit">
</form>
In this example, we have added readonly attribute for input type text field. So this field we can’t edit.
Below the output:
HTML Form Input Attribute disabled
disabled attribute will be used to make a disabled field.
Here is an example:
<form>
<label>This field is disabled:</label><br>
<input type="text" name="websiteName" value="Web Coding Academy" disabled><br><br>
<input type="submit" value="Submit">
</form>
Below the output:
HTML Form Input Attribute size
size attribute will be used to define visible width in characters for an input field.
Here is an example:
<form>
<label>30 characters long input field:</label><br>
<input type="text" name="sizeField" size="30"><br><br>
<input type="submit" value="Submit">
</form>
For input type text field size is 30, so this field visible width will be 30 characters width.
Below the output:
size default value is 20.
size attribute can be included in following input types: text, search, tel, url, email and password.
HTML Form Input Attribute maxlength
maxlength attribute will be used to specify maximum number characters allowed in an input field.
Here is an example:
<form>
<label>4 digit PIN:</label><br>
<input type="text" name="pin" maxlength="4" size="4"><br><br>
<input type="submit" value="Submit">
</form>
As it’s maxlength=”4″ for input type text, so if we type characters more than four then it will not be possible. Also added size=”4″, so it’s visible width will be 4 characters width.
Below the output:
HTML Form Input Attribute min and max
min and max attributes will be used to specify minimum & maximum values for an input field.
Here is an example:
<form>
<label>Enter a date before 2000-01-01:</label><br>
<input type="date" name="dateMax" max="1999-12-31"><br>
<label>Enter a date after 2000-01-01:</label><br>
<input type="date" name="dateMin" min="2000-01-02"><br>
<label>Enter a number between 1 and 10:</label><br>
<input type="number" name="numberPosition" min="1" max="10"><br>
<label>Enter a number between -1 and -10:</label><br>
<input type="number" name="numberNegative" min="-10" max="-1"><br><br>
<input type="submit" value="Submit">
</form>
Below the output:
min and max attributes can be included in following input types: number, range, date, datetime-local, month, time and week.
HTML Form Input Attribute multiple
multiple attribute will be used to allow user to include more than one value for an input field.
Here is an example:
<form>
<label>Select multiple files:</label><br/>
<input type="file" name="fileName" multiple><br/><br/>
<input type="submit" value="Submit">
</form>
In this example, we can select more than one file.
Below the output:
multiple attribute can be included in following input types: email and file.
HTML Form Input Attribute placeholder
placeholder attribute includes a short description before user enters a value in an input field. We can remove field label & use this placeholder attribute instead.
Here is an example:
<form>
<input type="text" name="firstName" placeholder="First Name"><br/><br/>
<input type="text" name="lastName" placeholder="Last Name"><br/><br/>
<input type="email" name="emailAddress" placeholder="Email Address"><br/><br/>
<input type="submit" value="Submit">
</form>
After you view this result in your broswer will upderstand it more.
Below the output:
placeholder attribute can be included in following input types: text, search, tel, url, email and password.
HTML Form Input Attribute required
required attribute specifies that an input field must be filled out before submitting the form.
Here is an example:
<form>
<label>Email address (required):</label><br/>
<input type="email" name="emailAddress" required><br/><br/>
<input type="submit" value="Submit">
</form>
So if you submit this form without entering any email address it will show validation error based on your browser support.
To understand it more you can view the result in your browser.
Below the output:
required attribute can be included in following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio and file.
HTML Form Input Attribute step
Using step attribute can add a number interval for an input field.
Here is an example:
<form>
<label>Numbers:</label><br/>
<input type="number" name="numbers" step="5"><br/><br/>
<input type="submit" value="Submit">
</form>
In this code added step value 5, so if you click on this number field up arrow then it will increase value like 5, 10, 15 so on & for down arrow will decrease value like -5, -10, -15 so on.
To understand it more you can view this in your browser.
Below the output:
step attribute can be included in following input types:number, range, date, datetime-local, month, time and week.
HTML Form Input Attribute autofocus
To make automatically get focused in an input field when page loads then this autofocus attribute will be used.
Here is an example:
<form>
<label>First name:</label><br>
<input type="text" name="firstName" autofocus><br>
<label>Last name:</label><br>
<input type="text" name="lastName"><br><br>
<input type="submit" value="Submit">
</form>
In firstName text field autofocus is used, so mouse pointer will point in this field when page loads.
To understand more you can view this result in your browser.
HTML Form Attributes
In HTML there are various types of attributes available for form element.
HTML Form action Attribute
action attribute specifies the file URL that will process the form information when form is submitted.
Syntax for action attribute:
<form action="/action.php"></form>
So after submitting the form it will send form data to file named action.php to process information.
If action attribute value is blank then form will be processed to the same page.
HTML Form method Attribute
method attribute defines the HTTP method which browser used to submit the form.
There are two types of method available.
get method (method=”get”):
- In this method form data will be appended to the URL in name/value format
- It is a limit of how much data you can place in a URL & it varies between browsers
- As all data will show in URL, so it’s not secured method when will pass sensitive information like password, credit card information
Syntax for get method:
<form method="get"></form>
post method (method=”post”):
- In this method form data will not append to the URL
- It has no limitations of how much data you will send
- It’s secured method
Syntax for post method:
<form method="post"></form>
HTML Form target Attribute
target attribute defines where to display data after submitted the form.
Below added mostly used values for target attribute.
_self target (target=”_self”): response will display in current page/tab & it’s default
Syntax for _self target:
<form target="_self"></form>
_blank target (target=”_blank”): response will display in a new page/tab
Syntax for _blank target:
<form target="_blank"></form>
HTML Form novalidate Attribute
If novalidate attribute used in form then all the form data will not be validated when form is submitted.
Syntax for novalidate attribute:
<form novalidate></form>
Hope you have learned basic HTML in this Learn HTML For WordPress tutorial.
Next we will move to Learn HTML For WordPress tutorial.
