HTML (HyperText Markup Language) is used to structure and format the content of websites on the World Wide Web. Web Developers use it to create a skeleton of modern websites and web apps.
In simple words, HTML is the primary building block to create and structure website content.
HyperText
HyperText is a way of organizing text that allows the reader to easily navigate and access related information. It takes the reader to a different part of the same web page, or to a different web page altogether.
Markup Language
A markup language is a computer language that is used to add structure and formatting to a text document. Markup languages use a system of tags to define the structure and content of a document. These tags are interpreted by a program or application to display the document in a specific way.
Example of HTML
Let's see a simple example of HTML.
<!DOCTYPE html>
<html>
<head>
<title>programiz</title>
</head>
<body>
<h1>HTML Tutorial</h1>
<p>You'll learn about HTML.</p>
</body>
</html>
Browser Output
HTML (HyperText Markup Language) is a markup language used to structure and organize the content on a web page. It uses various tags to define the different elements on a page, such as headings, paragraphs, and links.
HTML Hierarchy
HTML elements are hierarchical, which means that they can be nested inside each other to create a tree-like structure of the content on the web page.
This hierarchical structure is called the DOM (Document Object Model), and it is used by the web browser to render the web page. For example,
<!DOCTYPE html>
<html>
<head>
<title>My web page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first web page.</p>
<p>
It contains a <strong>main heading</strong> and
<em>paragraph</em>.
</p>
</body>
</html>
Browser Output
In this example, the html element is the root element of the hierarchy and contains two child elements: head and body. The head element, in turn, contains a child element called the title, and the body element contains child elements: h1 and p.
Web design refers to the process of creating and styling the appearance of a website. There are 3 fundamental technologies to build the modern website and web applications. They are:
- HTML
- CSS
- JS
These technologies work together to provide the structure, style, and interactivity of a web page.
HTML
HTML (HyperText Markup Language) is a markup language used to structure and organize the content on a web page. It uses various tags to define the different elements on a page, such as headings, paragraphs, and links. Let's see an example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Programiz</h1>
<p>We create easy to understand programming tutorials.</p>
</body>
</html>
Browser Output
Here, we have an HTML document where:
- <h1> — heading of the document
- <p> — paragraph of the document
The heading and paragraph tag in the above code help create a webpage structure.
CSS
CSS (Cascading Style Sheets) is a stylesheet language. It is used to style HTML documents.
It specifies how the elements of HTML look including their layout, colors, and fonts. We use <style> tag to add CSS to HTML documents. Let's add some CSS to our previous HTML code.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
h1 {
color: blue;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>Programiz</h1>
<p>We create easy to understand programming tutorial.</p>
</body>
</html>
Browser Output
In the above code, we've applied CSS to <h1> and <p> tags to change their text color. Notice the code,
h1 {
color: blue;
}
This CSS code turns the text color of every <h1> element into blue.
The HTML tag is used to create paragraphs. For example,
<p>HTML is fun to learn.</p>
Browser Output
As we can see, a paragraph starts with the <p> and ends with the </p> tag.
The HTML heading tags (<h1> to <h6>) are used to add headings to a webpage. For example,
<h1>This is heading 1.</h1>
<h2>This is heading 2.</h2>
<h3>This is heading 3.</h3>
<h4>This is heading 4.</h4>
<h5>This is heading 5.</h5>
<h6>This is heading 6.</h6>
Browser Output
In the example, we have used tags h1 to h6 to create headings of varying sizes and importance.
The h1 tag denotes the most important heading on a webpage. Similarly, h6 denotes the least important heading.
The difference in sizes of heading tags comes from the browser's default styling. And, you can always change the styling of heading tags, including font size, using CSS.
HTML elements can be broadly categorized into one of two categories:
- Inline Elements: <span>, <a>, <strong>, <img> etc.
- Block Elements: <p>, <div>, <h1>, <figure> etc.
HTML Inline Elements
Inline elements are displayed on the same line. They do not start on a new line and take up only as much width as their contents require. An example of an inline element is the <span> tag.
<p>This is how <span style="border: 1px solid black">span</span> works.</p>
Browser Output
HTML links or hyperlinks connect one resource on the web to another. The resource may be an image, a web page, a program, a video clip, an audio clip, an element within a web page, etc, or anything that can be hosted on the internet.
We use the HTML <a> tag to create hyperlinks. The syntax for the <a> tag is
<a href="URL">Text</a>
Here,
- URL - the destination of the link
- Text - the part that will be visible as a link
Clicking on the text will navigate you to the resource in the URL. For example,
Browser Output
Here, clicking on the Swift Continue Statement will take you to
https://www.programiz.com/swift-programming/continue-statement.
All the documentation in this page is taken from Programiz