# Getting started with HTML
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678782399620/6adfc2ee-fa99-4dcd-bd4e-4eaec6f79a45.jpeg align="center")
### INTRODUCTION
Web programming has become an essential skill for anyone looking to build a website or develop a web application. At the core of web programming is [HTML](https://en.wikipedia.org/wiki/HTML), which stands for **Hypertext Markup Language**. HTML is the backbone of every website and provides the foundation for structuring web pages. It's a markup language that uses tags to define the structure, content, and layout of a web page. In this article, we'll dive into the basics of HTML and how to get started with this essential web programming language. I will be sharing all I learned in the first week of my Front-end web development journey with [Codevixens Academy](https://twitter.com/Codevixens?t=kOTVlZZfys78d7VyS0plbg&s=09). By the end of this article, you'll have a solid understanding of HTML structure, tags, attributes, elements, and all you need to get started in building your web pages.
### DIFFERENT TECHNOLOGIES IN MAKING A WEBSITE
When it comes to building a website, there are various technologies that you can use. Each technology has its unique advantages and disadvantages and choosing the right one can make a significant difference in the development process and the result. Here are some of the different technologies that you can use to make a website:
1. **HTML and CSS**: As mentioned earlier, HTML is the foundation of every website. HTML defines the structure of a web page, while CSS (Cascading Style Sheets) defines the visual layout and presentation of the page. HTML and CSS are the most basic technologies you need to know to build a website.
2. **JavaScript**: JavaScript is a programming language that's used to add interactivity to a website. With JavaScript, you can create animations, validate forms, and interact with APIs, among other things.
3. **Front-end Frameworks**: Front-end frameworks, such as React, Angular, and Vue, provide a pre-built structure for building a website. They can speed up development and make it easier to build complex user interfaces.
4. **Content Management Systems (CMS)**: A CMS, such as WordPress or Drupal, provides a pre-built platform for creating and managing website content. CMSs can be beneficial for building websites quickly and easily, especially for non-technical users.
5. **Server-Side Scripting Languages**: Server-side scripting languages, such as PHP and Python, allow you to create dynamic web pages that can interact with databases and other web services.
Choosing the right technology depends on various factors such as your goals, your skills, and the needs of your website. Understanding the different technologies available can help you make an informed decision and create a website that meets your needs.
### HISTORY OF HTML
HTML, which stands for Hypertext Markup Language, has been the foundation of the web since the beginning. It was first proposed by [Tim Berners-Lee](https://en.wikipedia.org/wiki/Tim_Berners-Lee), a British computer scientist, in 1989 while working at CERN, the European Organization for Nuclear Research. Berners-Lee's goal was to create a way for researchers to share information and collaborate on projects regardless of their location.
The first version of HTML, HTML 1.0, was released in 1993. It was a basic markup language that allowed developers to create structured documents with headings, paragraphs, and lists. The second version, HTML 2.0, was released in 1995 and added support for tables, images, and forms.
HTML 3.2, released in 1997, introduced new features such as style sheets and frames. Style sheets allowed developers to separate the presentation of a web page from its content, while frames allowed multiple pages to be displayed on a single screen. This version of HTML also saw the introduction of the DOCTYPE declaration, which is used to specify the HTML version being used.
HTML 4.0, released in 1997, was a significant update that added support for scripting languages such as JavaScript and introduced new form elements. It also introduced the concept of cascading style sheets (CSS), which allowed developers to style web pages more easily and efficiently.
In 1999, the World Wide Web Consortium (W3C), the organization responsible for developing web standards, released the first version of XHTML (Extensible HTML). XHTML was a stricter and more modular version of HTML that was designed to be compatible with XML, a more powerful markup language.
HTML5, the current version of HTML, was released in 2014. It introduced new semantic tags such as <header>, <footer>, and <article>, and added support for new multimedia elements such as <video> and <audio>. HTML5 also introduced new APIs for drag and drop, geolocation, and web storage.
Overall, HTML has undergone significant changes over the years, but its core principles have remained the same. It continues to be an essential technology for building websites and web applications.
### HTML DOCUMENT STRUCTURE
The structure of an HTML document is important for both developers and browsers. Browsers use the structure to interpret the contents of a web page, while developers use it to organize and style their content.
An HTML document consists of several elements, including the [doctype](https://www.w3schools.com/tags/tag_doctype.asp) declaration, the HTML element, the head element, and the body element. The doctype declaration informs the browser the that it is an HTML document and specifies the version of HTML being used, while the HTML element contains all the other elements in the document.
The **head** element contains [metadata](https://www.w3schools.com/tags/tag_meta.asp) about the document, such as the **title**, author, and keywords. This information is not displayed on the web page itself but is used by search engines and other tools to understand the content of the page.
The **body** element contains the actual content of the web page, such as text, images, and links. Within the body element, several other elements can be used to structure the content, including headings, paragraphs, lists, and tables.
Here, is a basic structure of an HTML document
```xml
TITLE GOES HERE
YOUR CODE GOES HERE
```
### HTML ELEMENTS
HTML elements are the building blocks of a web page. They are the individual components that make up the structure of an HTML document, and they allow developers to add text, images, links, and other content to their pages.
Each HTML element consists of a start tag, content, and an end tag. The start tag is enclosed in angle brackets and identifies the type of element being used. The end tag is also enclosed in angle brackets but includes a forward slash before the element name. The content of the element is placed between the start and end tags. For example, the following code creates a simple HTML paragraph:
```xml
This is a paragraph.
```
In this code, <p> is the start tag. "This is a paragraph" is the content of the paragraph, and </p> is the end tag. When the web page is rendered in a browser, the content of the paragraph will be displayed in the specified font, size, and color.
### HTML TAGS AND ATTRIBUTES
[HTML tags](https://www.javatpoint.com/html-tags) are used to define the structure and content of an HTML document. They are enclosed in angle brackets (< >) and placed at the beginning and end of an element to indicate the beginning and end of that element. For example, the <head> tag is used to define the header section of an HTML document, while the <body> tag is used to define the main content of the document.
```xml
```
[HTML attributes](https://www.w3schools.com/html/html_attributes.asp), on the other hand, provide additional information about an element. They are used within the start tag of an element and are separated from the tag name by a space. Attributes consist of a name and a value, separated by an equals sign. For example, the <a> tag is used to create hyperlinks and includes an **href** attribute to specify the URL of the page that the link should go to.
```xml
Click here
```
In this code, **a** is the element tag for an [anchor](https://www.w3schools.com/tags/tag_a.asp) element, which is used to create links. The href attribute specifies the URL of the page that the link should go to, while the content of the element "Click here to visit our website" is the text that will be displayed on the web page.
HTML tags and attributes work together to define the structure and content of an HTML document. They allow developers to create a wide range of elements, from simple paragraphs and headings to complex tables and forms. Understanding how to use HTML tags and attributes correctly is an important part of web development, as it enables developers to create web pages that are both functional and visually appealing.
### HTML TAGS vs. ELEMENTS
While the terms "tags" and "elements" are often used interchangeably, they have different meanings in HTML.
**HTML Tags:**
HTML tags are used to define the structure and appearance of a web page. They are enclosed in angle brackets (<>) and consist of a keyword that describes the function of the tag. HTML tags are used to create headings, paragraphs, links, images, and other content elements on a web page.
For example, the <h1> tag is used to create a top-level heading, while the <p> tag is used to create a paragraph. Similarly, the <img> tag is used to insert an image on the page, and the <a> tag is used to create a hyperlink.
**HTML Elements:**
An HTML element is a combination of an HTML tag and its contents. Elements are used to define the structure and content of a web page. An HTML element consists of a start tag, content, and an end tag.
For example, the <p> tag is used to define a paragraph element. A paragraph element starts with a <p> tag and ends with a </p> tag. The content of the paragraph goes between the opening and closing tags.
Here's an example of a simple HTML document that includes several tags and elements:
```xml
My Page
Welcome to My Page
This is a paragraph of text.
Visit Example.com
```
In the example above, the <html> tag is used to define the start of the HTML document. The <head> and <body> tags are used to define the different sections of the document. The <title> tag is used to set the title of the page. The <h1> tag is used to define the main heading of the page. The <p> tag is used to define a paragraph of text. The <img> tag is used to insert an image, and the <a> tag is used to create a hyperlink.
In conclusion, HTML tags and elements are essential components of creating web pages. Tags are used to define the structure and appearance of a page, while elements are a combination of tags and their contents. Understanding the differences between tags and elements is crucial for building well-structured and accessible web pages
### WHAT'S IN THE HEAD? METADATA OF HTML
When you open a webpage, you see the content on the screen that comprises text, images, videos, links, and other media. However, behind the scenes, there is a lot of information that your browser uses to render the page. This information is stored in the head section of the HTML document, which contains metadata or data about data.
Metadata is information about the page that is not visible on the screen, but it provides important context and instructions to the browser. It includes information about the page title, author, description, keywords, character set, and other details that help the browser understand and display the page correctly.
Let's take a closer look at some of the most common types of metadata you'll find in the head section of an HTML document:
```xml
My Page
```
* **Title**: The title of the page is defined using the <title> tag, and it appears in the browser's title bar and search engine results. The title should accurately reflect the content of the page and contain relevant keywords for search engine optimization.
* **Description**: The description meta tag provides a summary of the page's content. This information is often displayed in search engine results, so it should be concise, accurate, and compelling to encourage users to click through to the page.
* **Keywords**: The keywords meta tag lists the main topics and phrases that the page covers. It is no longer used by most search engines to determine page ranking, but it can still be useful for internal site search and organization.
* **Character set**: The character set meta tag specifies the encoding used for the page's text. This is important for ensuring that special characters and symbols are displayed correctly.
---
* **Viewport**: The viewport meta tag controls how the page is displayed on different devices and screen sizes. It can be used to set the initial zoom level, the width of the page, and other display settings.
* **Author**: The author meta tag specifies the name of the person or organization responsible for creating the page. This information can be useful for copyright and attribution purposes.
In conclusion, the head section of an HTML document contains a variety of metadata that provides important information about the page's content and how it should be displayed. By understanding and optimizing this information, you can improve the accessibility, usability, and visibility of your website.
Now that you understand the concept of HTML in building a website, here is how to get started:
1. Download Visual studio code.
2. Open and create a new HTML file. Make sure to add a **.html** extension which indicates that it's an html file. It is ideal to name your first file for every website **index.html** to mark the default page for the website.
3. Using the examples of html document structure, tags, attributes, and elements explained earlier, write your html document.
Save and run on the browser.
Congratulation on creating your first web page. In my next article, I will be dissecting basic HTML tags and HTML - formatting tags.
Happy coding!