Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. HTML is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and tables. In this article we'll discuss all the concepts of HTML which will be enough to start any future web projects.
Read more
- https://en.wikipedia.org/wiki/HTML
- https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
HTML is very easy to learn. It is the main markup language for web pages. In this section we'll discuss the core concepts of HTML.
HTML is not a programming language. It's a markup language. By definition, a markup language is a system for annotating a document in a way that is syntactically distinguishable from the text.
HTML markup consists of tags and attributes, character-based data-types, character references and entity references. HTML tags generally come in pairs, for e.g., <h1> and </h1>, although some of the tags are empty or unpaired, for e.g., <img>. Let's consider the following example,
<h1>Hello, world!</h1>
Here, <h1> is called the start or opening tag and </h1> is called the end or closing tag.
Anatomy of a HTML page
The following markup shows the basic structure or anatomy of a HTML page.
<!DOCTYPE html>
<html>
<head>
<title>Hello, world!</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
The text between <html> and </html> describes the web page, and the text between <body> and </body> is the visible page content. The markup text <title>Hello, world!</title> defines the browser page title.
The Document Type Declaration <!DOCTYPE html> is for HTML5.
HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way.
For e.g., here's your content:
Hello, world!
If you want to display the content in a more structured way, you can wrap in a paragraph which is a HTML element.
<p>Hello, world!</p>
HTML elements can be nested, which means elements can have other elements as child. In the following example, div is an element which has another element p as child.
<div>
<p>Hello, world!</p>
</div>
HTML elements can also be emptied or unpaired. In the following example, img is a HTML element which is empty i.e. it does not have anything as child, unpaired and self closing. A self closing element starts with < and ends with />.
<img ... />
Read more
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element
- https://www.w3schools.com/tags/ref_byfunc.asp
All the HTML elements can have attributes which provide additional information about an element. Attributes usually come in name/value pairs i.e. name="value" and are always specified in the start tag.
For e.g., img element should have a src attributes which defines the location of the image to be displayed.
<img src="/img/abc.jpg" />
In HTML, there are attributes common to all HTML elements. They are known as global attributes which can be used on all elements, though they may have no effect on some elements.
Read more