HTML Elements

HTML Elements

An HTML element is defined by a start tag, some content, and an end tag:

<tagname>Content goes here...</tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>
<p>My first paragraph.</p>
Start tagElement contentEnd tag
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<br>nonenone
Note: Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!

Nested HTML Elements

HTML elements can be nested (this means that elements can contain other elements).

All HTML documents consist of nested HTML elements.

The following example contains four HTML elements (<html>, <body>, <h1> and <p>):

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Output :


Example Explained

The <html> element is the root element and it defines the whole HTML document.

It has a start tag <html> and an end tag </html>.

Then, inside the <html> element there is a <body> element:



<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>



The <body> element defines the document's body.

It has a start tag <body> and an end tag </body>.

Then, inside the <body> element there is two other elements: <h1> and <p>:



<h1>My First Heading</h1>
<p>My first paragraph.</p>



The <h1> element defines a heading.

It has a start tag <h1> and an end tag </h1>:



<h1>My First Heading</h1>



The <p> element defines a paragraph.

It has a start tag <p> and an end tag </p>:



<p>My first paragraph.</p>



Never Skip the End Tag

Some HTML elements will display correctly, even if you forget the end tag:

Example

<!DOCTYPE html>
<html>
<body> 

<p>This is a paragraph.
<p>This is a paragraph.

</body>
</html>

Output :

However, never rely on this! Unexpected results and errors may occur if you forget the end tag!

Empty HTML Elements

HTML elements with no content are called empty elements.

The <br> tag defines a line break, and is an empty element without a closing tag:

Example

<!DOCTYPE html>
<html>
<body> 

<p>This is a <br> paragraph with a line break.</p>

</body>
</html>

Output :


HTML is Not Case Sensitive

HTML tags are not case sensitive: <P> means the same as <p>.

The HTML standard does not require lowercase tags, but We recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.



Comments

Post a Comment

Popular posts from this blog

CorelDraw Shortcut keys

CorelDraw Shortcut keys CorelDraw Shortcut keys Align Bottom Main B Aligns selected objects to the bottom Align Centers Horizontally Main E Horizontally aligns the centers of the selected objects Align Centers Vertically Main C Vertically aligns the centers of the selected objects Align Left Main L Aligns selected objects to the left Align Right Main R Aligns selected objects to the right Align To Baseline Main Alt+F12 Aligns text to the baseline Align Top Main T Aligns selected objects to the top Artistic Media Main I Add artistic brush, spray, and calligraphic effects by using freehand strokes. Back One Main Ctrl+PgDn Back One Bold Text Editing Ctrl+B Make the text bold. Bold Table Text Editing Ctrl+B Make the text bold. Break Apart Main Ctrl+K Break the object apart to create multiple objects and paths. Brightness/Contrast/Intensity... Main Ctrl+B Brightness/Contrast/Intensity Bring up Property Bar Main Ctrl+Enter Brings up the Property Bar and gives focus to t...
Read more

Get to know Photoshop (Photoshop basic part-1)

Image
Get to know Photoshop Open images In the menu bar, choose  File > Open  to open existing images. In the menu bar, choose  File > New  to create a new image from scratch. Select a document preset. You can customize the preset by typing in your own values, like width and height. Get familiar with the work area Menu bar  (at the very top) shows the File, Edit, Image, and other menus that give you access to a variety of commands, adjustments, and panels. Options bar  (underneath the menu bar) displays options for the tool you are currently working with. Tools panel  (on the left) contains tools for editing images and creating artwork. Similar tools are grouped together. You can access related tools in a group by clicking and holding a tool in the panel. Panels (on the right) include  Color, Layers, Properties , and other panels that contain a variety of controls for working with images. You can find the full list of panels ...
Read more

Coreldraw ToolBox and its Functions

Image
Coreldraw ToolBox and its Functions Pick Tool = To select, resize, and rotate toward the image object. Shape Edit Shape : Editing an image object shape. Smudge Brush : Alter / distort the overall picture with attractive shorelines. Roughen Brush : Alter / distort the overall outline shape drawing by attractive shorelines. Free Transform Tools : Transform image objects using rotation (rotation)free, rotation angle, and resize, and also tilt the image shape. Crop Tool Crop : Eliminate the unwanted parts in the object. Knife : Alter / distort the overall picture with attractive shorelines. Erase : Remove the area in the picture. Virtual Segment Delete : Delete an object that is part of the intersection (the intersection). Zoom Zoom : Change the magnification of the image in the image window Hand : Adjusts the images that appear in the image window Curve Freehand : Draw segments or curves in the form of a single line Bezier : Drawing curves in the form of a single...
Read more