HTML Basics for Beginners – The First Steps Of Website Building

You are currently viewing HTML Basics for Beginners – The First Steps Of Website Building

HTML Basics for Beginners – The First Steps Of Website Building

  • Reading time:21 mins read

HTML Basics – What is HTML?

  • HTML is an acronym for HyperText Markup Language.
  • The HTML language is used to create web pages, and the HTML code defines the structure of the web page (e.g. “here’s an image”, “here’s a headline”, “here’s a link”, etc.)
  • Web page code written in HTML is interpreted by browsers (e.g. Chrome, Firefox, etc.) and then displayed based on the code.
  • HTML is a descriptive language, also known as a markup language. Descriptive languages give structure to a set of data, making it understandable to the computer what the content is made up of and how it should be formatted.

 

HTML basics

 

What is the Role of HTML?

HTML structures the content of a website, tagging the elements of the page. These tags are necessary for the browser to interpret a section as a title, paragraph, link, image, etc.

In order to create the attractive, clickable web pages we are used to today, we need two other languages, CSS and JavaScript, in addition to HTML. All the formatting and functionality added to the page using these languages are built on top of the HTML wireframe. 

For more information on the role and place of HTML among programming languages, read our article Is HTML a programming language?

HTML Basics – How is an HTML Element Constructed?

HTML elements basically classify and label the content to be displayed on a page so that the browser can interpret it. We refer to these elements when setting up all additional functionality and formatting.

In other words, they tell you which part is the headline, subheading, paragraph, image, video, link, etc. These labels are called tags.

What is an HTML Tag?

The labels that identify HTML elements are called tags, and they usually have an opening and a closing part.

HTML elements have the following parts:

  1. Opening tag: this marks the beginning of the element
  2. Attribute(s) or value(s): these define the properties of the element
  3. Content: this is what the browser will display
  4. Closing tag: this marks the end of the element

 

There are HTML elements that do not have closing tags or contents like <img>, for example, that can display images on a website.

HTML elements are not case sensitive, meaning the <IMG> and <img> tags work the same way and do the same things.

 

HTML Basics – How are HTML Documents Constructed?

HTML documents typically have two main sections, <head> and <body>. The <head> section contains the information for the whole document, and the <body> section contains the content of the page itself, i.e. titles, paragraphs, images, links, text, everything you see on the web page.

 

Elements of the <head> Section

The head section of the document includes, for example, the page title, language, character encoding system and information needed for mobile viewing (responsiveness).

In addition, the <head> section contains a link to an external style sheet (external CSS document), which stores instructions on how the page should look.

 

  • <head>: this contains metadata, i.e. information about the document itself, not its content. It is placed between the <html> tag that opens the document and the <body> tag that opens the content section.
  • <title>: this mandatory element specifies the title of the document. Do not confuse it with the main title of the page, which will be created with the <h1> tag in <body>. Also important for search engine optimization.
  • <style>: this contains formatting settings that apply to the whole document.
  • <link>: this is most often used to insert an external style sheet, i.e. an external CSS document. The style sheet contains information about the appearance of the page.
  • <meta>: this usually contains information such as the page character set, page description, keywords, page author. These are very useful for the browser and search engines. It also includes information about the screen view, which is important for responsiveness.
  • <script>: this embeds the JavaScript code responsible for the interactivity of the page.
  • <base>: this allows you to set what the browser considers to be the base of the URL in the case of a relative path, and to specify how links should be opened on the given page.

Elements of the <body> Section

What we see displayed on web pages is the content that is located in the <body> section. The following are some examples of the most commonly used HTML tags.

HTML Basics – Commonly Used HTML Tags

 

Common elements of the <body> section Description
<a> (From the word anchor.) Indicates a link. Its mandatory attribute is href, which contains the URL to the website.
<address> Indicates contact information, addresses, contact details.
<article> A unit on the website that is meaningful in its own right and can be interpreted independent of the page, e.g. a forum post, a newspaper article, a blog post, a comment shared by a user, etc.
<footer> Creates the footer of the website, typically containing information about the author, copyright, links, contact details, etc.
<header> The header of the document. It typically contains navigation items, a search function, a logo, etc.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> You can create headings (headline and subheadings) at different levels. H1 is the main heading and h6 is the lowest level heading on the page.
<nav> Creates a navigation bar containing links either within the page or to other pages or subpages. Common examples are menus and tables of contents. 
<section> It is a standalone content unit on the site. It is important to have a proper title for each section.
<audio> It embeds a sound file into the website. The source of the file can be specified with the src attribute or by using the source element.
<img> It inserts an image into the website. Its location can be specified with the src attribute.
<video> It adds a video player interface to the site, which allows you to display videos on the site.

 

HTML Basics – What are Attributes?

HTML attributes add extra information to the element and can have many different functions. There are some that format the element, some that give the source of a link or image, etc. Attributes are placed inside the opening tag that creates the element, e.g:

 

