HTML Elements

HTML Elements


HTML element syntax

An HTML element usually consists of a  start tag (or opening tag) and an end tag (or closing tag) , with content inserted  in between.

<tagname>Content goes here…</tagname>

Note: İn this example İ wrote <tagname> content .. </tagname>
But tagname isn’t an actual tag. İt was just an example word. Which was a self-explanatory word.

Now let’s look at an actual tag. For example, a paragraph, which is represented by the p element, would be written as:

The difference between opening and closing tag is that closing tag is the same but has a / (Forward slash in it). Look at the picture and the code, you can notice. There is only one difference which is /

<!DOCTYPE html>
<html>
<body>


<p>My first paragraph.</p>

</body>
</html>

HTML Tags Vs Elements

The HTML element is everything from the start tag to the end tag:
Technically, an HTML element is the collection of start tag, its attributes, an end tag and everything in between. On the other hand an HTML tag (either opening or closing) is used to mark the start or end of an element, as you can see in the above illustration.


Nested HTML Elements

HTML elements can be nested (elements can contain elements). All HTML documents consist of nested HTML elements. That’s the structure.
What are nested elements?
İt’s putting an element inside another element.
Now, The only element that is not inside another element,
is html element.
That is called the root element.
The head element and the body element are both nested inside
the html element.


Look at this nested HTML elements

The <html> element defines the whole document.
It has a start tag <html> and an end tag </html>.
The only element that is not inside another element,
is <html> .. </html> element.

<!DOCTYPE html>
<html>
	  <head>
		  <title>The title </title>
	  </head>

	  <body>

		<p>Hello World</p>
	   
	  </body>

</html>

Inside the <html> element is the <head>  and <body> elements.
The <head> element defines the document head. It has a start and an end tag (opening and closing tags)
The <body> element defines the document body. It has a start and an end tag (opening and closing tags)

	  <head>
		  <title>The title </title>
	  </head>

	  <body>

		<p>Hello World</p>
	   
	  </body>

Inside the <head> element is the <title>   element. 
The title element defines the title of web page.

	  <head>
		  <title>The title </title>
	  </head>

Inside the <body> element is the <p>   element. 
The p element defines a paragraph.

	  <body>

		<p>Hello World</p>
	   
	  </body>

HTML Is Not Case Sensitive

HTML tags and attributes are not case sensitive( but most attribute values are case sensitive).
İt means that:

<P>  and  <p>  

tags are the same. They define paragraph.

The HTML5 standart does not require lowercase tags. But W3C recommends using lowercase in HTML. İt’s good practice and won’t cause any error. But in XHTML they are case-sensitive and the tag <P> is different from the tag <p>.

<p> This is a paragraph </p>

<P> This is also a valid paragraph </P>

At nevci.com we always use lowercase tags and recommend you to write your HTML always in lowercase


Empty HTML Elements

HTML elements usually come in pairs as start tag and end tag and content in between
Like this: <p> Content.. </p>

But in HTML we also have Empty Elements. Like <br> or <hr>.
HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line break.
<hr> is also an empty element without a closing tag (the <hr> tag defines a horizontal line.

<p>This paragraph contains <br> a line break.</p>

<p>This paragraph contains  a  horizontal line. or seperator</p> <hr>
<p> Some text </p>


Comments are closed.