Last Updated on:
Disclosure: CoreRated is reader-supported. CoreRated earns an affiliate commission when you click through and buy services CoreRated recommends. This comes at no extra cost to you and helps keep our site running.
HTML Basics article is a guide in a Q&A format to help you understand the basics of HTML and write your first HTML code.
To get a great comparison between the most reliable web hosting providers, visit our comparison article.
Get 20% off the Scrimba full-stack path, an interactive, comprehensive video tutorial.
HTML Basics Q & A
How Are Websites Created?
Websites are created using code that is written in a text editor in three main languages that are the core of the web development.
- HTML – content and structure.
- CSS – styling.
- JavaScript – functionality.
What Does HTML Mean?
- HTML stands for HyperText Markup Language.
- HyperText typically means the text that has hyperlinks.
- Markup language means the language that marks up content to identify its type (e. g. a heading, a paragraph, a bulleted list).
What Does HTML Do?
As a markup language, the purpose of HTML is to define the structure of the web page in a way that organizes its content.
What Is A Text Editor?
Learning HTML basics needs somewhere to write your code into. This type of software is called a “text editor”. A text editor is an application that enables you to write and edit text. For writing code, the most popular and recommended text editor is Visual Studio Code. You can download it for free here.
What Is An index.html File?
To start learning HTML basics you need a file with .html extension. index.html is the standard file name for the main page of your website.
What is an HTML element?
An HTML element contains opening and closing tags, content and optional attributes.
Tags are used to specify a certain characteristic to the content. For example, the p element is a paragraph element, the h1 element is a heading 1 element (the largest heading of the page), the img element is the element used to embed an image on the web page.
The content of the element is embedded between the opening and closing tags. Attributes are included in the opening tags. The value of the attribute is always written inside quotation marks.
The HTML tags are placed between less than and greater than characters. The closing tags always have a slash after the less than character.
Some elements have only one tag. For example, the img element only has one tag <img>. This is called a void element.
Here’s the HTML element structure:
<opening tag attribute=”value”>Content</closing tag>
What Is HTML Boilerplate Code?
One of the most important, easy to apply HTML basics is the boilerplate code. A boilerplate code is a block of code that you use every time you do a certain task. For example, this is the boilerplate code for an HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>Every time you create an HTML file, you write this code. You only change the title to represent the title of the page and the content of the body element to create the content shown to the user.
When learning HTML basics on Visual Studio Code (VSCode) software, you can use a great feature already built-in the VSCode application. It’s called the Emmet toolkit. The Emmet toolkit automatically enters code for you if you write specific abbreviations. For example, to get the HTML boilerplate code in one click, you can open your Visual Studio Code text editor, create a new index.html file and type an exlamation mark “!” and then click tab. This will enter the whole code block for you.
What Does HTML Boilerplate Code Mean?
<!DOCTYPE html> This tells your browser that you’re using HTML5, the latest version that is fast and stable.
<html lang="en"></html>This is the main element of the HTML file. It contains the lang attribute which specifies the language of our HTML page.
<head></head>This is the place where you write the meta data of the document. Meta data is the data used by the browser or screen readers to get more information about the web page. For example, the page title, description, author and many other parameters. This information is not shown to the user.
<body></body>This is where the actual content of the web page is. It includes anything on the web page including text, images, videos and any other content.
<meta charset="UTF-8">This element is the meta element. It contains the meta data of the web page. It lies in the head section of the web page.
It defines the character set of the web page to UTF-8 which includes almost all letters from all languages and special characters.
<meta name="viewport" content="width=device-width, initial-scale=1.0">This meta element contains the view port information. This means how the content is displayed on different screen sizes. This setting ensures that the web page is responsive. Responsive web pages are pages that look good on all screen sizes.
<title>Document</title>This is the title of the page. It shows in the browser’s top of the page and if you’re saving the page to favorites.
<p>Hello World</p>This line was added by me to show you your first element to show on your page. The p element is the paragraph element. It surrounds the paragraphs to give them the semantic (meaning) of a paragraph of text and also to separate it from the next content by a line break. Hello world is a statement known by programmers to be displayed as the first line of code of a specific language.