All you need to know about Html Elements
By Emmanuel Chinonso
HTML ELEMENT: An HTML element is defined by a start tag, an end tag and some content in-between the tags.
<tagname> content goes here <tagname>
The html element is everything from the start tag to the end tag:
Starting tag Element content End Tag
h1 My first statement h1
The HTML element without content are called empty element. Empty elements do not have an end tag, such as
<br> (this is a line break).
Nested HTML Element
HTML element can contain element inside it or can be nested with element. All HTML documents contain nested element
<!DOCTYPE html><html><body><h1>my first web heading</h1></body></html>
<html> element defines the whole document and represent the root element. It has a start tag
<html> and an end tag
Then, inside the
<html> element there is
<body> element nested within the
<body> tag defines the body of the web. Inside the
<body> tag is the
<h1> element nested inside it.
Never forget the end tag
Some editor will help you put your end tag when you write the code. However, sometimes this may not be the case and when you forget to put the tag, unexpected error will occur.
Empty HTML ELEMENTS
As we stated earlier HTML element with no content are called empty elements. The
<br> tag is an example of an empty element and it defines a line break.
<p>This is a <br /> paragraph with a line break.</p>
This is how the code looks like:
This is a
paragraph with a line break.
HTML is not case sensitive
HTML tags are not case sensitive. For example, the
<p> means the same as
<p>. it is always better if you use the lower case when you write HTML tags.
HTML attributes are always specified at the beginning of a tag and it usually provides additional information about the element. It usually come in name/value pairs: name="value"
The href Attribute:
The html links are usually defined with
<a> tag while the link address is specified in the href attribute:
The src Attribute:
<img> tag used to embed an image in an HTML page. The src attributes provides additional information such as providing the path of the image to be displayed.
<img src="img-home.jpg" />
There are two ways to specify the url in the src attribute:
The absolute URL – link to external images that are hosted on another website. eg
Relative URL- links to an image that is hosted within the website. eg
Its usually best to use the relative Urls. They will not break if you change domain.
The width and height Attribute: Images are known to have a set of size attributes, which specifies the width and height of the image.
<img src="img-gril.jpg" width="250" height="500" />
The alt Attribute: The alt attributes specify the alternative message to display if the message is not shown there. The value of the attribute can be read by screen readers. This way, someone with impaired vision listening will hear the value of the element.
<img src="https://gooogle.com/img/logo/gooogle.jpg" alt="google image with white background" />
The style Attribute: This is used to defined the styling of an element such as color, font, size etc.
<h1 style="color : blue">Attributes in html</h1>
The lang Attribute: The language of the html document can be declared with the lang attribute This is important for accessibility application and search engines.
<!DOCTYPE html><html lang="en-US"><body><p>home all</p></body></html>
The first two letter shows the language(en). And if there is a dialect, you can add it (US).
The title Attribute:
The title attribute can be added to a
<p> element. The title attributes add more information about that element.
<p title="Im unstoppable">This is a track record.</p>
Create Stunning websites and web apps
Building different custom components in react for your web apps or websites can get very stressful. Thats why we decided to build contrast. We have put together a UI kit with over 10000+ components, 5 admin dashboards and 23 additional different pages template for building almost any type of web app or webpage into a single product called Contrast Pro.Try contrast pro
Contrast React Bootstrap PRO is a Multipurpose pro template, UI kit to build your next landing, admin, SAAS, prelaunch, etc project with a clean, well documented, well crafted template and UI components.Learn more about Contrast Pro