HTML Basics: A Beginner’s Guide to HTML
In this article, we’ll cover HTML basic, including its structure, syntax, and common elements.
Whether you’re looking to build a basic website or a complex web application, understanding HTML basic is an essential first step.
Don’t be concerned if we specify tags that you still need to become familiar with.
HTML Basics Structure
An HTML document is made up of several components, including the document type declaration, the HTML tag, the head section, and the body section.
The document type declaration, or DOCTYPE, is the first line of an HTML document.
It tells the browser which version of HTML is being used in the document. The most common DOCTYPE for HTML5 is:
<!DOCTYPE html>
The HTML tag is the next element in the document.
It wraps around all other elements in the document and specifies that it is an HTML document.
The long attribute specifies the document’s language.
<html lang="en">
The head section of an HTML document contains metadata about the document, such as:
- Title of the page.
- Links to stylesheets.
- Scripts.
The head section is enclosed by the <head> and </head> tags.
The body section of an HTML document contains the visible content of the page, such as:
- Images.
- Text.
- Other media.
The body section is enclosed by the <body> and </body> tags.
Example
HTML Headings:
The heading tags in HTML range from h1 to h6. It is vital and a fundamental rule of HTML basic.
<H1> is the most important heading. The least important heading is h6:
Example:
Example Explanation:
- The example above contains a HTML code that demonstrates how to use six levels of headings using the <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> tags.
- The HTML code starts with the <html> tag which defines the beginning of an HTML document. Inside the <html> tag, there is a <body> tag which contains the visible content of the web page.
- Inside the <body> tag, there are six heading tags, from <h1> to <h6>. Each heading tag defines a different level of heading, with <h1> being the largest and most prominent, and <h6> being the smallest and least prominent.
- The text inside each heading tag is an example heading that demonstrates the size and appearance of each level of heading. The text of each heading increases in size from <h1> to <h6>
HTML Paragraphs:
Using the <p> tag, HTML defines paragraphs as follows in HTML basic:
Example:
Example Explanation:
- The code above starts with the <html> tag, which indicates the beginning of an HTML document. Inside the <html> tag, there is a <body> tag, which is where the visible content of the web page is placed.
- Within the <body> tag, there are two <p> tags. The <p> tag stands for “paragraph” and is used to define a new paragraph of text. The text content of each paragraph is contained within the opening and closing <p> tags.
- The first paragraph says “Here you can write your first Paragraph” and the second paragraph says “Here you can write your second Paragraph.” These are just placeholder texts meant to demonstrate how to use the <p> tag.
HTML Links:
Links in HTML are defined by the <a> tag when it comes to HTML basic:
Example:
The href attribute specifies a link’s destination.
HTML elements can be enhanced with attributes to provide additional information.
A later chapter will discuss attributes in more detail.
HTML Basic: HTML Images
An image is defined in HTML with the <img> tag.
In addition to the source file (src), alternative text (alt), width, and height, the following attributes are present:
Example:
HTML Video
A video can be displayed in HTML by using the <video> element:
Example:
How to check HTML Source code?
When you are on the Internet, and you are looking at a Web page, have you ever wondered, “How did they do that?”
View HTML Source Code:
To view the HTML source of an HTML page, right-click and select “View Page Source” (in Chrome), “View Source” (in Edge), or similar in other browsers. You will see the HTML source code of the page in the window that opens.
How to Inspect an HTML Element:
To determine the components of an element, right-click on it (or a blank space) and choose “Inspect” or “Inspect Element” (you will see both the HTML and the CSS). Additionally, the Elements or Styles tab that appears allows you to instantly alter the HTML or CSS.
Conclusion
In a nutshell, understanding HTML basic is an essential first step in creating web pages and web applications. With the knowledge gained in this article, you can start building your own basic web pages and continue to learn more about web development.
Hopefully we discussed all HTML basic fundamentals. if you need to learn more about HTML, you must checkout our html tag references.
