Getting started with HTML
What Are the Different Web Technologies?
Web technologies are often divided according to where they are used. That is, are they focused on the client-side or server-side of web applications? Knowing the basic categories of web technologies is essential if you plan to work in web development. Thus, here is a list of web development technologies by category:
Browsers
HTML and CSS
Programming Languages
Frameworks
Web Servers
Databases
Protocols
Lastly, data Formats
Although many technologies are involved in creating a web application, some are more central to building a web application.
HTML stands for HyperText Markup Language. It is a standard markup language for web page creation. It allows the creation and structure of sections, paragraphs, and links using HTML elements (the building blocks of a web page) such as tags and attributes.
HTML has a lot of use cases, namely:
Web development. Developers use HTML code to design how a browser displays web page elements, such as text, hyperlinks, and media files.
Internet navigation. Users can easily navigate and insert links between related pages and websites as HTML is heavily used to embed hyperlinks.
Web documentation. HTML makes it possible to organize and format documents, similarly to Microsoft Word.
It’s also worth noting that HTML is not considered a programming language as it can’t create dynamic functionality. It is now considered an official web standard. The World Wide Web Consortium (W3C) maintains and develops HTML specifications, along with providing regular updates.
This article will go over the basics of HTML, including how it works, its pros and cons, and how it relates to CSS and JavaScript.
HTML DOCUMENTS STRUCTURE
Html used predefined tags and attributes to tell the browser how to display content, means in which format, style, font size, and images to display. Html is a case insensitive language. Case insensitive means there is no difference in upper case and lower case ( capital and small letters) both treated as the same, for r example ‘D’ and ‘d’ both are the same here.
There are generally two types of tags in HTML:
[if !supportLists]1. [endif]Paired Tags: These tags come in pairs. That is they have both opening(< >) and closing(</ >) tags.
[if !supportLists]2. [endif]Empty Tags: These tags do not require to be closed.
Below is an example of a (<b>) tag in HTML, which tells the browser to bold the text inside it.
Tags and attributes: Tags are individuals of html structure, we have to open and close any tag with a forward slash like this <h1> </h1>. There are some variations with the tag some of them are self-closing tag which isn’t required to close and some are empty tag where we can add any attributes in it. Attributes are additional properties of html tags that define the property of any html tags. i.e. width, height, controls, loops, input, and autoplay. These attributes also help us to store information in meta tags by using name, content, and type attributes. Html documents structured mentioned below:
Structure of an HTML Document
An HTML Document is mainly divided into two parts:
[if !supportLists]· [endif]HEAD: This contains the information about the HTML document. For Example, the Title of the page, version of HTML, Meta Data, etc.
[if !supportLists]· [endif]BODY: This contains everything you want to display on the Web Page.
HTML Document Structure
Let us now have a look at the basic structure of HTML. That is the code that is a must for every webpage to have:
<!DOCTYPE html> |
Every Webpage must contain this code. Below is the complete explanation of each of the tags used in the above piece of HTML code:
<!DOCTYPE html>: This tag is used to tells the HTML version. This currently tells that the version is HTML 5.0
<html> </html> : <html> is a root element of html. It’s a biggest and main element in complete html language, all the tags , elements and attributes enclosed in it or we can say wrap init , which is used to structure a web page. <html> tag is parent tag of <head> and <body> tag , other tags enclosed within <head > and <body>. In <html > tag we use “lang” attributes to define languages of html page such as <html lang=”en”> here en represents English language. some of them are : es = Spanish , zh-Hans = Chinese, fr= french and el= Greek etc.
<head>: Head tag contains metadata, title, page CSS etc. Data stored in the <head> tag is not displayed to the user, it is just written for reference purposes and as a watermark of the owner.
Note: for better understanding refer above code of html.
<title> = to store website name or content to be displayed.
<link> = To add/ link css( cascading style sheet) file.
<meta> = 1. to store data about website, organisation ,
creator/ owner
for responsive website via attributes
to tell compatibility of html with browser
<script> = to add javascript file.
<body>: A body tag is used to enclose all the data which a web page has from texts to links. All the content that you see rendered in the browser is contained within this element. Following tags and elements used in the body.
1 . <h1> ,<h2> ,<h3> to <h6>
- <p>
- <div> and <span>
- <b>, <i> and<u>
- <li>,<ul>and<ol>.
- <img> , <audio> , <video> and<iframe>
- <table> <th> , <thead>and<tr>.
- <form>
- <label> and <input> others……….
To learn more about an HTML Document structure, please visit:
[if !supportLists]· [endif]https://www.geeksforgeeks.org/html-introduction/
HTML is the foundation of web pages, and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
HTML Elements
The HTML element is everything from the start tag to the end tag:
<tagname>Content goes here...</tagname>
Examples of some HTML elements:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
| Start tag | Element content | End tag | |
<h1> | My First Heading | </h1> | ||
| <p> | My first paragraph. | </p> | |
| <br> | none | none | |
Note: Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!
Nested HTML Elements
HTML elements can be nested (this means that elements can contain other elements).
All HTML documents consist of nested HTML elements.
HTML Attributes
HTML attributes provide additional information about HTML elements.
HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:
The src Attribute
The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed:
Example
<img src="img_girl.jpg">
There are two ways to specify the URL in the src attribute:
1. Absolute URL - Links to an external image that is hosted on another website. Example: src="https://www.w3schools.com/images/img_girl.jpg".
Notes: External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; it can suddenly be removed or changed.
2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page. Example: src="img_girl.jpg". If the URL begins with a slash, it will be relative to the domain. Example: src="/images/img_girl.jpg".
Tip: It is almost always best to use relative URLs. They will not break if you change domain.
The width and height Attributes
The <img> tag should also contain the width and height attributes, which specify the width and height of the image (in pixels):
Example
<img src="img_girl.jpg" width="500" height="600">
The alt Attribute
The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to a slow connection, or an error in the src attribute, or if the user uses a screen reader.
Example
<img src="img_girl.jpg" alt="Girl with a jacket">
Example
See what happens if we try to display an image that does not exist:
<img src="img_typo.jpg" alt="Girl with a jacket">
The style Attribute
The style attribute is used to add styles to an element, such as color, font, size, and more.
Example
<p style="color:red;">This is a red paragraph.</p>
You will learn more about styles in our HTML Styles chapter.
The lang Attribute
You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.
The following example specifies English as the language:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Country codes can also be added to the language code in the lang attribute. So, the first two characters define the language of the HTML page, and the last two characters define the country.
The following example specifies English as the language and United States as the country:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
You can see all the language codes in our HTML Language Code Reference.
The title Attribute
The title attribute defines some extra information about an element.
The value of the title attribute will be displayed as a tooltip when you mouse over the element:
Example
<p title="I'm a tooltip">This is a paragraph.</p>
What's in the head? Metadata in HTML
The head of an HTML document is the part that is not displayed in the web browser when the page is loaded. It contains information such as the page <title>, links to CSS (if you choose to style your HTML content with CSS), links to custom favicons, and other metadata (data about the HTML, such as the author, and important keywords that describe the document). Web browsers use information contained in the head to render the HTML document correctly. In this article we'll cover all of the above and more, in order to give you a good basis for working with markup.
What is the HTML head?
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>
Copy to Clipboard
The HTML head is the contents of the <head> element. Unlike the contents of the <body> element (which are displayed on the page when loaded in a browser), the head's content is not displayed on the page. Instead, the head's job is to contain metadata about the document. In the above example, the head is quite small:
<head>
<meta charset="utf-8" />
<title>My test page</title>
</head>
Metadata: the <meta> element
Metadata is data that describes data, and HTML has an "official" way of adding metadata to a document — the <meta> element. Of course, the other stuff we are talking about in this article could also be thought of as metadata too. There are a lot of different types of <meta> elements that can be included in your page's <head>, but we won't try to explain them all at this stage, as it would just get too confusing. Instead, we'll explain a few things that you might commonly see, just to give you an idea.
Specifying your document's character encoding:
<meta charset="utf-8" />
This element specifies the document's character encoding — the character set that the document is permitted to use. utf-8 is a universal character set that includes pretty much any character from any human language. This means that your web page will be able to handle displaying any language; it's therefore a good idea to set this on every web page you create! For example, your page could handle English and Japanese just fine: