HTML ELEMENT: An HTML element is defined by a start tag, an end tag and some content in-between the tags.
EXAMPLE
<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
HTML Code
<!DOCTYPE html>
<html>
<body>
<h1>my first web heading</h1>
</body>
</html>
CODE EXPLAINED
The <html>
element defines the whole document and represent the root element. It has a start tag <html>
and an end tag </html>
. Then, inside the <html>
element there is <body>
element nested within the <html>
element. <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.
Html code
<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
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:
Html code:
<a href="https://google.com"></a>
The src Attribute: The <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.
Html code
<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 src="http://www.google.com/images/img-girl.jpg"
. Relative URL- links to an image that is hosted within the website. eg src="img-girl.jpg"
. 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.
Html code
<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.
Html code
<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.
Html code
<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.
Html code
<!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.
Html code
<p title="Im unstoppable">This is a track record.</p>
Resources
- Contrast Design Bootstrap
- Accordion
- Alert
- Animation
- Autocomplete
- Badges
- Box
- Breadcrumb
- ButtonGroup
- Button
- ButtonToolbar
- Card
- Carousel
- Checkbox
- Collapse
- DataTable
- DatePicker
- DropDown
- Footer
- Forms
- Icon
- Iframe
- Input
- InputGroup
- ListGroup
- Mask
- Modal
- Multiselect
- Notification
- Pane
- Panel
- Pop Over
- Progress
- Radio
- Rating
- Select
- Select 2
- Slider
- Spinner
- Stepper
- Switch
- Table
- Forms
- Navbar
- Pagination
- Tab
- Sidebar
- Time Picker
- Data Table
- Fixed Data Table
- Table
- Widgets
Top comments (0)