With much of today’s business taking place on the internet, knowing a thing or two about how websites work can only be an advantage. If you’re interested in coding web pages, the first thing you should learn is HTML.
HTML is the very basis of any web page. This markup language might look intimidating at first glance, with its mysterious brackets and forward slashes, but in reality, it’s all quite simple. So read on to get started if you’re wondering, “What are the basics of HTML?”
What Is HTML?
HTML (HyperText Markup Language) is a code for web pages that defines their structure at the most basic level. Developed in the early 1990s, it’s the standard markup language for building a website from the bottom up today. A website’s HTML code tells your browser how the page is organized and formatted.
After typing a URL into the address bar and hitting Enter, it determines what you’ll see.
How does this process work? You request an HTML file from the website’s server whenever you enter a web address. Upon receiving the coded information, your browser will display the website as the developers intended.
Since it was first developed, HTML has gone through some revisions, with more capabilities introduced each time. In 2022, the current standard being used is HTML5.
What Does an HTML Document Consist Of?
So, now you know what HTML is used for. But what does it actually look like? An HTML document comprises various “elements” that work together to create a webpage. Elements can also be further separated into several components, be they content, attributes, etc. But some may be empty.
Furthermore, some elements must follow a certain order within the HTML document. In addition, elements may be nested within other elements, creating a highly structured hierarchy within the code.
HTML Elements and Their Anatomy
As mentioned, HTML codes contain various elements containing information regarding the web page’s structure. These elements are not case sensitive, but developers typically use lowercase for all HTML coding to keep documents neater and easier to read.
Most HTML elements follow a similar pattern. An element usually consists of tags and content; an opening tag is followed by the content we want to convey, and a closing tag concludes the element. Tags are wrapped in angle brackets, with the closing tag also containing a forward slash signifying the element’s end. Here is a simple example: <p>Content</p>.
In the above example, <p> is the opening tag that defines the element’s name, which is a paragraph in this case. Next, the element is finished by the </p> closing tag. Inserting closing tags is essential – browsers need them to display web pages correctly.
Without the appropriate closing tags at the right spot, you can expect numerous strange errors in the result. Finally, the content contained by the tags will appear directly on the web page. In our example, the content is text, but it can also be an image or other types of content.
Types of HTML elements
The paragraph elements mentioned above are but one of many types of elements you’ll come across in HTML documents; there are over 100 different element types. You won’t have to learn them by heart, as developers usually use a reference for the trickier codes. Let’s look at some of the most common basic elements in virtually any HTML code.
Here are the primary HTML elements that make up the skeleton of all HTML documents:
- <!DOCTYPE html> tells your browser that this is an HTML5 document.
- The <html> or “root” element needs to wrap your entire document.
- The <head> element contains metadata like keywords and meta descriptions about your webpage.
- You can use the <title> element to define the page title that will appear in your browser’s tab when you open the website.
- The <body> element contains all the visible contents of your webpage, including text, lists, images, etc.
Below are frequently used HTML elements to organize text:
- The <p> element is used for introducing paragraphs.
- Elements <h1> through <h6> define various levels of headings within a text.
- <ul> and <ol> mark unnumbered and numbered lists respectively. List items are defined by the subordinate <li> element.
- <div> and <span> are universal containers for text (or other elements) you want to further style with other codes.
- <br> and <hr> are used to break up your page’s contents.
You can also use section elements in your HTML document to better organize your code, which may include the following:
- The <nav> element is used for menus and tables of content.
- The <main> element comprises the main content of the body section.
- You can organize other elements within the <header> or <footer> containers on your page.
- The <section> element can be used for generic sections that don’t fit into other categories.
As stated, text isn’t the only thing you can insert into your HTML page. Below are elements used for other types of content:
- Use <img>, <audio>, and <video> to embed media to your page using a source.
- The <a> element is used for creating hyperlinks.
- Use elements like <form>, <input>, <label>, <button>, etc. to create interactive forms within your HTML documents.
While this is far from a comprehensive list of HTML elements, you’ll be able to do most basic tasks without needing much more at your disposal.
How can these basic elements produce endless variations of web pages? The answer lies in attributes. All HTML elements can be equipped with attributes that convey extra information that won’t directly appear in the content.
However, these additional pieces of data can give elements a tremendous amount of further detail and determine how they will appear on your page. An element may be equipped with several attributes at once.
Attributes are inserted in the opening (or starting) tag of the element. They consist of an attribute name, followed by an equal sign and an attribute value in quotation marks. For example, an image element <img> will always have a source attribute that specifies the location of the image to be embedded.
The image may be external but can also be hosted on the website. The HTML code and the attribute would look as follows: <img src=“image.png”>. In this case, “src” is the attribute name for source, while “image.png” (together with the quotation marks) is the attribute value.
Different HTML elements may get different kinds of attributes. Here are some of the common attributes you can add to your elements:
- alt – used to add alt text to images.
- style – format elements with custom colors, fonts, etc.
- href – used with the <a> element, it determines where a hyperlink will lead.
- src – as mentioned above, this attribute defines sources.
- width and height – resize images and other elements by assigning them custom width and height.
When you’re new to HTML, it’s a good idea to leave yourself helpful reminders inside your code. Fortunately, HTML allows you to add comments in a way that won’t affect your code or the final result. Developers use special markers to tell browsers that the information enclosed isn’t part of the displayable document. Insert a reminder in your code between the “<!–” opening and “–>” closing tags.
The Organization of an HTML Document
HTML documents have specific anatomy that makes keeping your code organized easier. Those asking, “What are the basics of HTML?” might want to memorize this fundamental order to get a head start.
Maintaining the correct order is one of the trickiest parts of keeping an HTML file organized, as elements are often “nested” inside each other. This means that an element is located within another element.
For instance, we already mentioned that the <html> element wraps your entire document. Therefore, all the remaining elements are essentially nested within it. That doesn’t sound too complicated. But it can become increasingly complex as the number of elements you use multiplies.
The key to mastering nesting is paying close attention to closing tags. You always have to close the most recently opened tag before moving on to any of the outer layers, or the result might not exactly be what you expected.
Get Started With HTML
If you’re interested in learning how to build websites and have found yourself asking, “What are the basics of HTML?” you now have a better idea of what this markup language is all about.
With just the elements described above, you’re already equipped to create a simple website, and it’s just the beginning. Don’t stop here. Delve deeper into the topic. Learning the basics might not take more than 10 minutes, but exploring HTML’s full potential takes time and practice.