In this section we will focus on the basic of HTML and will see some of the most basic elements of the HTML like <HTML> <Head> <img> and explain how they work.
Basics of HTML
The purpose of this section is to simply familiarize you with the basics of HTML elements. So the explanations here will be introductory and general. But in later sections, we will dive deep in each of the elements of this section and there you’ll learn a lot about them.
So don’t worry if you didn’t learn everything right away! We will get back to them soon.
Document Type in HTML: HTML5 Doctype <!DOCTYPE> Element
HTML has different versions! The latest version to this date is called HTML 5.
Now when creating an HTML document, you need to tell browsers what version of HTML you’ve used to create the document.
This is done with the help of <!doctype> tag.
Note that this is not an HTML element (tag)! Browsers simply read this to figure out the version of the HTML that has been used for the document. So simply it’s a signal to the browsers.
For example, if you’ve written an HTML document using the HTML 5 (the latest version) then this is how you tell browsers that the document is written using HTML 5:
<!doctype html>
If you put this tag on top of a HTML document (the first line of that document) browsers realize that the document is written using HTML5 and so they interpret the document based on the elements of this version.
Usually this is the only version of HTML that you would use to create a document, but if you wanted to use the older versions like HTML 4 for example, then you need to put this statement as the first line of your document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Example: setting the HTML document type
<!DOCTYPE html>
<html>
<body>
<p>Hello World</p>
</body>
</html>
As you can see, the first element of this document is set to <!doctype html> which means the document is written using the HTML 5 elements.
Note: there’s no case sensitivity in using the <!doctype>. It can be written as <!DOCTYPE>, <!DocType>, or <!doctype>.
What is <html> Tag?
The <html> element is the first element we use to create an HTML document.
Basically, every element we want to create for an HTML document goes within the body of this element.
You can think of it as the root of HTML documents.
In the last example, you can see that the document started with this element and after that we started to put the content of the document itself.
So again, this is the first element we use to create an HTML document and the rest of elements of the document go within the body of this element.
What is HTML Paragraph and what is <p> in HTML?
In HTML documents, when we want to add a new paragraph, we use the <p> element. This element stands for paragraph and this is the syntax of the element:
<p> //body of the paragraph… </p>
Here, within the opening tag <p> and closing tag </p> we write any text content we want to be displayed to users to see.
Example: creating paragraph in HTML
See the Pen creating paragraph in HTML by Omid Dehghan (@odchan1) on CodePen.
Now, if you run this simple document, you’ll see the content of the <p> element is displayed on the page.
Nested Elements in HTML
The process of putting one HTML element within the body of another HTML element is called nesting elements.
This is a pretty common routine in HTML! For example, we have container elements that their job is to simply group a set of related elements that are part of a section in a document!
For example, in your page you might have an article section where you have one header and one or more paragraphs related to the header.
Here, the container of that article section could be an HTML element like <article> </article>. Now, within the body of this element, we can put header elements like <h1> and one or more <p> elements to represent the paragraphs. So here the <h1> element and the <p> elements inside the body of the <article> element are considered as the nested elements or (also developers call it the child elements) of the <article> element.
Let’s run an example and then we will continue our discussion related to the HTML nested elements.
Example: nesting elements in HTML
See the Pen nesting elements in HTML by Omid Dehghan (@odchan1) on CodePen.
In this example, the <h1> and <p> elements are the child of the <article> element or basically they are nested within the <article> element.
Note that the <article> element itself is nested within another element called <body> and even the <body> element is nested within the body of another element called <html> which is known as the root element in any HTML document.
Note: every element you see in this section will be explained in greater details in later sections.
Headers in HTML: <h1>-<h6> Elements
The <h> series of elements are to stand for headers and we use them to create a header in an HTML document!
The <h1> element represents the largest header (with the biggest font size) and the <h6> represents the smallest size.
If you want to have a larger header in your document, you can use the <h1> or <h2> headers. But if you’re looking for a header with smaller size compared to <h1> and <h2>, you can then use <h3>, <h4>, etc. (Usually in an HTML document you only use the first three header elements! The rest are too small to be used in a document!)
Note that each element has an opening and closing tag!
For example:
<h1>Header… </h1>
Now, within the body of each header element, we set the content for that header.
Example: heading in HTML
See the Pen heading in HTML by Omid Dehghan (@odchan1) on CodePen.
<a> Link in HTML
Have you ever opened a webpage and there were links you could click and be headed to other pages of that website? Well, for the majority of cases, those links are created using an HTML element called <a>.
This element that stands for anchor is a way of connecting a content (usually text) to a webpage!
First, let’s see the syntax of the element:
<a href = “address”> content </a>
`content`: within the body of the <a> element we use any content (text or image) that we want users to click so that the target webpage becomes open.
`href = “address” `: the href is called an attribute. Every HTML element has attributes and they are basically a set of words that control the attribute (or properties if you will) of the related HTML element! For example, the href here is in charge of setting the address of the webpage that should be opened after a user clicked on the content within the body of an <a> element. The value we set for the hreft attribute is an address! For example, you can put the value https://www.google.com as the replacement of the `address` within the double quotation. After that, if a user clicked on the content of the link, the Google homepage will open.
Example: HTML for a link
See the Pen HTML for a link by Omid Dehghan (@odchan1) on CodePen.
Example: hyperlinking in HTML
See the Pen hyperlinking in HTML by Omid Dehghan (@odchan1) on CodePen.
Image with HTML: <img> Element
The <img> element is an HTML element that we can use to insert an image into an HTML document!
This is the syntax of this element:
<img src=”address” width=”size” height=”size”>
Unlike other elements you’ve seen so far, the <img> element has only one tag.
There are multiple attributes related to this element, but three of the most important ones are:
`src`: we use this attribute to set the address of the target image we want to load into our page.
`width`: this attribute defines the width of the imported image in the document (The width of the image in the document will be equal to the value we set for this attribute). The value can be set using the units that are supported in the CSS. For example, px, em, rem, etc.
`height`: this attribute defines the height of the imported image in the document. Again, just like the width attribute, the value of this attribute can be set using the units that are supported in the CSS.
Notes:
- There are more attributes related to <img> tag and you can learn about them in the HTML <img> section.
- The URL address we set as the value for the `src` attribute could be either absolute or relative. You’ll learn more about this topic in the absolute and relative URLs section.
Example: adding an image in HTML
See the Pen adding an image in HTML by Omid Dehghan (@odchan1) on CodePen.
