One of HTML's main job is to give appropriate structure and appearence to the document so that the browser can understand it correctly. As you are well familiar with this markup language but there are some important things which can create some issues in your design. To fetch these issues you have to consider some semantics in mind that are quite necessary.
So, to becoming an expert UI or web designer you need to go for top HTML5 courses in Delhi which will furnish you thorough knowledge on essential aspects of this web designing language.
In this blog we are going to cover some significant points which you need to consider while working with HTML to be a good UI and web designer.
Important Points to Remember while Working with HTML
1. Write Valid HTML
First of all why do we need to write a Valid HTML document because the valid document is correctly displayed by the browser as invalid HTML can cause bugs and errors which might be hard to find and fix. A valid document is easy to maintain and update even by someone else also. There should be a specific structure to write a valid HTML.
2. HTML Structural Hierarchy
To learn this language firstly you need to understand tags and how they behave. Working with this front – end language is quite easy as you have to learn usage of various tags in order to format the text and the images used in your web page. This markup language is not case sensitive but W3C has recommended to use tags in lowercase. Basic document structure of a markup page is:
<!DOCTYPE HTML>
<HTML>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Hey! I'm using HTML</h1>
</body>
</HTML>
In the above code <!DOCTYPE> tag is used to specify the document type and the version of the HTML. After that the <HTML> tag encloses the whole text document inside the opening and closing tag, only the forward slash makes a little difference between both the tags. After creating this basic structure in your text editor save it with the extention .htm or .html.
3. Remember Closing Tags
Heading Tag: Every document starts with a heading. HTML provides us six levels of headings which uses the elements <h1>, <h2>, <h3>, <h4>, <h5>, <h6> the size of the heading varies from first to sixth.
- Paragraph Tag: The paragraph tag (<p>) provides us to structure our text in different paragraphs. But the text must be in between the opening and closing tags eg. <p>Hey! I am working with HTML</p>.
- Line Break Tag: This tag allows us to break our sentence into a new line, anything that is following the <br> tag will start from the next line. This tag is an example of empty tag as there is no closing tag because there is nothing to go between these tags.
- Horizontal Lines: Horizontal Lines are used to break-up section of a document. Again <hr> tag is an example of empty tag.
- HTML Links: There is a popular tag or element in this markeup languge which we used to add links is <a></a>. For instance: <a href="https://www.admecindia.co.in">This is a link</a> the destination of the link is specified in the "href" attribute. Attributes are used to impart additional details about the element.
4. Never Use Inline CSS
When you are writing a code in your web document avoid using inline styling eg. <p style = "color:red;">Hey! I am working on HTML</p> you might be thinking that writing in this manner is harmful..? However this may lead to an error somewhere in your coding. So take this in practice that whenever you are making your markup don't even think about styling inline, better finish up your markup and then reference 'p' in the external stylesheet
For example:
#someElement>p{
color:red;
}
5. Place all External Files in HEAD Tag
If we say that placing stylesheet file anywhere is convenient, it will be okay but you will not get the benifit of loading faster. If we want to load our web page faster then we need to place the stylesheets within the head tag of this front – end language as per the recommendations.
6. Place Script Files at the Bottom
Just opposite to stylesheets, we place the scripts files at the bottom for reducing the loading time of the web page. Suppose if you have JavaScript file whose only purpose is to add functionality, place it at the bottom of the text document just before </body> </html> tags. This is how we can decrease the loading time speed of our web page.
7. Don’t Forget Semantic HTML Guidelines
HTML5 has come up with the Semantic Structure that contains some logical regions such <article></article> tag to provide better experience to search engines as well as site visitors. When we write the correctly semantic code, it redirects the browser that what type of content it is dealing with and how it is related to other content.
Here are some points that must be considered and are as follows:
- Use Div Tags for Layout only: Div and Span are two elements for layout. They are meaningless sementically because they do not have keyboard or touch support in any browser. For instance, avoid the use of span and div for creating button since you have HTML5 semantic stucture‘ s tags like <button></buttom>.
- Headings: Make sure that there is one h1 in one page, matching the page title. You cann't skip any heading level when increasing but you can do it means you can skip it when you are decreasing.
- Use of Sementic Elements: These are the tags which clearly defines the contents contained in it. Whereas, <div> and <span> tags are not considered as non-semantic elements.
Sementic elements of HTML5 are:
- <header> is an element which works as a container for the introductory content in a web document. There could be multiple header in a doucment.
- <footer> is a tag or element that is used for defining the footer area for a web document.
- <nav> is an element that works as a container for navigational links of the website.
- <main> is one of the important sementic tags of HTML5 that contains the main body content of the web page.
- <section> is mainly used for defining the web pages sections.
- <article> is an element that contains the articles in the web page.
- <aside> is a container or element that contains content for sidebar.
- <address> defines the contact information for the author/owner of a document or an article
- <figure> defines self-contained content, like illustrations, diagrams, photos, code blocks, etc.
8. Don't Forget to Validate HTML
In terms of HTML validation is a process of checking the document against some standards such as W3C which determines if your document follows the formatting standards. As you will find sometimes your tags remains unclosed and the markup sometimes shows whitespaces just to overcome such issues you need to validate your code continuously.
At the end the only answer to the question why do we need these Symantics..? is that symentics are relied on everywhere around us, the need to follow these symentics is just to give make sure that you are using the right element, giving your text the right meaning, function or appearence. So it will be a good practice to use right way for coding. We hope all these tips were surely helpful for you.
Learning HTML5 can become easy and interesting by joining an advanced web design and development institute like ADMEC Multimedia Institute. We offer one of the top HTML5 courses in Delhi which are designed as per the industry standard. To know more about our web designing and development courses get in touch with our career counsellor at +91 9911-7823-50 or 9811-8181-22.
No comments:
Post a Comment