i
Search icon

Learn HTML and CSS in 10 Days

Self Learning   /   Study Material   /   Common HTML Terms
Previous
Next

Common HTML Terms

As this is your first time with HTML, you are going to face new and strange terms. Don't worry, it's normal. With time you will start to develop an idea about all of them, but the three most-used HTML terms which we should begin with are elements, tags, and attributes.

Elements

Elements are designators that characterize the content and structure of objects present inside the webpage. Two of the most often used elements are paragraphs (written aselement) and headings (starts from and ends at ).Others includes etc.

Elements can be distinguished by the utilization of less than (<) and greater than (>) brackets with the element name enclosed in it. The elements seem like this:

Tags

The less than and the greater than angles brackets enclosing an element forms a tag. Tags generally occur in pairs, i.e., opening tag and a closing tag.

An opening tag marks the start of an element. As said earlier, the element is enclosed inside the less than and the greater than symbol, Take up an example, like

The closing tag marks the end of an element. It contains a ‘<’ sign with a ‘/’ then the name of the element and ‘>’ at the end. Example -

The content enclosed by the opening and the closing tags is said to be the content for an element. The 'Heading 1' element consists of a (opening tag) and (closing tag). Contents written between them is the content of the 'Heading 1' element.

Attributes

Attributes are properties that support an element with some additional information. Some of the most common attributes are

  • Class attribute – It classifies an element.

  • Id attribute – It identifies an element.

  • Href attribute – It offers a hyperlink referencing to a linked source.

  • Scr attribute – For an embedded content, this attribute helps in providing the source.

Attributes are enclosed inside the opening and the closing tag, succeeding in the name of the element. Attributes generally consist of a value and a name. The format is like, first comes the attribute name, then the '=' sign and then the desired value. Let's take of an example for element with the 'href’ attribute.

The above code will display Amazon on the web page and will redirect the user to  on clicking “Amazon”. Thus in the above code:-

We hope that you have got a good idea of HTML elements, tags, and attributes. Now let's sum up these things and make our first web page.

Building up HTML Document Structure

Plain text document that has a .html extension (not .txt) are known as an HTML document. To start writing the HTML code, one needs to have a text editor with which the individual is comfortable. Unfortunately, this does exclude Microsoft Word. For writing HTML and CSS codes, 2 of the most popular ones are Sublime and Dreamweaver. Free options likewise incorporateTextWrangler for Mac and Notepad++ for Windows.

Every HTML documents consists of the below mentioned elements and declaration

The or the Document Type declaration is kept at the start of the HTML document. Its main function is to make the web browsers accustomed with the HTML version. After the Document Type declaration comes the element which marks the start of the document. The top of the document is identified by element which is placed inside the element. The head contains the metadata (accompanying data regarding the page). Contents that are located inside the

element is not shown on the web page. Apart from that, the element consists of links to any outside documents, the element which contains the title of the document (the name that is shown on the title bar of your browser), etc.

Contents that you can see on the web page is written inside the element. Have a look at the code below to get a clearer picture of the things described above.

The above code says the web browser about the start of the document by (document type declaration), succeeded by  element. The and the elements are enclosed inside the element. The

element consist of tag, character encoding of the web page, and the the title of the document which appears in the title bar. Now inside the body element there are 2 things i.e.is used for headings and is used for paragraph. As both the elements are present within the body element, they are appeared on the web page.When an element is placed within another element, it is called a nested element. It is a smart thought to indent that component to keep the document structure efficient and decipherable. Thus looking through the above code we can say that element are the nested element present inside the

element. The method of indenting elements proceeds as new elements are included within the components.

Self-Closing Elements

We hope that you have noticed one thing a bit different in the above code. Except for the element, all tags consisted of a closing tag. Don't worry; we have not done it intentionally. We just wanted to conclude that not every element which you are going to come through in HTML need to have an opening and a closing tag. Some elements are okay with a single tag, and the

Code Validation

Regardless of how cautious we are when composing our code, we will commit errors. Thankfully we have validators for checking our HTML and CSS codes. The W3C contains the validators which scan the HTML and CSS code for mistakes. Validation of our code does not just encourage it to render appropriately over all browsers, yet besides, helps show us the prescribed procedures for composing them.

© All rights Reserved | SelfLearning.io