patternhtmlMinor
HTML5 markup for blog article
Viewed 0 times
html5markupforblogarticle
Problem
Recently I started a blog project. It is my first time that I create something so advance. I use task runners, SEO optimization, preprocessors, I will code in full stack environment and all the other stuffs that needs a project.
After many days, structuring my page through UX and UI, think about HTML5 tags usage and keep in mind the meaning of simplicity, I have end up with a simple design pattern. Before I continue, I wanted someone to review my html structure. (As a holiday season, all of my buddies are on vacation.)
Bellow is the html file structure with only the tags names. I removed some of the class and ids attributes and the links to external resources.
```
BLOG NAME
... FUNKY TEXT ...
A DESCRIPTION OF TH EARTICLE
ARTICLE'S TITLE
AUTHOR NAME
THE MAIN ARTICLE'S CONTENT
userName
COMMENT'S FAV COUNTER
THE ACTUAL COMMENT BODY
posted date
MESSAGE ALERT WHEN THE USER POST A COMMENT
After many days, structuring my page through UX and UI, think about HTML5 tags usage and keep in mind the meaning of simplicity, I have end up with a simple design pattern. Before I continue, I wanted someone to review my html structure. (As a holiday season, all of my buddies are on vacation.)
Bellow is the html file structure with only the tags names. I removed some of the class and ids attributes and the links to external resources.
```
BLOG NAME
... FUNKY TEXT ...
A DESCRIPTION OF TH EARTICLE
ARTICLE'S TITLE
AUTHOR NAME
THE MAIN ARTICLE'S CONTENT
userName
COMMENT'S FAV COUNTER
THE ACTUAL COMMENT BODY
posted date
MESSAGE ALERT WHEN THE USER POST A COMMENT
Solution
Just scratching the surface of the html code. Bear in mind it's difficult to review html since we are not focusing on the CSS and Javascript sections . Since am a Bootstrap fan most of my comments are aimed at improving your presentation.
-
Minimise the use of "class" if the css defined is only for this element. Please restrict yourself to "id"
use
except this was defined by twitter bootstrap structure.
-
Note there are symbols for copyright
-
This section of code
can be written as
-
If you ask me I would rather use
Note- most of the examples are from this page Forms Twitter Bootstrap
-
Minimise the use of "class" if the css defined is only for this element. Please restrict yourself to "id"
use
except this was defined by twitter bootstrap structure.
-
Note there are symbols for copyright
Copyright © Author's Name-
This section of code
BLOG NAME
... FUNKY TEXT ...
can be written as
BLOG NAME
... FUNKY TEXT ...
-
If you ask me I would rather use
.... in place of ... because the class properly aligns your content within the container- fluid and also the class has some defined css for media queries. Note this bootstrap standard for specifying a row. Note- most of the examples are from this page Forms Twitter Bootstrap
Code Snippets
<div class="email">
<input type="text" />
</div><div id="email">
<input type="text" />
</div><p> Copyright © Author's Name<p><header>
<div class="nav-icon">
<a href="">
<span class="home-page-icon"></span>
</a>
</div>
<h1>BLOG NAME</h1>
<p>... FUNKY TEXT ...</p>
</header>Context
StackExchange Code Review Q#134861, answer score: 3
Revisions (0)
No revisions yet.