HTML and CSS

Getting Started with HTML

Kolawole Eniola's photo
Kolawole Eniola
·

4 min read

Different Technologies in Making a Website

Web development technologies refer to the multitude of programming languages and tools that are used to produce dynamic and fully featured websites and applications. Examples of different technologies in making websites include HTML, CSS, JavaScript, PHP, Python, React, Bootstrap, Angular, WordPress, MySQL, Django, Ruby on Rails, Angular JS, Typescript, MongoDB, Laravel, and so on.

History of HTML

HTML's first version was written by Tim Berners-Lee in 1993. The most widely used version throughout the 2000s was HTML 4.01, which became an official standard in December 1999. The first version consists of 18 HTML tags. Now, there are currently about 140 HTML tags, although not all of them are supported by modern browsers. In 2014, HTML 5.0 was released and used worldwide. It's said to be the extended version of HTML 4.01, which was published in 2012.

HTML stands for HyperText Markup Language. It is one of the fundamental technologies required for web development. It provides the base structure for a web page. HTML code ensures that all the content on a website is properly formatted. Without Html, a browser couldn't display text or load images and other elements.

HTML Document Structure

The basic structure of HTML is <!DOCTYPE>, <html>, <head>, <title>, <body>. A Doctype declaration tells the web browser which version of HTML the page is written and it must be specified on the first line of each web document. The <html> element immediately follows the DOCTYPE declaration. It tells the browser that the page will be formatted in HTML and optionally which world language the page content is in. The <head> element surrounds all the special "behind the scenes" elements of a web document. Most of these elements do not get displayed directly on the web page. The <body> elements surround all the actual content(text, images, videos, links, etc) that will be displayed on our web page. The <title> element defines what text shows on the web browser's title bar.

HTML Elements

The <html> element is the root element and it defines the whole HTML document. It's defined by a start tag, some content, and an end tag. It is everything from the start tag to the end tag: <tag name>content</tag name>. Examples of some HTML elements include:

<p> My first paragraph </p>

<h1> My first Heading </h1>

<br> line break. It does not have an end tag because it is an empty element.

HTML Tags

HTML tags are simple instructions that tell a web browser how to format text. You can use tags to format italics, line breaks, bullet points, and more. These tags lie in the HTML of every webpage. An HTML tag must contain three parts which are:

An opening tag: this will start with a <> symbol

Content: the short instructions on how to display the on-page element

A closing tag: this will end with a </> symbol.

Examples of HTML tags are

<p> Paragraph Tag </p>,

<b> Bold Tag </b>,

<i> Italics Tag </i>,

<u> Underline Tag </u>

HTML Attributes

HTML Attributes describe the characteristics of how an HTML element appears. It provides additional information about HTML elements and appears within the HTML tags. The following are key features of HTML Attributes:

  • They always come in pairs(attribute_name ="value")

  • Attribute's name are case-insensitive

  • Attributes should always be used with the start tag

  • We can add multiple attributes in one HTML element.

The following are examples of HTML attributes:

  • href Attribute: We use the <a> tag to define a hyperlink. In the <a> tag, the href attribute specifies the URL of the page the link goes to. It consists of two components. The URL(actual link) and the anchor text or clickable text that appears on the page.

  • Src Attribute: We use the <img> tag to add an image in an HTML page. It specifies the image path.

  • Width and Height Attributes: The <img> tag also contains the width and height attributes which specifies the width and height of the image in pixels

  • Alt Attributes: It is used with the image <img> tag. It helps us to specify the alternative text in case the image cannot be displayed on the website.

Differences Between HTML Tags and Elements

HTML Tags are building blocks of HTML pages. They tell the browser how it should display content to the user while HTML elements are components used in HTML pages. They consist of a start tag, some content and an end type tag. You can also have attributes in your tags such as class or id name. HTML elements can be nested unlike HTML Tags which can not be nested.

Metadata in HTML

The <meta> tag defines metadata about an HTML document. Metadata is data(information) about data. <meta> tag always go inside the <head> element, and are typically used to specify character set, page descriptio, keywords author of the document, and viewpoint settings. Metadata will not be displayed on the page, but is machine parsable. Metadata is used by browsers(how to display content or reload page), search engines(keywords), and other web services.

All these are what I was taught by Codevixen mentors. Thanks for reading. I am opened to any correction or addition.

HTML5HTMLHashnode