<a href="https://www.w3schools.com">This link points to W3 Schools.</a>

 

 An HTML tag can have multiple attributes, we write them one after the other, without commas, in the opening tag. The values stored by attributes are always enclosed in quotation marks (“…”).

HTML Basics – Commonly Used HTML Attributes 

  • href: this is the attribute of the <a> tag that creates the link. It contains the URL to which the link points.
  • src: this is the attribute of the <img> tag for inserting images, containing the path to the image (folder, webpage, storage, etc. from which the browser can open the image).
  • width and height: these are attributes of the <img> tag, containing information about the size (width and height) of the image
  • alt: this is an attribute to specify alternative text (e.g. a caption), in the <img> tag. If the browser is unable to display the image, this text is displayed instead, and screen reader software will read it when it comes to the image on the page. 
  • style: this adds formatting to the given HTML element (can be written in any tag), specifying size, font, font color, etc. 
  • lang: this is an attribute of the  <html> tag, it specifies the language of the website
  • title: contains additional information about the item

 

HTML basics

 

HTML Basics – HTML Images

If you want to display images on the homepage, you need to add the <img> tag to the <body> section of the HTML code. You can also use various attributes to resize the images or add alternative text.

Interestingly, the images are not technically inserted into the web page, but linked to it. The <img> tag creates a place for the image.

The <img> tag is self-closing, it has no closing tag. Instead, it contains attributes that are written inside the tag.

Its two mandatory attributes are src and alt. The src attribute specifies the source of the image, and the alt attribute contains text that appears in case the image cannot be loaded by the browser.

 

We wrote in more detail about HTML images in our article titled HTML images – HTML img tag. In this article, you will find all useful basic information about HTML images.

 

HTML Basics – HTML tables

HTML tables can be used to organize text content, numbers, images, links into rows and columns and cells.

If you want to place a table on the website you are building, you need to insert the necessary tags in the <body> section of the HTML code. You can also use various attributes to change the appearance and layout of the table. 

The <table> tag can be used to create a table. You can then create the rows of the table with the <tr> tag, and insert the cells with the <td> tag (the abbreviations of table row and table data). The contents of the cells, the actual pieces of data are entered between the <td> tags.

HTML tables have also been covered in our previous article, if you want to learn the tricks of inserting and formatting tables, read our post titled How to create perfect HTML tables? Creating HTML tables.

 

HTML Basics – HTML forms

HTML can also be used to create forms, which are used to collect data from the user.

The <form> element

To create an HTML form, you need to use the HTML <form> tag, its syntax looks like this:

 

<form>
    Form content
</form>

 

“Form content” is replaced by various input elements, such as the text box, the checkbox, or the “share” button that lets the users submit the form.

Commonly Used Form Elements

The most important form element is <input>, but it is worthless on its own. We also have to add type to it, where we specify what input element we want to create.

Typical input elements: 

  • Text
  • Checkbox
  • Button
  • Label

For example, this is what the HTML code for a text input field looks like:

 

<input type=”text”>

 

If you would like to read more about HTML forms, we recommend this short, to-the-point summary: HTML Forms. 

HTML Basics – Where To Learn HTML? 

HTML Web Development Courses

Learning HTML is one of the first cornerstones of any course on website design and development. The creation of an HTML wireframe is necessary for any website in order to build the content and all the functionality. Whatever web development course you sign up for, one of the first modules will most certainly be to learn and practice HTML thoroughly.

 

Learning HTML Individually

This is an area that can be relatively easy for individuals to master through self-learning. There are many resources available, with an almost endless range of articles, tutorials and YouTube videos, and many other resources for learning HTML.

 

HTML basics

 

How Long Does It Take to Learn the Basics of HTML?

HTML can be learned in about 1 week through practice if you spend a few hours on it every day. It’s important to keep practicing later, as this knowledge can easily be lost. 

What is Knowing HTML Good For? 

Knowing HTML is not enough to create websites, but it is an essential foundation for all web programming. HTML coding is the first language you need to learn if you want to build websites.

What Prior Knowledge Do I Need to Learn HTML?

The good news is that you don’t need any prior knowledge to learn HTML. In fact, it is an ideal first step for anyone who wants to start learning programming. Through HTML, you can learn how to use code editors and how to code on a computer. It is a good stepping stone to learning other programming languages.

If you’d like to see more programming tutorials, check out our Youtube channel, where we have plenty of video tutorials in English.

Basics of Programming

In CodeBerry Programming School’s “Basics of Programming” series, we discuss programming-related topics and everything you need to know to get started. Stay tuned for new articles and find the answer to every “what”, “why”, and “how”, you may have had about coding!

Would you like to learn how to code, online? Come and try our first 25 lessons for free at the CodeBerry Programming School.

Learn to code and change your career!

100% ONLINE

IDEAL FOR BEGINNERS

SUPPORTIVE COMMUNITY

SELF-PACED LEARNING

Not sure if programming is for you? With CodeBerry you’ll like it.

TRY THE FIRST LESSONS FOR FREE
Tags: , , , , , , , , , , , , , ,