Hyper Text Markup Language (HTML)

HyperText Markup Language, or HTML for short, is a simple programming language used to format online content. It’s HTML that allows web content to be read and displayed correctly inside of internet browsers. It’s a way to use text to describe the structure and contents of a website. So, unsurprisingly, it forms the base of all sites on the internet.

An HTML file is a plain text file with a .html extension. It’s made up of HTML tags as well as the webpage contents.

What are HTML Tags?

HTML tags are the way an HTML file communicates the nature of an element to the browser reading the file. There are HTML tags for multiple purposes and they all follow a similar layout.

For example, the tag communicates that the text within these tags is to be considered an HTML document. It’s often how an HTML file starts and ends. The first component of the tag communicates its opening, and the second component closes it.

There are also stand-alone tags that don’t require a closing component.

It’s vital to use the right tags so that the web browser knows how to display an element correctly. Here are a few examples of tags and their purpose:

• <p> text </p>: This tag includes text and marks a paragraph
• <a> text/image </a>: The a-tag marks a link
• <img>: The image tag tells the browser to display this content as an image
• <h> text </h>: The h-tag marks its contents as a headline
• <nav> </nav>: The contents of this tag commonly form the navigation in a site’s header and consists of internal page links like contact, about, shop, blog, etc.

Many tags simply exist to help structure content for the programmer and organize the different sections of the code. A header tag, for example, communicates that the material within it belongs at the head of the page whereas a footer tag marks all the content in the footer.

The body tag contains every bit of content found on a webpage. There are also division tags to help the coder identify sections of content that should be grouped together. While the website viewer will never see these groups, they allow the programmer to move several pieces of content as one.

Tag Attributes

Attributes allow the HTML programmer to customize a tag and add additional information.

For example in the line:

<p align = “center”> This is a paragraph </p>

The text “This is a paragraph” will appear aligned to the center of its container.

Or the line:

<Img src=”image1.png” alt=”profilePicture”>

Where “src” defines the source of the image, the browser knows which image to load. The “alt” sets the description of the image so that if the image can’t appear, the user can still read its primary purpose. This also allows speech software to read out image descriptions for visually-impaired users.

In the case of the image tag, the “src” and “alt” attributes are a requirement for the image to function correctly whereas in most other tags, attributes are optional.

To see an example of HTML tags and attributes, you can click Ctrl + Shift + I on any website to open the developer tools. This permits you to view the HTML file the website is based on.

HTML and CSS

HTML files often work in conjunction with CSS (Cascading Style Sheets) files. These files are used to tweak the attributes of an HTML tag remotely and style the website so that it looks a certain way. CSS allows programmers to alter the color, width, border, padding, margins, fonts, images, icons, etc.

While some of these elements can be tweaked within HTML code, a separate CSS file makes it easier to keep the two processes separate and maintain a cleaner code.

CSS files function by referring to named HTML Tags in the associated file. Without these added specifications, an HTML-only website may look like nothing but lines of text placed in vertical order following the flow of the HTML. It would consist only of links, images, and writing.

After being crafted with a style sheet, the webpage usually looks much more engaging. HTML and CSS are both programming languages utilized by web designers to make websites appear as they do in their final browser versions.

If you can’t program in HTML, don’t worry! Nowadays, there are many website builder services out there that can do this for you. As you use drag-and-drop elements to create a website visually, your website’s HTML file is created by the service in the background. This is what the internet browsers read when your site goes live. However, having access to the HTML and CSS files and knowing how to manipulate them ultimately gives you the most freedom to customize your website.