Now, by the end of this post, we will learn the following:
- what HTML is
- The HTML element anatomy
- creating your first HTML element
- Block, inline and empty elements
- write HTML like a supercharged dev using emmet with examples
HTML stands for Hypertext Markup Language. It is a standard markup language that tells web browsers how to structure and displayed pages in a browser. HTML is not a programming language.
An HTML element mainly consists of opening tag, content and a closing tag.
it is the first part of an html element starting from left to right. It wraps the name of the element in an opening and closing brackets. In this example the name of the element is h1.
It contains the content of the element. it is located between the opening and the closing tag.
this tag is almost the same as the opening tag but it has a forward slash before the element name. it is the last part of an html element from left to right.
The example shows a class attribute with a value of “btn”. Attribute values are wrapped in quotation marks
Also, there is an empty html element which is a little different from the regular html. An empty html element only contains an opening tag. They are mostly used to insert items (eg. images) in a document.
examples of these elements are
A block-level element will appear in a new line without allowing another html element sitting adjacent to them. They take up the full width available within a page starting from left to right. Block-level element will appear on another line following the content that comes before it. It is also possible to nest a block-level element within another block-level element but not an inline-element.
we saved the best for the last. As you can see, it can be laborious writing lots of html to structure your web pages especially if the web site is a large one. As developers💻, we are always on the lookout for the best ways to make the development process an enjoyable and productive one.
"Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow"
Emmet is easy to grasp and has a very user-friendly syntax.
Fortunately, most recent code editors come already loaded with emmet and it should be easy to kick start.
below are examples of how you can use it in your web development workflow.
Thank you for reading. You have earned your emmet nugget⚜️