Table of Contents Hide
Introduction to HTML:
HTML is the foundation of all websites. HTML stands for HyperText Markup Language, which is the most widely used language to develop web pages.
It describes the structure of the page. In other words, consists of a series of tags and tell the browser how to show the content.
This article is designed for Web Designers and Developers with a need to understand the basic knowledge of HTML. After reading this article you’ll have enough knowledge to start with HTML from where you can take yourself to a higher level of expertise. Only you need a text editor like sublime, notepad++, etc.
Originally, HTML was developed to determine the structure of documents like headings, paragraphs, lists, etc.
Now, HTML is being broadly used to format web pages with the help of different tags available in HTML language.
HTML Page Structure
(visualization of an HTML page structure)
Simple HTML Document Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Hello World!</h1>
<p>Nice to meet you</p>
</body>
</html>
- !Doctype html declaration defines that an HTML5 document.
- html root element of an HTML page.
- head contains meta info regarding the hypertext markup language page.
- title defines a title for the HTML page (which is shown within the browser’s title bar or within the page’s tab).
- body defines the document’s body, and maybe an instrumentality for all the visible contents, like headings, paragraphs, images, hyperlinks, tables, lists, video, etc.
- h1 defines a large heading.
- p defines a paragraph.
Meta Tags:
The meta tag is used for additional information about the web page. However, a meta tag is a single body tag and is mainly used for SEO (Search Engine Optimization). Also, It carries all information within its attributes. We can include more than one meta tag on our web page.
You can add metadata to your web pages by putting tags inside the header of the document.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
</head>
<body>
<p>Hello World!</p>
</body>
</html>
In the following example, where we are adding HTML, Meta Tags, Metadata as important keywords about the web page. Also, use a meta tag for a short description of the document.
HTML Element:
- Start tag
- Content
- End tag
<tagname> Content </tagname>HTML element is everything from the start tag to the end tag.
Examples:
<h1>My
First Heading</h1>
<p>My
First Paragraph</p>
HTML Attributes:
Attributes in all HTML elements. They provide additional information about elements. Attributes are always write in starting tag, like that name = “value”
Example:
<a href="https://devfords.com/">Welcome To DevFords.</a>
It’s the example of anchor tag ( < a > ) this tag use for a hyperlink, href attribute specifies the URL of the page where the link will go.
Width and Height Attributes:
<img loading="lazy" src="profile-image.png" width="500" height="600">
The img tag should also contain the width and height attributes, which specifies the width and height of the image (in pixels).
They’re some examples of element attributes you’ll observe more when you’ll more learn and experience.
Note:
Don’t forget to finish the tags.
HTML tags don’t seem to be case sensitive, however, the great follow is that always write HTML tag name in lowercase.
If you want to learn HTML in 12 Minutes then read this article.
See you there 🙂
Momena Suallam