HTML ELEMENTS AND MORE DETAILS
The Anatomy of an HTML Tag
As we already have been repeated that HTML is the foundation of Websites and other components besides HTML are generally used to describe a web page’s appearance/presentation (CSS)or functionality/behaviour (JavaScript).On the other hand, as we already have been mentioned that HTML is the Mark-up Language to annotate text, images, hyperlinks and other contents for display in our Web browser. We should pay attention on this point again and again .That mark-up language includes special “elements” such as <head>…</head>, <body>…</body>, <footer>…</footer>,<h1> …</h1>,<br>, <a> and many others.
If you take look these elements more closer according to their syntax . You should have realized that there is a few things common compare to each other. An HTML elements are set off from other texts by “tags”, which consist of the element name surrounded by “<" and ">". These tags make requests to the browser asking it to structure and display our plaintext in way that we wanted it to be shown. The name of an element inside a tag is case insensitive. It can be written in uppercase, lowercase, or a mixture. For example, the tag can be written as <header>….</header>, <Header>….</Header>, or <hEAder>….</hEAder>, in any other way. Additively, the tag would be exist in 2 way. First way is that the tag consists opening tag and closing tag and the our plaintext is written between these 2 tag. You can see the example of this type at below.
Second way of consist tag is that consists self-closing tag. It is used to communicate lack of content in between the opening and closing tags such as <br>(stands for line break),<hr>( stands for horizontal rule).In order to make it more clear , I attached another image at below.
After all of this information , you would be able to think that how can I know which elements consists of opening tag and closing tag or self-closing tag. At that point , reading documentation becomes our developer life.
Text Fundamentals
One of main jobs of HTML is to give text structure and meaning also known as semantics so that a browser can display our text in way that we wanted it to be shown. We will take look the meaning of semantics for us. The way that HTML can be used to structure a page of text by adding headings and paragraphs, emphasizing words, creating lists, and more.
Most structured texts consist of headings and paragraphs. Whatever you read , it does not matter. It might be magazines, newspapers, book etc.
The headings and paragraphs makes the reading experience easier and more enjoyable in our web pages. How do we do that by using HTML?
Heading
<h1>…</h1>,<h2>…</h2>,<h3>…</h3>,<h4>…</h4>,<h5>…</h5>,<h6>…</h6>
There are 6 elements to represents headings. You might be able to think why do we need 6 type of heading element in our web page. Answer of the question is super basic. Each element represents a different level of content in the document. <h1>…</h1> represents the main heading, <h2>…</h2> represents subheadings, <h3>…</h3> represents sub-subheadings, and so on. It is recommended that we should only use <h1>…</h1> one time for each page.
Paragraph
<p>…</p>
The <p> tag defines a paragraph. Browsers automatically add a single blank line before and after each <p> element.
Lists
HTML lists allow web developers to group a set of related items in lists. We encounter lists in everywhere in web pages. We can say that there are 2 type of list. Frist one is Unordered List and Second one is Ordered Lists.
Unordered List: Starts with <ul>…</ul>. Each items that we want to list , put between these tags by using <li>…</li>. Let me give real example.
As you can see from screenshot, there is heading element, paragraph element and unordered list element structed each other. Display of this code is at below. I want you to realize front of items there is bullet mark. That is why we called our list as unordered list.
Ordered Lists: Starts with <ol>…</ol>. Each items that we want to list , put between these tags by using <li>…</li>. And the list items will be marked with numbers by default. Let me give real example as well.
As you can see from screenshot, there is heading element, paragraph element and ordered list element structed each other. Display of this code is at below. I want you to realize front of items there are numbers. That is why we called our list as ordered list.
Additively, It is totally appropriate to nest one list inside another list. It does not matter which type of lists that you want to nest each other. I have attached the code at below. You can be able to try it yourself and spend time on it. Than You would do your nested list by yourself!
Emphasis
In human language, we often emphasize certain words to alter the meaning of a sentence, and we often want to mark certain words as important or different in some way. In spoken language, we stress the certain word. In written language we tend to stress words by putting them in italics. HTML provides various semantic elements to allow us to mark up emphasize. However, we will take look <em>…</em> (emphasis) element to mark up instances. When we use <em>…</em> in our web page ,content will be recognized by screen readers and spoken out in a different tone of voice. Let’s try it out.
Strong
To emphasize important words, we tend to stress them in spoken language and bold them in written language as well. In HTML we use the <strong>…</strong> element element to mark up our content . As well as making the document more useful, these are recognized by screen readers and spoken out a different tone of voice as well. Let me show you how we use.
In conclusion, this article should have given you a good idea of marking up text in HTML. Additively, There are more semantic elements to cover in this Web World. We have covered some of important semantic elements at least. In the following article we will take look more closer to hyperlinks, images, tables and forms.
