HTML stands for hypertext markup language. It's made of keywords and commands that web designers use for creating websites.
Hypertext is text with links that readers can simply click on to go to another page or another part of the page. Meanwhile, markup language uses tags or plain text with special markings to define the sections of a page, such as headers and footers, and other elements, including tables and images.
HTML is considered one of the three essential tools in webpage creation: HTML provides the structure or the way text, pictures, and so on will appear on the website. CSS (cascading style sheets) sets the visual properties of these elements, such as colors, format, and layout. Meanwhile, Javascript makes these elements behave in certain ways depending on a user's action. For example, the font size of text can increase when users hover their mouse or click a button on a page.
To write HTML, you'll need a text editor, like Notepad, Brackets, or Atom. HTML editors make sure your coding is clean and functional. They help reduce errors by automatically inserting tags (auto-completion) and other common elements or through debugging.
What's HTML Used For?
HTML is the default language of websites and web-based documents. It helps a browser understand the structure and style of a document or files for viewing over the internet. It allows your web pages to host audio, videos, spreadsheets, and other applications. It also facilitates navigation within web pages or between websites through hypertext.
Moreover, website makers can use HTML to design forms for ordering products, making reservations, or searching for information. HTML is, therefore, the basic building block for building your brand and running an e-commerce site or an online subscription-based business.
What Makes Up an HTML Document?
The primary components of an HTML document are tags and elements. They tell your browser how to display your content. Tags start and end with angled brackets or the "less than" and "greater than" signs. Letters between them are called element contents.
The following make up the basic structure of an HTML page (in their order of appearance):
-
Document type declaration (DTD)
The <!DOCTYPE html> appears at the start or very top of an HTML document. It tells the browser what HTML version was used to produce the page.
-
HTML root element
The <html>, which is written below the DTD, acts like the "main container" that holds all the other elements. It can specify the language of the HTML document. For instance <html lang="en-US"> means the page is written in American English.
-
Head
The <head>, which you'll find between <html> and <body>, contains metadata describing information about the page. They include:
- The <title> or the overall subject of the webpage. It's separate from but should match the headline tag that appears in the body.
- The <style> defines how elements should show up in the browser. This includes the color of the headline, text alignment, background color of the body, and so on.
- The <link> indicates the resources (i.e. another webpage or external style sheet) linked to the HTML page.
- The <meta> contains keywords, author, and page description.
- The <base> refers to the default URL.
-
Body
The <body> is the main portion of the document that contains the information, which the browser displays on the screen. It can include the following:
- The header features the site title, logo, main navigation, and search bar.
- The main content covers the article title or heading, article content, date posted, author, and so on.
- The sidebars display widgets and secondary navigation, such as archives by category or date.
- The footer offers contact info, social links, copyright, and tertiary navigation.
How Does HTML Work?
The website author types an HTML document that's saved with an extension .html or .htm (filename.html or filename.htm). This file is then uploaded to the Worldwide Web, which would show how it looks online.
To open the HTML file from your PC, go to File Explorer, right-click the file (or double-click it if you're using Mac) and select "Open with" from the menu to launch in your preferred browser. Google Chrome, Mozilla Firefox, Safari, and other browsers can recognize and read this format. You can also launch your browser, press Ctrl+O to pull up the "open" menu, and double-click your html file.
The browsers use the HTML elements to interpret the content of the page and render them correctly on the screen in a neat and formatted way.
