HTML HyperText Markup Language is the most basic building block of the Web. It defines the meaning and structure of web content. HTML are generally used to describe a web page’s appearance/presentation.
H – HyperText: refers to links that connect web pages to one another, either within a single website or between websites.
Markup – HTML employs “markup” to annotate text, images, and content for presentation in a web browser. It utilizes special “elements” like <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <search>, <output>, <progress>, <video>, <ul>, <ol>, <li>, and more.
All our tutorial codes will be posted on our GitHub
What is an HTML (Hypertext Markup Language) Element?
In HTML Hypertext Markup Language, an element is a fundamental building block that defines the structure and content of a web page. It consists of a start tag, content, and an end tag. The start tag typically contains the name of the element, and the end tag is preceded by a forward slash (“/”). The content is the information or markup nested between the start and end tags.
For example, the <p> element is used to define paragraphs. In this case, <p> is the start tag, and </p> is the end tag. The content, which could be text, images, or other elements, is placed between these tags:
| Start Tag | Element | End Tag |
| <h1> | My first code | </h1> |
| <p> | My first paragragh | </p> |
| </b> | none | none |
What is an HTML Tag?
Tags in HTML are not case-sensitive. This means they can be written in uppercase or lowercase. For example, a <title> tag could be written as <title>, <TITLE>, <Title>, <TiTlE>, etc., and it will work. However, it is best practice to write all tags in lowercase for consistency and readability.
<p>Welcome to Bernixe Tech HTML tutorials</p>
Result:
Welcome to Bernixe Tech HTML tutorials
<p> The opening tag and </p> The closing tag
Web Browsers
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.
A browser does not display the HTML tags, but uses them to determine how to display the document:
A Simple HTML Document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>100 Days Code Challenge</title>
</head>
<body>
<p>Welcome to Bernixe Tech HTML tutorials.</p>
<h1>My first header</h1>
</body>
</html>Result:
My first header
Welcome to Bernixe Tech HTML tutorials.
HTML Attributes
Attributes contain extra information about the element that won’t appear in the content. In this example, the class attribute is an identifying name used to target the element with style information.
The <img> element can take a number of attributes, including:src
The src attribute is a required attribute that specifies the location of the image. For example: src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png".
Bernice Ebhohimen with over 8 years of experience in Full-Stack Website Design & Development, WordPress, Web Hosting, eCommerce, SEO, and Marketing. She Started Bernixe Tech in 2016, Bernixe Tech is a Websited Design and Development Agency and also a free (Full-Stack, WordPress) resource site for beginners.
About The Author
