In this page there is a summary for 3 different subjects in structuring HTML…
The Definitive Guide: How To Create Your First Wireframe:
Wireframing is a practice allows you to define and plan the information hierarchy of the design for a website, app, or product.
Without the distractions of colors, typeface choices or text, wireframing lets you plan the layout and interaction of your interface.
The importance of Wireframing with examples in this picture:
Six steps for making Wireframing:
- Do your research
- Prepare your research for quick reference
- Make sure you have your user flow mapped out
- Draft, don’t draw. Sketch, don’t illustrate
- Add some detail and get testing
- Start turning your wireframes into prototypes
The best 3 onlines tools for Wireframing:
-
UXPin: facilitates building responsive clickable prototypes directly in your browser.
-
InVision: InVision allows you to get feedback straight from your team and users. It’s free
-
Wireframe.cc: create wireframes really quickly within your browser, the online version of pen & paper.
HTML Basics:
HTML (Hypertext Markup Language) is the code that is used to structure a web page and its content. HTML consists of a series of elements
Main parts:
- The opening tag <>
- The closing tag </>
- The content (the text)
- the element (all the parts together)
also can have attribute like this:
Here, class is the attribute name and editor-note is the attribute value.
You can put elements inside other elements too — this is called nesting.
To structure your website you will use HTML grumpy.
The structure of HTML:
Semantics
In programming, Semantics refers to the meaning of a piece of code
Semantics in JavaScript
In JavaScript, consider a function that takes a string parameter, and returns an <li> element with that string as its textContent. Would you need to look at the code to understand what the function did if it was called build(‘Peach’), or createLiWithContent(‘Peach’)?
Semantics in CSS
In CSS, consider styling a list with li elements representing different types of fruits. Would you know what part of the DOM is being selected with div > ul > li, or .fruits__item?
####Semantics in HTML In HTML, for example, the <h1> element is a semantic element, which gives the text it wraps around the role (or meaning) of “a top level heading on your page.”
benefits of writing semantic:
- Search engines will consider its contents as important keywords to influence the page’s search rankings.
- Screen readers can use it as a signpost to help visually impaired users navigate a page.
- Finding blocks of meaningful code is significantly easier than searching through endless divs with or without semantic or namespaced classes.
- Suggests to the developer the type of data that will be populated
- Semantic naming mirrors proper custom element/component naming