Businesses hire web developers to create websites for their organizations. They are now a critical component for any business to stay competitive. A website has a front-end and a back-end. The front end is what users see and interact with when they open a website i.e. the structure of the web page, its layout pattern, text styling, drop-down menus, interactive graphics, etc. The back-end comprises a server, an application and a database for storing data.
Tools you need to install
- Google Chrome Browser (which already comes with chrome developer tool CDT)
- Sublime Text 3
- Browser Sync
NOTE - Browser Sync gets installed using the Node.js package manager (NPM) installer so you need to install Node.js first before installing browser sync..
Role of HTML5
HTML stands for Hyper Text MarkUp Language. Hypertext is text which contains links to other texts and that’s basically the entire web, right? Markup means to mark something up, to annotate. So what HTML does is it annotates the content to tell the browser, or to tell some other machine out there, some other program out there, what this content is i.e. whether a heading, a paragraph ,a list,etc.
HTML is not case sensitive.
Anatomy of an HTML Tag
- Every HTML element can have predefined attributes.
- An Attribute is a name value pair, which is kind of a meta data about the element itself that it’s being applied to.
- Attributes are specified only on opening tag.
Basic HTML Document Structure
Declaration : - <!Doctype html>
This declaration is used by the browser to distinguish between the compliant and non-compliant web pages. Compliant web pages are those which follow the HTML5 standards as proposed by W3C. * After the declaration, we have an html tag which contains the entire html document. It contains the head and body tags respectively. * The head tag contains items that describe the main content of the page. Things like what character coding should the browser use for the main content. It can contain authors description of the page, page title, and whatever other external resources are needed to render the page properly, among other things. * It’s always a good idea to specify the character set that the browser should know how to interpret the content of the webpage. The most commonly used character set is UTF 8. Also note that the meta tag is a stand alone tag. * Body tag contains the main contents of the web page i.e. paragraph elements, section, headings, links, lists, etc.
NOTE- The tag which opens first gets closed at the last. So if a paragraph tag opens within a section tag, the you should first close the paragraph tag then the section tag.
HTML Content Model
Content Model tell us which element is to be nested within which. HTML 5 split the two basic content models into seven categories.
The two basic types of content models are: 1. Block Level 2. Inline Level
Difference between block level and inline content models are:
Tip:- Refer to the W3C website to check which element comes under which category of content model in HTML 5 to understanding the nesting levels of elements.
Some new features of HTML5
HTML5 offers new semantic elements to define different parts of a web page which will help you to create your web pages easily.
It allows the browser to display certain characters it would otherwise interpret as part of HTML code and not something display to the user.
To provide characters which are not available on keyboard. For e.g. & copy for copyright symbol.
To safeguard against more limited character encoding e.g. & quot which might turn to some wierd character in some other character set.
Keep up with the series to know about the most commonly used tags in the next part.
About the author
Veena Chaddha is a student at SRM University, pursuing a btech degree in computer science engineering. She is an avid learner and a tech enthusiast. Her skills are HTML, CSS, Bootstrap, Nodejs , Flutter and is looking forward to be a software developer. She is well versed in English and has good communication skills.
If You find it interesting!! we would really like to hear from you.
Ping us at Instagramemail@example.com
If you want articles on Any topics dm us on insta.
Thanks for reading!!