If you want to build the website, then you need to learn the HTML. HTML full form is hypertext markup language. if you want to Display you contain on the webpage, then you need to learn the HTML. in this article, you will learn what is the basic structure of HTML file.
What is the basic structure of HTML file?
What is a <!DOCTYPE>?
The <!DOCTYPE> is the first line of code in every HTML file. It tells your web browser which version of HTML is in the file. Each version of HTML is unique and has its own rules. This is the starting introduction to HTML 5 which is the latest version of the HTML language. This is the easiest version as well as recommended for developers. To Type an HTML 5 document, simply type the HTML element <!DOCTYPE>.
You can see an example below:
<!DOCTYPE html>
What Is the <head> Tag?
In every HTML document, the <!DOCTYPE> declaration is followed by the <html> tag. This tag identifies the source of the document and encloses the <head> and <body> tags.
The <head> tag is the first section and includes the <title> and <meta> tags. However, in some instances when a developer chooses to use internal CSS, the <style> tag is also placed inside the <head> tag. An HTML document contains only one <heading> tag. The <title> tag contains the title of the web page, and this information appears in the tab area of the web browser.
You can see an example of a title tag below:
<title>Introduction to HTML</title>
An HTML file with a <head> tag at the top will appear in the tabbed area of the browser as “Identifying HTML”. The <meta> tag describes the content of a web page and typically contains the name and content attributes. The three most popular types of <meta> tags are description, keyword, and viewport
Below is an example of a description <meta> tag:
<meta name=”describe” content=”This is a simple page; we learn the basics of HTML”>
The Description <meta> tag content attribute contains the description of your web page. This is the data that is displayed in the search engine result, which tells the potential visitor what to expect on the website.
Below is a keyword <meta> tag example:
<meta name=”keywords” content=”HTML, web development, etc.”>
The keywords <meta> tag contains words or phrases that are related to your website. Each keyword content attribute is separated by a comma, as you can see in the example above.
Below is a viewport <meta> tag example:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
The viewport <meta> tag helps to create responsive designs, by making your web page responsive to different device types.
What is the <body> Tag?
The <body> tag is the second main part of the <html> root tag. The <body> tag contains all the elements which are display on the web page. Elements with <body> tag are divided into two types which are called Inline or Block Elements. If you’d like to see a full HTML essentials cheat sheet, we’ve put together one so you can easily figure everything out.
What Are Heading Tags?
- <h1> for heading 1
- <h2> for heading 2
- <h3> for heading 3
- <h4> for heading 4
- <h5> for heading 5
- <h6> for heading 6
In this <h1> is a biggest tag and <h6> is the smallest tag. And other <h2>, <h3>, <h4> and <h5> the others are descending order to their number value. The heading tags are used to give headings on a web page. The use of a specific heading tag depends on the position. For example8, the <h1> tag is used on the first heading on a web page, and a web page only uses one h1 element (though it might have several h2, h3, and h4 elements).
You can see an example of <h1> tag.
<h1>the Basics of HTML</h1>
What Are Block Elements?
Always remember that block elements always start on a new line, and they take up the full width of their element space. Some block elements you’ll use include:
- The heading tags
- The <p> tag
- The <div> tag
- The <ol> tag
- The <ul> tag
- The <li> tag
Block elements are used to divide the text onto the website in a coherent, digestible format.
What Is the <p> Tag?
The <p> is also a block element used in the body of the web page, and it creates paragraphs.
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione quam nemo modi rem ea, nulla corporis error sint sapiente inventore optio, blanditiis eum hic. Esse sapiente perspiciatis necessitatibus officiis libero similique est, consequatur odio voluptates debitis nostrum aspernatur ex numquam. </p>
What Is the <div> Tag?
The <div> tag represents a division. It’s used to create containers for groups of other HTML elements for styling purposes. For example, if you’re working with a grid, you’ll have to put all the grid elements within a container. A <div> tag is what you’ll need to use to create the container.
What Are the <ol> and <ul> Tags?
The <ol> and <ul> tags are used to create lists in HTML. The <ol> tag creates ordered lists, while the <ul> tag creates unordered lists.
However, both tags use the <li> tag, which creates list items.
Using the <ol> tag
An ordered list uses numbers by default. However, the <ol> tag has a type attribute you can use to explicitly state the element you want to use to order your list. You can order a list with upper- or lower-case roman numerals, upper- or lower-case letters, or numbers.
You can see an example below:
<ol type=”a”>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
The code above creates an ordered list using lowercase letters.
Using the <ul> Tag
The <ul> Tag also has a type attribute, which takes one of several values: namely disc, circle, or square. However, the disc is the default indicator of a new list item in an unordered list.
Below is an example of what an unordered list would like in code form:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
What Are Inline Elements?
An inline element doesn’t start on a new line. It starts at the next available position, which may or may not be on a new line, and it only uses as much width as is necessary. Some inline elements you’re most likely to use includes:
- The <span> Tag
- The <a> Tag
- The <img> Tag
- The <label> Tag
- The <button> Tag
We’ll discuss each of these in greater depth below.
What Is the <span> Tag?
The <span> tag is used for inline styling purposes. For Example, if you want to change the style of a specific word or Sentence within a paragraph, then you can use the <span> tag.
Below is an example of this tag:
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit aliquid a cupiditate inventore, reiciendis earum illum <span id=“important”>dignissimos officia</span> ,culpa cumque dolorem quidem atque maiores, ad tempora quia. Repudiandae, delectus! </p>
Using the <span> tag in the example above ensures that the two words within the <span> tag can now have a unique style.
What Is the <a> Tag?
In the web page <a> tag is used for creating links. The <a> tag has (href) and (target) these two important attributes.
The href attribute is essential, as it stores the value of the link location. And the target attribute is necessary because it allows a user to open the link in a new tab. Without the target attribute, a link will open in the current tab, and if it’s an external link, it’ll drive traffic away from your website.
See below for an example of the <a> tag in action:
<a href=”http://google.com” target=”_blank“>link to Google</a>
In this post, we learned an introduction to HTML and the basics of HTML that’s helping to build a website.
